手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >JS多物体 任意值 链式 缓冲运动
JS多物体 任意值 链式 缓冲运动
摘要:复制代码代码如下:demoul,li,img{margin:0;padding:0;border:0;}#list{height:250px...

复制代码 代码如下:

<!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"></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>

【JS多物体 任意值 链式 缓冲运动】相关文章:

js+html5实现canvas绘制简单矩形的方法

详解 JavaScript 闭包的小知识

JS代码的格式化和压缩

js中跨域方法原理详解

JavaScript 正则表达式中global模式的特性

简介JavaScript中charAt()方法的使用

JQuery中DOM加载与事件执行实例分析

JavaScript数据结构与算法之栈与队列

表单提交验证类

JavaScript中valueOf()方法的使用介绍

精品推荐
分类导航