JS多物体 任意值 链式 缓冲运动


Posted in Javascript onAugust 10, 2012
<!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 相关文章推荐
Js基础学习资料
Nov 23 Javascript
js中判断Object、Array、Function等引用类型对象是否相等
Aug 29 Javascript
关于img的href和src取变量及赋值的方法
Apr 28 Javascript
jquery使用remove()方法删除指定class子元素
Mar 26 Javascript
JavaScript中setUTCFullYear()方法的使用简介
Jun 12 Javascript
jQuery焦点图插件SaySlide
Dec 21 Javascript
AngularJS中的API(接口)简单实现
Jul 28 Javascript
BootStrap fileinput.js文件上传组件实例代码
Feb 20 Javascript
基于EasyUI的基础之上实现树形功能菜单
Jun 28 Javascript
vue-cli中的webpack配置详解
Sep 25 Javascript
图片懒加载imgLazyLoading.js使用详解
Sep 15 Javascript
详解JS数值Number类型
Feb 07 Javascript
JavaScript之引用类型介绍
Aug 10 #Javascript
jquery下checked取值问题的解决方法
Aug 09 #Javascript
js分解url参数(面向对象-极简主义法应用)
Aug 09 #Javascript
深入理解javascript学习笔记(一) 编写高质量代码
Aug 09 #Javascript
JS数学函数Exp使用说明
Aug 09 #Javascript
基于jQuery实现左右div自适应高度完全相同的代码
Aug 09 #Javascript
分享精心挑选的12款优秀jQuery Ajax分页插件和教程
Aug 09 #Javascript
You might like
PHP 编程的 5个良好习惯
2009/02/20 PHP
解析php session_set_save_handler 函数的用法(mysql)
2013/06/29 PHP
php获取从百度、谷歌等搜索引擎进入网站关键词的方法
2015/07/08 PHP
FastCGI 进程意外退出造成500错误
2015/07/26 PHP
PHP使用自定义方法实现数组合并示例
2016/07/07 PHP
PHP实现可精确验证身份证号码的工具类示例
2018/05/31 PHP
JQuery Easyui Tree的oncheck事件实现代码
2010/05/28 Javascript
基于jquery的表头固定的若干方法
2011/01/27 Javascript
jquery复选框全选/取消示例
2013/12/30 Javascript
js调用iframe实现打印页面内容的方法
2014/03/04 Javascript
IE浏览器中图片onload事件无效的解决方法
2014/04/29 Javascript
javascript实现炫酷的拖动分页
2015/05/11 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记6)
2015/12/20 Javascript
JavaScript知识点总结之如何提高性能
2016/01/15 Javascript
javascript url几种编码方式详解
2016/06/06 Javascript
详解angularjs获取元素以及angular.element()用法
2017/07/25 Javascript
原生js获取left值和top值的三种方法
2017/08/02 Javascript
vue组件间通信子与父详解(二)
2017/11/07 Javascript
JavaScript实现短暂提示框功能
2018/04/04 Javascript
Vue仿支付宝支付功能
2018/05/25 Javascript
vant(ZanUi)结合async-validator实现表单验证的方法
2018/12/06 Javascript
js 实现碰撞检测的示例
2020/10/28 Javascript
[02:03]DOTA2亚洲邀请赛 HGT战队出场宣传片
2015/02/07 DOTA
Python中多线程及程序锁浅析
2015/01/21 Python
Python实现的批量下载RFC文档
2015/03/10 Python
使用python serial 获取所有的串口名称的实例
2019/07/02 Python
世界上最大的罕见唱片、CD和音乐纪念品网上商店:991.com
2018/05/03 全球购物
草莓网官网:StrawberryNET
2019/08/21 全球购物
大学生新闻专业个人自我评价
2013/11/12 职场文书
教师自荐信
2013/12/10 职场文书
学校感恩教育活动总结
2014/07/07 职场文书
师范生见习报告
2014/10/31 职场文书
质量保证书格式模板
2015/02/27 职场文书
法学专业求职信范文
2015/03/19 职场文书
超级礼物观后感
2015/06/15 职场文书
MySQL性能压力基准测试工具sysbench的使用简介
2021/04/21 MySQL