首页 > 代码库 > 简易运动框架
简易运动框架
简易的运动框架可以用来控制长宽高、位置、透明度，结合定时器可以实现简单的动画。
其中最主要也是最基础的就是获得元素的属性，我们先来看一下给元素添加样式的三种方法：行内样式、嵌入式样式、外链样式表
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <!-- 外部样式表 --> 7 <link style="stylesheet" href="style.css" type="text/css" /> 8 <!-- 嵌入样式 --> 9 <style> 10 div{ 11 height: 200px; 12 } 13 </style> 14 </head> 15 <body> 16 <!-- 行内样式 --> 17 <div style="width:200px;"></div> 18 </body> 19 </html>
我们要获取元素的样式可以使用 obj.style.xx,但是这个方法只能获取行内样式。
1 <script> 2 var oBox = document.getElementById(‘box‘); 3 console.log(oBox.style.width);//200px 4 5 console.log(oBox.style.height);//‘‘ 6 </script>
所以我们要想获得元素的样式，style是不够的所以引用了currentStyle（IE）方法和getComputedStyle方法
定义一个获取元素样式的通用函数：
1 function getStyle(obj,attr){ 2 return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj)[attr]; 3 };
开始写doMove函数
首先doMove接受的参数
1 doMove(obj,attr,dir,target,endFn)
obj是要进行操作的对象
attr是要操作的属性
dir是要改变元素属性的速度（在一段时间内改变多少）
target属性改变的目标值
endFn是回调函数
首先，我们先要判断dir的正负，如果元素现在的属性值要是小于目标值则attr为正，否则为负数
注意：用getStyle()函数返回的是字符串，所以要用parseInt转换为数字
1 dir = parseInt(getStyle(obj,attr)) < target ? dir : -dir;
然后定义主要的运动函数
1 obj.timer = setInterval(function (){ 2 //下一个位置的变化 3 var speed = parseInt(getStyle(obj,attr)) + dir; 4 //超过目标值时，speed改为目标值 5 if(speed > target && dir > 0 || speed < target && dir < 0){ 6 speed = target; 7 }; 8 obj.style[attr] = speed + ‘px‘; 9 if(speed == target){ 10 clearInterval(obj.timer); 11 endFn && endFn(); 12 }; 13 },20);
speed = 元素属性当前的值 + 要每段时间的变化，判断改变后的值speed是否大于或者小于目标值target，如果大于或者小于目标值，则speed等于目标值，否则继续执行。
如果speed等于目标值则停止对元素属性的更改，清楚定时器，如果有回调函数则执行。
最后定义对透明度改变的函数：
1 function chOpacity(obj,speed,target,endFn){ 2 //取得最初值,要用parseInt不然得到的opacity属性是字符串 3 var oropacity = parseInt(getStyle(obj,‘opacity‘)); 4 5 //定时器 6 obj.chopacity = null; 7 //判断正负 8 speed = oropacity > target ? -speed : speed; 9 10 clearInterval(obj.chopacity); 11 12 obj.chopacity = setInterval(function(){ 13 14 obj.style.opacity = oropacity += speed; 15 16 if(obj.style.opacity < 0){ 17 obj.style.opacity = 0; 18 clearInterval(obj.chopacity); 19 endFn && endFn(); 20 21 } 22 if(obj.style.opacity > 1){ 23 obj.style.opacity = 1; 24 clearInterval(obj.chopacity); 25 endFn && endFn(); 26 } 27 },40); 28 29 }
基本思想和doMove（）函数差不多。这里就不在讲了。
应用：
实现这个动画效果的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://www.mamicode.com/doMove.js"></script>
<style>
#box{
width:800px;
height: 60px;
border: 1px solid black;
position: absolute;
top: 300px;
left: 150px;
opacity: 1;
line-height: 60px;
}
#box2{
width: 800px;
height: 60px;
position: absolute;
background: green;
top: 0px;
left: 0px;
}
span{
display: inline-block;
width: 90px;
position: absolute;
top:10px;
}
</style>
</head>
<body>
<div id="box">
</div>
<script>
window.onload = function(){
var timer = null;
var oSpan = document.getElementsByTagName(‘span‘);
var oBox = document.getElementById(‘box‘);
var oBox2 = document.getElementsByTagName(‘div‘);
var num = 0;
var len = 8;
var str = ‘‘;
for(var i=0;i<len;i++){
str += ‘<span style="width:90px;position:absolute;top:0px;left:‘+i*110+‘px">+1</span>‘;
}
str += ‘<div style="width: 0px;height: 60px;position: absolute;background: rgb(100,100,100);top: 0px;left: 0px; "></div>‘
oBox.innerHTML = str;
oBox.onclick = function(){
clearInterval(timer);
timer = setInterval(function(){
doMove(oSpan[num],‘top‘,2,-150);
doMove(oBox2[1],‘width‘,23,800);
chOpacity(oSpan[num],0.040,0);
num++;
if(num == oSpan.length){
clearInterval(timer);
}
},40);
}
}
</script>
</body>
</html>
doMove函数
1 function doMove(obj,attr,dir,target,endFn){ 2 //判断数值的正负，如果目标值大于当前值则为正 3 dir = parseInt(getStyle(obj,attr)) < target ? dir : -dir; 4 5 clearInterval(obj.timer); 6 7 obj.timer = setInterval(function (){ 8 //下一个位置的变化 9 var speed = parseInt(getStyle(obj,attr)) + dir; 10 //超过目标值时，speed改为目标值 11 if(speed > target && dir > 0 || speed < target && dir < 0){ 12 speed = target; 13 }; 14 obj.style[attr] = speed + ‘px‘; 15 if(speed == target){ 16 clearInterval(obj.timer); 17 endFn && endFn(); 18 }; 19 },20); 20 }; 21 22 function chOpacity(obj,speed,target,endFn){ 23 //取得最初值,要用parseInt不然得到的opacity属性是字符串 24 var oropacity = parseInt(getStyle(obj,‘opacity‘)); 25 26 //定时器 27 obj.chopacity = null; 28 //判断正负 29 speed = oropacity > target ? -speed : speed; 30 31 clearInterval(obj.chopacity); 32 33 obj.chopacity = setInterval(function(){ 34 35 obj.style.opacity = oropacity += speed; 36 37 if(obj.style.opacity < 0){ 38 obj.style.opacity = 0; 39 clearInterval(obj.chopacity); 40 endFn && endFn(); 41 42 } 43 if(obj.style.opacity > 1){ 44 obj.style.opacity = 1; 45 clearInterval(obj.chopacity); 46 endFn && endFn(); 47 } 48 },40); 49 50 } 51 52 function getStyle(obj,attr){ 53 return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj)[attr]; 54 };
简易运动框架
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。