js中的函数封装，回调函数实现的简单动画效果

最新推荐文章于 2023-07-05 16:59:05 发布

Strive_18

最新推荐文章于 2023-07-05 16:59:05 发布

阅读量1.2k

点赞数

本文链接：https://blog.csdn.net/TC_16_zl/article/details/74098127

版权

js实现的简单动画效果

一、js实现的简单动画

1、此代码中运用了js中的构造函数，函数封装，回调函数，函数内的正负值的判断，以及获取属性、setInterval等知识点实现了简单的动画效果。

2、动画的效果是：点击走的按钮，页面中的div会沿着你设置的位置进行行走，走一圈，最后回到初始位置。

3、代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js实现的动画</title>
<style>
h1{ height:30px; width:300px; border:2px solid pink; box-shadow:5px 5px 5px yellow; font-size:20px; line-height:30px; text-align:center; font-family:"楷体"; margin:40px auto; }

div{ height:100px; width:100px; background:pink; border:2px solid yellow; position:absolute; top:150px; left:30px;}
</style>
<script>
window.onload = function(){
var oBtn1 = document.getElementById('btn1');
var oDiv = document.getElementById('div1');
oBtn1.onclick = function(){
doMove(oDiv,12,'left',500,function(){
doMove(oDiv,20,'top',500,function(){
doMove(oDiv,12,'left',20,function(){
doMove(oDiv,20,'top',160);
});
});
});
}
function doMove(obj,dir,attr,target,endFn){
dir = parseInt(getStyle(obj,attr)) < target ? dir : -dir ;
//通过自身的位置与目标点的位置进行比较，判断dir的正负值
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var speed = parseInt(getStyle(obj,attr)) +dir;
if(speed > target && dir > 0 || speed < target && dir < 0){
speed = target;
}
obj.style[attr] = speed + 'px';
if( speed == target){
clearInterval(obj.timer);
/*
if( endFn ){
endFn();
}*/
endFn && endFn();
}
},20);
}
function getStyle(obj,attr){
return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj) [attr];
}
}
</script>
</head>
<body>
<h1>js实现的简单的动画</h1>
<input type="button" value="走" id="btn1" />
<div id="div1"></div>
</body>
</html>