js中的函式封裝，回撥函式實現的簡單動畫效果
阿新 • • 發佈：2019-01-07
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;
</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>