1. 原理和實(shí)現(xiàn)
緩動(dòng)動(dòng)畫(huà)的工作原理在于：讓其目標(biāo)值減去開(kāi)始位置的值方援，我們假設(shè)目標(biāo)位置
target=800px幅疼，開(kāi)始位置在begin=0的位置背捌。按照一定比例縮小移動(dòng)距離癌刽，
得出一個(gè)運(yùn)動(dòng)的距離力图。
speed=（target-begin）/20
根據(jù)盒子所在位置的不同步绸，也就得出了移動(dòng)距離的不同。
begin=begin+speed;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* { margin: 0; padding: 0; }
div{ width: 100px; height: 100px; background: red; position: absolute; }
</style>
</head>
<body>
<button id="btn">開(kāi)始動(dòng)畫(huà),改變位置和高度</button>
<button id="btn1">改變高度</button>
<div id="box"></div>
<script>
window.onload = function () {
function $(TagId){return document.getElementById(TagId);}
var box=$("box");
var btn=$("btn");
var btn1=$("btn1");
var target=400;
btn.onclick=function(){
clearInterval(timer);
var timer=setInterval(function () {
var begin = box.offsetLeft;
var begin = box.offsetLeft;
var speed=Math.ceil((target-begin)/10);
begin=begin+speed;
box.style.left=begin+"px";
if(begin==target){
clearInterval(timer);
}
},20)
};
var target1=0;
btn1.onclick=function(){
clearInterval(timer1);
var timer1=setInterval(function () {
var begin1 = box.offsetLeft;
var speed1=(target1-begin1)/10;
speed1=Math.floor(speed1);
begin1=begin1+speed1;
box.style.left=begin1+"px";
if(begin1==target1){
clearInterval(timer1)
}
},20)
}
}
</script>
</body>
</html>
2. 初步封裝
提取出相同部分分代碼吃媒；
function boffer(obj,target){
clearInterval(obj.timer);
obj.timer=setInterval(function () {
var begin = box.offsetLeft;
var speed =(target-begin)/10;
speed = target > begin?Math.ceil(speed):Math.floor(speed);
begin=begin+speed;
box.style.left=begin+"px";
if(begin==target){
clearInterval(obj.timer)
}
},20)
}
如果是向負(fù)方向移動(dòng)需要用一個(gè)判斷語(yǔ)句來(lái)為速度取整
ceil()向大數(shù)值取整
floor（）向小值取整
speed = target > begin?Math.ceil(speed):Math.floor(speed);
3. 封裝進(jìn)一步優(yōu)化
- 提取出屬性值可以更進(jìn)一步對(duì)元素的寬度瓤介、高度吕喘、位置進(jìn)行動(dòng)態(tài)修改。
function boffer(obj,target,attr){
clearInterval(obj.timer);
obj.timer=setInterval(function () {
var begin = parseInt(getCss(obj,attr));
var speed =(target-begin)/10;
speed = target > begin?Math.ceil(speed):Math.floor(speed);
begin=begin+speed;
box.style[attr] =begin+"px";
if(begin==target){
clearInterval(obj.timer)
}
},20)
}
以下是獲取標(biāo)簽屬性
function getCss(obj,attr){
if(obj.currentStyle){
//IE游覽器下獲取屬性
return obj.currentStyle[attr];
}else{
//其他游覽器獲取方式
return window.getComputedStyle(obj,null)[attr];
}
}
