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模拟的QQ面板上的多级可展开的菜单
Oct 10 Javascript
ImageZoom 图片放大镜效果(多功能扩展篇)
Apr 14 Javascript
jquery slibings选取同级其他元素的实现代码
Nov 15 Javascript
jQuery调用WebMethod(PageMethod) NET2.0的方法
Apr 15 Javascript
JS实现的简单图片切换功能示例【测试可用】
Feb 14 Javascript
JS实现的添加弹出层并完成锁屏操作示例
Apr 07 Javascript
JavaScript适配器模式详解
Oct 19 Javascript
angular写一个列表的选择全选交互组件的示例
Jan 22 Javascript
微信小程序如何获取openid及用户信息
Jan 26 Javascript
node+koa2+mysql+bootstrap搭建一个前端论坛
May 06 Javascript
判断“命令按钮”是否被鼠标单击详解
Jul 31 Javascript
VUE UPLOAD 通过ACTION返回上传结果操作
Sep 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 has encountered an Access Violation at 7C94BD02解决方法
2009/08/24 PHP
php的list()的一步操作给一组变量进行赋值的使用
2011/05/18 PHP
PHP CURL模拟登录新浪微博抓取页面内容 基于EaglePHP框架开发
2012/01/16 PHP
一组PHP加密解密函数分享
2014/06/05 PHP
PHP curl实现抓取302跳转后页面的示例
2014/07/04 PHP
PHP使用PHPexcel导入导出数据的方法
2015/11/14 PHP
详解WordPress中给链接添加查询字符串的方法
2015/12/18 PHP
PHP实现的pdo连接数据库并插入数据功能简单示例
2019/03/30 PHP
php反射学习之依赖注入示例
2019/06/14 PHP
Yii 使用intervention/image拓展实现图像处理功能
2019/06/22 PHP
jQuery Validate初步体验(二)
2015/12/12 Javascript
jquery获取input type=text中的值的各种方式(总结)
2016/12/02 Javascript
jquery的父、子、兄弟节点查找,节点的子节点循环方法
2016/12/07 Javascript
React实现点击删除列表中对应项
2017/01/10 Javascript
详解angular 中的自定义指令之详解API
2017/06/20 Javascript
react.js 父子组件数据绑定实时通讯的示例代码
2017/09/25 Javascript
jQuery实现判断上传图片类型和大小的方法示例
2018/04/11 jQuery
浅谈node.js 命令行工具(cli)
2018/05/10 Javascript
extract-text-webpack-plugin用法详解
2019/02/14 Javascript
Vue实现固定定位图标滑动隐藏效果
2019/05/30 Javascript
小程序中this.setData的使用和注意事项
2019/08/28 Javascript
原生JS利用transform实现banner的无限滚动示例代码
2020/06/15 Javascript
浅谈vue中get请求解决传输数据是数组格式的问题
2020/08/03 Javascript
Python基于Floyd算法求解最短路径距离问题实例详解
2018/05/16 Python
django 2.2和mysql使用的常见问题
2019/07/18 Python
Python CSV文件模块的使用案例分析
2019/12/21 Python
python 安装库几种方法之cmd,anaconda,pycharm详解
2020/04/08 Python
Python 3.10 的首个 PEP 诞生,内置类型 zip() 迎来新特性(推荐)
2020/07/03 Python
最新pycharm安装教程
2020/11/18 Python
python 基于selenium实现鼠标拖拽功能
2020/12/24 Python
Nike德国官网:Nike.com (DE)
2018/11/13 全球购物
生物医学工程专业学生求职信范文分享
2013/12/14 职场文书
中学家长会邀请函
2014/02/03 职场文书
Golang标准库syscall详解(什么是系统调用)
2021/05/25 Golang
Java 在线考试云平台的实现
2021/11/23 Java/Android
Nginx禁止ip访问或非法域名访问
2022/04/07 Servers