JS多物体 任意值 链式 缓冲运动
(编辑：jimmy 日期: 2025/5/14 浏览：3 次 )
复制代码 代码如下:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" charset="utf-8" />
<meta http-equiv="content-type" content="text/html" />
<title>demo</title>
</head>
<style type="text/css">
ul,li,img{margin:0;padding:0;border:0;}
#list{height:250px;list-style-type:none;overflow:hidden;}
</style>
<body>
<div id="odiv" style="position:absolute;width:200px;height:100px;background:red;left:0;border:1px solid #333;"></div>
<script type="text/javascript">
var odiv=document.getElementById('odiv');
odiv.onmouseover=function(){
move(this,'width',500,function(){
move(odiv,'left',300,function(){
move(odiv,'height',500,function(){
move(odiv,'borderWidth',10)
})
})});}
function move(obj,arr,target,fn){
var dt=null,speed=0,ol=0;
clearInterval(dt);
dt=setInterval(function(){
ol=parseInt(obj.style[arr]);
if(ol==target){
clearInterval(dt);
if(fn) fn();
}else{
speed=(target-ol)/8;
speed>0?speed=Math.ceil(speed):speed=Math.floor(speed);
obj.style[arr]=ol+speed+"px";
}
},30);
}
</script>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" charset="utf-8" />
<meta http-equiv="content-type" content="text/html" />
<title>demo</title>
</head>
<style type="text/css">
ul,li,img{margin:0;padding:0;border:0;}
#list{height:250px;list-style-type:none;overflow:hidden;}
</style>
<body>
<div id="odiv" style="position:absolute;width:200px;height:100px;background:red;left:0;border:1px solid #333;"></div>
<script type="text/javascript">
var odiv=document.getElementById('odiv');
odiv.onmouseover=function(){
move(this,'width',500,function(){
move(odiv,'left',300,function(){
move(odiv,'height',500,function(){
move(odiv,'borderWidth',10)
})
})});}
function move(obj,arr,target,fn){
var dt=null,speed=0,ol=0;
clearInterval(dt);
dt=setInterval(function(){
ol=parseInt(obj.style[arr]);
if(ol==target){
clearInterval(dt);
if(fn) fn();
}else{
speed=(target-ol)/8;
speed>0?speed=Math.ceil(speed):speed=Math.floor(speed);
obj.style[arr]=ol+speed+"px";
}
},30);
}
</script>
</body>
</html>
下一篇：JavaScript之引用类型介绍