JS实现物体带缓冲的间歇运动效果示例


Posted in Javascript onDecember 22, 2016

本文实例讲述了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>
<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){
  clearInterval(obj.dt);
  obj.dt=setInterval(function(){
  obj.ol=parseInt(obj.style[arr]);
  if(obj.ol==target){
    clearInterval(obj.dt);
    if(fn) fn();
  }else{
  obj.speed=(target-obj.ol)/8;
    obj.speed>0?obj.speed=Math.ceil(obj.speed):obj.speed=Math.floor(obj.speed);
    obj.style[arr]=obj.ol+obj.speed+"px";
  }
  },30);
}
</script>
</body>
</html>

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
用jquery来定位
Feb 20 Javascript
我也种棵OO树JXTree[js+css+xml]
Apr 02 Javascript
一个JS翻页效果
Jul 23 Javascript
解决使用attachEvent函数时,this指向被绑定的元素的问题的方法
Aug 13 Javascript
二级域名或跨域共享Cookies的实现方法
Aug 07 Javascript
基于jQuery的左右滚动实现代码
Dec 03 Javascript
用Jquery重写windows.alert方法实现思路
Apr 03 Javascript
多种方式实现JS调用后台方法进行数据交互
Aug 20 Javascript
js中对象的声明方式以及数组的一些用法示例
Dec 11 Javascript
Bootstrap Metronic完全响应式管理模板之菜单栏学习笔记
Jul 08 Javascript
JavaScript数组复制详解
Feb 02 Javascript
ES6的解构赋值实例详解
May 06 Javascript
Vue.js双向绑定实现原理详解
Dec 22 #Javascript
BootStrap Table对前台页面表格的支持实例讲解
Dec 22 #Javascript
JS实现的简单轮播图运动效果示例
Dec 22 #Javascript
基于BootStrap与jQuery.validate实现表单提交校验功能
Dec 22 #Javascript
详解js的事件代理(委托)
Dec 22 #Javascript
HTML页面定时跳转方法解析(2种任选)
Dec 22 #Javascript
vue双向绑定的简单实现
Dec 22 #Javascript
You might like
先进的自动咖啡技术,真的可以取代咖啡师吗?
2021/03/06 冲泡冲煮
用PHP查询搜索引擎排名位置的代码
2010/01/05 PHP
php define的第二个参数使用方法
2013/11/04 PHP
PHP排序算法之希尔排序(Shell Sort)实例分析
2018/04/20 PHP
Yii2.0 RESTful API 基础配置教程详解
2018/12/26 PHP
跟我学Nodejs(二)--- Node.js事件模块
2014/05/21 NodeJs
jQuery中get和post方法传值测试及注意事项
2014/08/08 Javascript
JS+CSS模拟可以无刷新显示内容的留言板实例
2015/03/03 Javascript
javascript排序函数实现数字排序
2015/06/26 Javascript
Angular.js中ng-if、ng-show和ng-hide的区别介绍
2017/01/20 Javascript
浅谈angular2 组件的生命周期钩子
2017/08/12 Javascript
JS中的回调函数实例浅析
2018/03/21 Javascript
Vue.js 中取得后台原生HTML字符串 原样显示问题的解决方法
2018/06/10 Javascript
vue 导航菜单刷新状态不消失,显示对应的路由界面操作
2020/08/06 Javascript
python中引用与复制用法实例分析
2015/06/04 Python
使用Python的PIL模块来进行图片对比
2016/02/18 Python
Python 描述符(Descriptor)入门
2016/11/20 Python
python解析基于xml格式的日志文件
2017/02/25 Python
python使用super()出现错误解决办法
2017/08/14 Python
python logging日志模块的详解
2017/10/29 Python
python 监测内存和cpu的使用率实例
2019/11/28 Python
pytorch 实现模型不同层设置不同的学习率方式
2020/01/06 Python
python实现单机五子棋
2020/08/28 Python
在网上学习全世界最好的课程:Coursera
2017/11/07 全球购物
澳大利亚制造的羊皮靴:Original UGG Boots
2017/11/13 全球购物
美国机场停车位预订:About Airport Parking
2018/03/26 全球购物
高性能钓鱼服装:Huk Gear
2019/02/20 全球购物
预备党员党校学习自我评价分享
2013/11/12 职场文书
网络技术专业求职信
2014/07/13 职场文书
2014年社区矫正工作总结
2014/11/18 职场文书
财务部岗位职责范本
2015/04/14 职场文书
奇妙的 CSS shapes(CSS图形)
2021/04/05 HTML / CSS
分析JVM源码之Thread.interrupt系统级别线程打断
2021/06/29 Java/Android
面试中老生常谈的MySQL问答集锦夯实基础
2022/03/13 MySQL
MySQL慢查询优化解决问题
2022/03/17 MySQL
Python 一键获取电脑浏览器的账号密码
2022/05/11 Python