1.动画函数封装
1.1动画实现原理
- 核心原理：通过计时器setInterval()不断移动盒子位置
- 实现步骤：（1）.获得盒子当前位置
（2）.让盒子在当前位置加上1个移动距离
（3）.利用定时器不断重复操作
（4）.加一个结束定时器的条件
（5）.注意此元素需要添加定位，才能使用element.style.left
<head>
<style>
div {
position:absolute;
left:0;
width:100px;
height:100px;
background-color:pink;
}
</style>
</head>
<body>
<div></div>
<script>
var div = document.querySelector('div');
var timer = setInterval(function(){
if(div.offsetLeft>=400){
clearInterval(timer);
}
div.style.left = div.offsetLeft+1+'px';
},30);
</script>
</body>
1.2动画函数简单封装
<script>
function animate(obj,target){
var timer = setInterval(function(){
if(obj.offsetLeft >= target){
clearInterval(timer);
}
obj.style.left = obj.offsetLeft+1+'px';
},30);
}
var div = document.querySelector('div');
animate(div,300)
</script>
1.3动画函数给不同元素记录不同定时器
- 如果多个元素都使用这个动画函数，每次都要var声明定时器，我们可以给不同的元素使用不同的定时器
- 核心原理：利用JS是一门动态语言，可以很方便的给当前对象添加属性
利用obj
1125
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
