您的位置：首页 > Web前端 > JavaScript

js动画基本原理和简单封装

2016-11-20 17:41 363 查看

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
}
</style>

</head>
<body>
<script>
//-------------------------动画的基本原理-----------------------

var btn = document.getElementsByTagName("button")[0];
var div = document.getElementsByTagName("div")[0];

//闪动
//    btn.onclick = function () {
//        div.style.left = "500px";
//    }

//匀速运动
btn.onclick = function () {
//定时器，每隔一定的时间向右走一些
setInterval(function () {
console.log(parseInt(div.style.left));
//            div.style.left = parseInt(div.style.left)+10+"px";  //NaN不能用
//动画原理： 盒子未来的位置 = 盒子现在的位置 + 步长；
//style.left赋值，用offsetLeft获取值。
//style.left获取值不方便，获取行内式，如果没有事“”；容易出现NaN；
//offsetLeft获取值特别方便，而且是现成number方便计算。因为他是只读的不能赋值。
div.style.left = div.offsetLeft + 10 + "px";
},300);
}

//------------------------------动画的最终封装------------------
function animate(ele,target){
//要用定时器，先清除定时器
//一个盒子只能有一个定时器，这样儿的话，不会和其他盒子出现定时器冲突
//而定时器本身讲成为盒子的一个属性
clearInterval(ele.timer);
//我们要求盒子既能向前又能向后，那么我们的步长就得有正有负
//目标值如果大于当前值取正，目标值如果小于当前值取负
var speed = target>ele.offsetLeft?10:-10;
ele.timer = setInterval(function () {
//在执行之前就获取当前值和目标值之差
var val = target - ele.offsetLeft;
ele.style.left = ele.offsetLeft + speed + "px";
//目标值和当前值只差如果小于步长，那么就不能在前进了
//因为步长有正有负，所有转换成绝对值来比较
if(Math.abs(val)<Math.abs(speed)){
ele.style.left = target + "px";
clearInterval(ele.timer);
}
},30)
}
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航