JS多物体 任意值 链式 缓冲运动
更新时间：2012年08月10日 17:09:57 作者：
JS多物体 任意值 链式 缓冲运动,需要的朋友可以参考下
复制代码 代码如下:
<!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>
相关文章
关于js复制内容到浏览器剪贴板报错：Cannot read properties of&n
这篇文章主要给大家介绍了关于js复制内容到浏览器剪贴板报错：Cannot read properties of undefined (reading ‘writeText‘)的解决方案,文中给出了详细的原因分析和解决方案,需要的朋友可以参考下2024-01-01
这篇文章主要介绍了ES6扩展运算符用法,结合实例形式分析了ES6扩展运算符的功能、使用方法与相关注意事项,需要的朋友可以参考下2017-10-10
本文主要介绍了在CEF中实现JavaScript和C++的双向交互,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2025-02-02
JavaScript中报错Cannot set properties of undefined (settin
这篇文章主要介绍了JavaScript中报错Cannot set properties of undefined (setting '1')的解决方案,文中通过代码介绍的非常详细,对大家学习或使用js具有一定的参考借鉴价值,需要的朋友可以参考下2025-03-03
这篇文章主要介绍了JavaScript的流程控制语句，感兴趣的小伙伴们可以参考一下2015-11-11
本文主要介绍了JavaScript提取元素中第一个子元素的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-06-06
一直以为 && 和 || 这两个伟大的运算法只能在判断表达式使用，也就是常在if语句使用，原来错了，它还可以运用在简化选择性执行语句的操作，有点拗口，简单点也就是：操作执行某条语句，不执行某条语句。2009-11-11
我们在项目中往往都能遇到实现左右滑动跟上下滑动的需求,下面这篇文章主要给大家介绍了关于uniapp中scroll-view基础用法的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-11-11
记录微信小程序 height: calc(xx - xx)；无效问题
这篇文章主要介绍了微信小程序 - height: calc(xx - xx)；无效 问题，文中给大家扩展介绍下jquery点击添加样式，再次点击移除样式的实例代码,需要的朋友可以参考下2019-12-12
检查输入的是否是数字使用keyCode配合onkeypress事件
检查输入的是否是数字在本文使用keyCode配合onkeypress事件来实现，具体示例如下2014-01-01
最新评论