获取元素计算后的属性元素
function getStyle(element,attr) { //判断浏览器是否支持这个方法 return window.getComputedStyle? window.getComputedStyle(element,null)[attr]:element.currentStyle[attr]; }
增加任一属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> <style> * { margin: 0; padding: 0; } div { margin-top: 20px; width: 200px; height: 100px; background-color: green; position: absolute; left: 0; top: 0; } </style> </head> <body> <input type="button" value="移动到400px" id="btn1"/> <input type="button" value="移动到800px" id="btn2"/> <div id="dv"> <script src="common.js"></script> <script> //点击按钮移动div my$("btn1").onclick = function () { //获取div此时left的当前位置,达到目标400 // animate(my$("dv"),"left",400); //获取div此时的宽度,达到目标200 animate(my$("dv"),"width",400); }; my$("btn2").onclick=function () { animate(my$("dv"),"width",800); } //获取任意的一个属性的当前的属性值: left--->此时的left属性的值,width---当前的元素的宽 function getStyle(element,attr) { //判断浏览器是否支持这个方法 return window.getComputedStyle? window.getComputedStyle(element,null)[attr]:element.currentStyle[attr]; } //匀速动画 //element---元素 //attr---属性名字 //target---目标位置 function animate(element,attr ,target) { //清理定时器 clearInterval(element.timeId); element.timeId = setInterval(function () { //获取元素的当前位置 var current = parseInt(getStyle(element,attr));//数字类型//=============================== //移动的步数 var step = (target-current)/10; step = step>0?Math.ceil(step):Math.floor(step); current += step; element.style[attr] = current + "px";//============================================ if(current==target) { //清理定时器 clearInterval(element.timeId); } //测试代码: console.log("目标位置:"+target+",当前位置:"+current+",每次移动步数:"+step); }, 20); } </script> </div> </body> </html>
增加多个属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>多个属性</title> <style> *{ margin: 0; padding: 0; } div{ margin-top: 30px; width: 200px; height: 100px; background-color: green; position: absolute; left:0; top:0; } </style> </head> <body> <input type="button" value="变多个属性" id="btn1"/> <div id="dv"> </div> <script src="common.js"></script> <script> //点击按钮,改变宽度到达一个目标值,高度到达一个目标值 //获取任意一个元素的任意一个属性的当前的值---当前属性的位置值 function getStyle(element,attr) { return window.getComputedStyle? window.getComputedStyle(element,null)[attr]:element.currentStyle[attr]||0; } function animate(element,json) { clearInterval(element.timeId); element.timeId=setInterval(function () { var flag=true;//默认,假设,全部到达目标 for(var attr in json){ //获取元素这个属性的当前的值 var current=parseInt(getStyle(element,attr)); //当前的属性对应的目标值 var target=json[attr]; //移动的步数 var step=(target-current)/10; step=step>0?Math.ceil(step):Math.floor(step); current+=step;//移动后的值 element.style[attr]=current+"px"; if(current!=target){ flag=false; } } if(flag){ //清理定时器 clearInterval(element.timeId); } //测试代码 console.log("目标:"+target+",当前:"+current+",每次的移动步数:"+step); },20); } my$("btn1").onclick=function () { animate(my$("dv"),{"width":400,"height":500,"left":500,"top":80}); }; </script> </body> </html>
增加多个属性和回调函数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>属性+函数</title> <style> *{ margin: 0; padding: 0; } div{ margin-top: 30px; width: 200px; height: 100px; background-color: green; position: absolute; left:0; top:0; } </style> </head> <body> <input type="button" value="移动到400px" id="btn1"/> <div id="dv"> </div> <script src="common.js"></script> <script> //点击按钮,改变宽度到达一个目标值,高度到达一个目标值 //获取任意一个元素的任意一个属性的当前的值---当前属性的位置值 function getStyle(element,attr) { return window.getComputedStyle? window.getComputedStyle(element,null)[attr]:element.currentStyle[attr]||0; } //element---元素 //json---对象---多个属性及多个目标值 //fn---函数 function animate(element,json,fn) { clearInterval(element.timeId); element.timeId=setInterval(function () { var flag=true;//默认,假设,全部到达目标 for(var attr in json){ //获取元素这个属性的当前的值 var current=parseInt(getStyle(element,attr)); //当前的属性对应的目标值 var target=json[attr]; //移动的步数 var step=(target-current)/10; step=step>0?Math.ceil(step):Math.floor(step); current+=step;//移动后的值 element.style[attr]=current+"px"; if(current!=target){ flag=false; } } if(flag){ //清理定时器 clearInterval(element.timeId); //所有的属性到达目标才能使用这个函数,前提是用户传入了这个函数 if(fn){ fn(); } } //测试代码 console.log("目标:"+target+",当前:"+current+",每次的移动步数:"+step); },20); } my$("btn1").onclick=function () { var json1={"width":400,"height":500,"left":500,"top":80}; animate(my$("dv"),json1,function () { var json2={"width":40,"height":50,"left":50,"top":800}; animate(my$("dv"),json2,function () { var json3={"width":450,"height":550,"left":550,"top":600}; animate(my$("dv"),json3); }); }); }; </script> </body> </html>
增加多个属性，回调函数，层级，透明度
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>属+函+层级+透明度</title> <style> * { margin: 0; padding: 0; } div { width: 200px; height: 100px; background-color: green; position: absolute; left: 0; top: 0; } input { z-index: 10; position: absolute; left: 0; top: 0; } </style> </head> <body> <input type="button" value="移动到400px" id="btn1"/> <div id="dv"> </div> <script src="common.js"></script> <script> //点击按钮,改变宽度到达一个目标值,高度到达一个目标值 //获取任意一个元素的任意一个属性的当前的值---当前属性的位置值 function getStyle(element, attr) { return window.getComputedStyle ? window.getComputedStyle(element, null)[attr] : element.currentStyle[attr] || 0; } function animate(element, json, fn) { clearInterval(element.timeId);//清理定时器 //定时器,返回的是定时器的id element.timeId = setInterval(function () { var flag = true;//默认,假设,全部到达目标 //遍历json对象中的每个属性还有属性对应的目标值 for (var attr in json) { //判断这个属性attr中是不是opacity if (attr == "opacity") { //获取元素的当前的透明度,当前的透明度放大100倍 var current = getStyle(element, attr) * 100; //目标的透明度放大100倍 var target = json[attr] * 100; var step = (target - current) / 10; step = step > 0 ? Math.ceil(step) : Math.floor(step); current += step;//移动后的值 element.style[attr] = current / 100; } else if (attr == "zIndex") { //判断这个属性attr中是不是zIndex //层级改变就是直接改变这个属性的值 element.style[attr] = json[attr]; } else { //普通的属性 //获取元素这个属性的当前的值 var current = parseInt(getStyle(element, attr)); //当前的属性对应的目标值 var target = json[attr]; //移动的步数 var step = (target - current) / 10; step = step > 0 ? Math.ceil(step) : Math.floor(step); current += step;//移动后的值 element.style[attr] = current + "px"; } //是否到达目标 if (current != target) { flag = false; } } if (flag) { //清理定时器 clearInterval(element.timeId); //所有的属性到达目标才能使用这个函数,前提是用户传入了这个函数 if (fn) { fn(); } } //测试代码 console.log("目标:" + target + ",当前:" + current + ",每次的移动步数:" + step); }, 20); } //zIndex:1000 //透明度: 数字类型----小数---放大100倍 my$("btn1").onclick = function () { var json1 = {"width": 400, "height": 500, "left": 500, "top": 80, "opacity": 0.2}; animate(my$("dv"), json1, function () { animate(my$("dv"), {"width": 40, "height": 50, "left": 0, "top": 0, "opacity": 1, "zIndex": 1000}); }); }; </script> </body> </html>
