1、链式运动
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>链式运动</title>
<style>
#div1 {width:100px; height: 100px; background: red; position: absolute; top: 30px; left: 400px;}
</style>
<script>
window.onload = function() {
var oDiv1 = document.getElementById('div1');
oDiv1.onclick = function() {
startMove(this, {
width : 200
}, 10,function(){
startMove(this,{
height:200
},10)
});
}
function startMove(obj, json, iSpeed,fn) {
clearInterval(obj.iTimer);
var iCur = 0;
obj.iTimer = setInterval(function() {
var flag = true;
for ( var attr in json ) {
var iTarget = json[attr];
if (attr == 'opacity') {
iCur = Math.round(css( obj, 'opacity' ) * 100);
} else {
iCur = parseInt(css(obj, attr));
}
if (iCur != iTarget) {
flag = false;
if (attr == 'opacity') {
obj.style.opacity = (iCur + iSpeed) / 100;
obj.style.filter = 'alpha(opacity='+ (iCur + iSpeed) +')';
} else {
obj.style[attr] = iCur + iSpeed + 'px';
}
}
}
if (flag) {
clearInterval(obj.iTimer);
fn && fn.call(obj); //存在回调函数的时候执行回调函数,call()改变this指向
}
}, 30);
}
function css(obj, attr) {
if (obj.currentStyle) {
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj, false)[attr];
}
}
}
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
2、摩擦运动
摩擦 : 在运动过程中,速度越来越慢
缺点:无法准确到达目标点
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1 {width:100px; height: 100px; background: red; position: absolute; left: 0px; top: 30px;}
</style>
<script>
//摩擦,减速 : 在运动过程中,速度越来越慢
window.onload = function() {
var oBtn = document.getElementById('btn');
var oDiv = document.getElementById('div1');
var iTimer = null;
var iSpeed = 50;
oBtn.onclick = function() {
clearInterval(iTimer);
iTimer = setInterval(function() {
iSpeed *= 0.92;
if (oDiv.offsetLeft == 500) {
clearInterval(iTimer);
} else {
oDiv.style.left = oDiv.offsetLeft + iSpeed + 'px';
}
}, 30);
}
}
</script>
</head>
<body>
<input type="button" value="动起来" id="btn" />
<div id="div1"></div>
</body>
</html>
3、缓冲运动
缓冲运动的特点是开始时运动速度很快,随着离目标位置越来越近,速度也越来越小。
缓冲运动速度计算:速度=(目标位置-当前位置)/缩放系数
速度取整:js在解析obj.offsetLeft时,对于小数情况会自动四舍五入计算。因此,当速度在0-0.5之间时,obj.offsetLeft+iSpeed=obj.offsetLeft,obj就无法到达目标点。当速度在0-(-0.5)之间同上述。
解决:
obj向右运动时:速度向上取整,Math.ceil();
obj向左运动时:速度向下取整,Math.floor()
speed=(target-obj.offsetLeft)/8;
speed=speed > 0 ? Math.ceil(speed) : Math.floor(speed);
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div1{
width: 100px;
height: 100px;
background: red;
position: absolute;
top: 50px;
left: 800px;
}
</style>
<script type="text/javascript">
window.onload=function(){
var oBtn=document.getElementById("btn");
var oDiv=document.getElementById("div1");
var iTimer=null;
oBtn.onclick=function(){
clearInterval(iTimer);
var iSpeed=0;
iTimer=setInterval(function(){
iSpeed=(500-oDiv.offsetLeft)/8;
iSpeed=iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
if (oDiv.offsetLeft==500) {
clearInterval(iTimer);
}else{
oDiv.style.left=oDiv.offsetLeft+iSpeed+'px';
}
},30)
}
}
</script>
</head>
<body>
<input id="btn" type="button" value="点击" />
<div id="div1"></div>
</body>
</html>
4、运动框架加入缓冲
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1 {width:100px; height: 100px; background: red; position: absolute; left: 0px; top: 30px; left: 400px;}
</style>
<script>
window.onload = function() {
var oDiv1 = document.getElementById('div1');
oDiv1.onclick = function() {
startMove(this, {
width : 800,
height : 200
});
}
function startMove(obj, json, fn) {
clearInterval(obj.iTimer);
var iCur = 0;
var iSpeed = 0;
obj.iTimer = setInterval(function() {
var iBtn = true;
for ( var attr in json ) {
var iTarget = json[attr];
if (attr == 'opacity') {
iCur = Math.round(css( obj, 'opacity' ) * 100);
} else {
iCur = parseInt(css(obj, attr));
}
iSpeed = ( iTarget - iCur ) / 8;
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
if (iCur != iTarget) {
iBtn = false;
if (attr == 'opacity') {
obj.style.opacity = (iCur + iSpeed) / 100;
obj.style.filter = 'alpha(opacity='+ (iCur + iSpeed) +')';
} else {
obj.style[attr] = iCur + iSpeed + 'px';
}
}
}
if (iBtn) {
clearInterval(obj.iTimer);
fn && fn.call(obj);
}
}, 30);
}
function css(obj, attr) {
if (obj.currentStyle) {
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj, false)[attr];
}
}
}
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>