<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Day6</title> <style> * { margin: 0; padding: 0; } .dv { width: 200px; height: 200px; border: 1px solid blueviolet; /*overflow:scroll;*/ margin: 5px; padding: 10px; } #btn1 { position: absolute; left: 250px; top: 350px; } .top { height: 100px; background-color: #30ff8d; } .title { height: 100px; width: 100%; display: block; background-color: royalblue; position: relative; z-index: 99999; } #dv2 { width: 100px; height: 100px; background-color: greenyellow; position: relative; } #dv3 { width: 100px; height: 100px; background-color: #ff97d8; position: relative; } #dv4 { position: relative; width: 600px; height: 50px; background-color: #7daeff; z-index: 0; } #dv5 { position: relative; width: 100px; height: 100px; background-color: #2bff6c; } #dv6 { position: relative; width: 100px; height: 100px; background-color: #ecff28; } #dv4 span { display: inline-block; width: 100px; height: 50px; position: absolute; background: url(images/cloud.gif) no-repeat; z-index: -1; } #uu { width: 600px; height: 50px; } #uu li { width: 100px; height: 50px; display: inline-block; float: left; list-style: none; text-align: center; line-height: 50px; cursor: pointer; z-index: 2; } </style> </head> <body> <div class="top"></div> <div class="title">随动模块</div> <div class="dv"> 卷曲测试 </div> <input type="button" value="按钮" id="btn1"> <br> <br> <div id="dv2"></div> <input type="button" value="移动到400" id="btn2"> <input type="button" value="移动到800" id="btn3"> <br> <br> <br> <div id="dv3"></div> <input type="button" value="移动到400" id="btn4"> <input type="button" value="移动到800" id="btn5"> <br> <br> <br> <div id="dv4"> <span id="cloud"></span> <ul id="uu"> <li>张全蛋</li> <li>面筋哥</li> <li>波澜哥</li> <li>蓝蓝路</li> <li>游泳教练</li> <li>王司徒</li> </ul> </div> <br> <br> <br> <div id="dv5"></div> <input type="button" value="往下400" id="btn6"> <input type="button" value="宽度增加" id="btn7"> <br> <br> <div id="dv6"></div> <input type="button" value="改变多个属性" id="btn8"> <script> /*卷曲 * 1.offsetHeight 和 offsetWidth 包括padding和border,但是不包括margin * 2.scrollHeight 和 scrollWidth 包括padding不包括border更不包括margin， * 在内容没有超出盒子时，scrollHeight 和scrollWidth获得的是盒子内部高度和宽度 * 内容超出盒子时获得的是内容实际应有的高度和宽度。 * *3.scrollTop 和 scrollLeft * 获得的是内容卷曲出去的高度和宽度，当滚动条向下拉时，内容往上走，获得的就是上面跑出盒子范围的那部分高度。 * 滚动条向右拉同理 * */ var dv = document.getElementsByClassName("dv")[0]; var btn = document.getElementsByTagName("input")[0]; console.log(dv.offsetHeight); //222,说明offsetHeight包括padding和border,但是不包括margin offsetWidth同理 console.log(dv.scrollHeight); //220，说明scrollHeight 包括padding不包括border，scrollWidth同理 btn.onclick = function () { dv.style.overflow = "scroll"; dv.innerHTML = "时维九月</br>序属三秋</br>潦水尽而寒潭清，烟光凝而暮山紫</br>" + "俨骖騑于上路，访风景于崇阿</br>临帝子之长洲，得天人之旧馆</br>" + "层峦耸翠，上出重霄；飞阁流丹，下临无地。</br>。鹤汀凫渚，穷岛屿之萦回；桂殿兰宫，即冈峦之体势。"; console.log(dv.scrollHeight); //293，内部overflow设置了scroll，内部有了滚动条占了一部分距离，但是还是超出了220，说明scrollHeight在超出时获得的是实际内容的高度 console.log(dv.scrollWidth); //203，内部overflow设置了scroll，内部有了滚动条占了一部分距离 }; dv.onscroll = function () { //onscroll事件，拖动滚动条事件 console.log(dv.scrollTop);//拖动滚动条之后可以看出数字变化 }; </script> <script> /* * 获取浏览器向上卷曲出的距离： * 根据浏览器兼容性分为三个方法：window.pageYOffset document.documentElement.scrollTop document.body.scrollTop * 要写兼容代码 * */ function getScroll() { // var Obj = {} //返回一个对象，里面的属性为向上卷曲的距离和向左卷曲的距离 // obj.top = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; // obj.left = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft; // return obj; return { top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop, left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft } } //测试 var tit = document.getElementsByClassName("title")[0]; window.onscroll = function () { console.log(getScroll().top); if (getScroll().top > 100) { tit.style.position = "fixed"; tit.style.top = 0; } else { tit.style.position = "relative"; //能正常归位 } // if(getScroll().top>100){ // tit.style.top = getScroll().top - 100 +"px"; // // }else{ // tit.style.top = 0; //能正常归位 // } }; </script> <script> //移动的函数 function move(element, target) { clearInterval(element.timeId); element.timeId = setInterval(function () { var current = element.offsetLeft; var temp = 10; temp = target > current ? temp : -temp; current += temp; if (Math.abs(target - current) > Math.abs(temp)) { element.style.left = current + "px"; } else { clearInterval(element.timeId); element.style.left = target + "px"; } }, 10); } var btn2 = document.getElementById("btn2"); var btn3 = document.getElementById("btn3"); var dv2 = document.getElementById("dv2"); btn2.onclick = function () { move(dv2, 400); } btn3.onclick = function () { move(dv2, 800); } </script> <script> /* * 由快到慢的移动效果：让每次移动的距离 = 距离/10 * 如果是正数向上取整，如果是负数向下取整 * 当距离越来越近时，每次移动的距离就越来越小，直到每次移动1直到目标位置 * * * * */ function slowMove(element, target) { clearInterval(element.timeId); element.timeId = setInterval(function () { var current = element.offsetLeft; var temp = (target - current) / 10; //设置每次走得距离 temp = target > current ? Math.ceil(temp) : Math.floor(temp); //Math.ceil向上取整 Math.floor向下取整 current += temp; element.style.left = current + "px"; if (target == current) { clearInterval(element.timeId);//到达清理定时器 //这种移动方式绝对会到达目标位置，所以不需要判断距离 } //测试 //console.log("target" + target + " current" + current + " temp" + temp); }, 30); } var btn4 = document.getElementById("btn4"); var btn5 = document.getElementById("btn5"); var dv3 = document.getElementById("dv3"); btn4.onclick = function () { slowMove(dv3, 400); } btn5.onclick = function () { slowMove(dv3, 800); } </script> <script> //筋斗云案例 var list = document.getElementById("uu").children; var cloud = document.getElementById("cloud"); for (var i = 0; i < list.length; i++) { //循环注册事件 //鼠标进入 list[i].onmouseover = mouseoverHandle; //鼠标离开 list[i].onmouseout = mouseoutHandle; //点击 list[i].onclick = mouseClick; } function mouseoverHandle() { slowMove(cloud, this.offsetLeft); } function mouseoutHandle() { slowMove(cloud, lastPosition);//每次离开回到上次的位置 } var lastPosition = 0; function mouseClick() { lastPosition = this.offsetLeft; //点击时保存这次的位置 } </script> <script> /* * 获取元素所有的CSS样式： * window.getComputedStyle(对象，null)返回一个对象，里面为对象的CSS样式 //谷歌火狐 * 对象.currentStyle返回一个对象，里面为对象的CSS样式 IE8 * *可以用次方法获取任意对象的任意CSS属性，获取得到的对象只读，不可以用这个方法修改样式信息 * 兼容代码如下 * */ // console.log( window.getComputedStyle(dv3,null)); // console.log( dv3.currentStyle(dv3,null)); function getStyle(element, attribute) { return window.getComputedStyle ? window.getComputedStyle(element, null)[attribute] : element.currentStyle[attribute]; } console.log(getStyle(dv3, "backgroundColor")); </script> <script> /* * 可以设置任意一个属性的函数 * */ function getStyle(element, attribute) { return window.getComputedStyle ? window.getComputedStyle(element, null)[attribute] : element.currentStyle[attribute]; } function attrChange(element, attribute, target) { clearInterval(element.timeId); element.timeId = setInterval(function () { var current = parseInt(getStyle(element, attribute));//得到当前的属性值,并转化为数字类型 var temp = (target - current) / 10; //设置每次改变得距离 temp = target > current ? Math.ceil(temp) : Math.floor(temp); //Math.ceil向上取整 Math.floor向下取整 current += temp; element.style[attribute] = current + "px";//设置属性 if (target == current) { clearInterval(element.timeId);//到达清理定时器 //这种移动方式绝对会到达目标位置，所以不需要判断距离 } //测试 //console.log("target" + target + " current" + current + " temp" + temp); }, 30); } var btn6 = document.getElementById("btn6"); var btn7 = document.getElementById("btn7"); var dv5 = document.getElementById("dv5"); btn6.onclick = function () { attrChange(dv5, "top", 400); }; btn7.onclick = function () { attrChange(dv5, "width", 800); } </script> <script> /* * 可以设置任意多个属性值 * 设置一个属性需要传入一个属性以及目标值 * 设置多个属性则需要传入多个属性及对应的目标值 * 可以传入一个对象:对象里包含多个键值对 * * */ function getStyle(element, attribute) { return window.getComputedStyle ? window.getComputedStyle(element, null)[attribute] : element.currentStyle[attribute]; } function attrsChange(element, json) { clearInterval(element.timeId); element.timeId = setInterval(function () { //for in 遍历对象,将每个属性都移动到目标位置 var flag = true;//假设全部到达 for (attr in json) { var current = parseInt(getStyle(element, attr));//得到当前的属性值,并转化为数字类型 var target = json[attr];//获得目标值 var temp = (target - current) / 10; //设置每次改变得距离 temp = target > current ? Math.ceil(temp) : Math.floor(temp); //Math.ceil向上取整 Math.floor向下取整 current += temp; element.style[attr] = current + "px";//设置属性 // if (target == current) { // clearInterval(element.timeId);//这里的清理定时器不能放在for in内部了，因为当一个属性完成的时候就会触发他 //而此时其他属性可能还没达到目标值 if (current != target) {//遍历过程中判断每个属性的current与target是否相等，只要存在一个不相等，就flag为false， flag = false; } } //完成遍历之后判断flag if (flag) { clearInterval(element.timeId); } //测试 //console.log("target" + target + " current" + current + " temp" + temp); }, 30); } var btn8 = document.getElementById("btn8"); var dv6 = document.getElementById("dv6"); btn8.onclick = function () { var json = {"width": 200, "height": 300, "top": 80, "left": 40}; attrsChange(dv6, json); }; </script> </body> </html>