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 相关文章推荐
[原创]提供复制本站内容时出现,该文章转自脚本之家等字样的js代码
Mar 27 Javascript
javascript 动态table添加colspan\rowspan 参数的方法
Jul 25 Javascript
javascript 二分法(数组array)
Apr 24 Javascript
基于PHP+Jquery制作的可编辑的表格的代码
Apr 10 Javascript
javascript 日期时间 转换的方法
Feb 21 Javascript
浅谈Javascript如何实现匀速运动
Dec 19 Javascript
JS控制表单提交的方法
Jul 09 Javascript
AngularJS自定义插件实现网站用户引导功能示例
Nov 07 Javascript
Javascript之面向对象--封装
Dec 02 Javascript
详解vue数据渲染出现闪烁问题
Jun 29 Javascript
Vue学习之axios的使用方法实例分析
Jan 06 Javascript
JS class语法糖的深入剖析
Jul 07 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
php查看请求头信息获取远程图片大小的方法分享
2013/12/25 PHP
详解PHP中websocket的使用方法
2016/09/15 PHP
laravel框架数据库操作、查询构建器、Eloquent ORM操作实例分析
2019/12/20 PHP
轻松学习jQuery插件EasyUI EasyUI实现树形网络基本操作(2)
2015/11/30 Javascript
js点击按钮实现带遮罩层的弹出视频效果
2015/12/19 Javascript
基于BootStrap Metronic开发框架经验小结【三】下拉列表Select2插件的使用
2016/05/12 Javascript
AngularJS1.X学习笔记2-数据绑定详解
2017/04/01 Javascript
详解VUE 定义全局变量的几种实现方式
2017/06/01 Javascript
Angular 4.0学习教程之架构详解
2017/09/12 Javascript
关于 angularJS的一些用法
2017/11/29 Javascript
基于Vue 2.0的模块化前端 UI 组件库小结
2017/12/21 Javascript
javascript和php使用ajax通信传递JSON的实例
2018/08/21 Javascript
详解react阻止无效重渲染的多种方式
2018/12/11 Javascript
[06:21]2014DOTA2国际邀请赛 庆祝VG首阶段领跑;B叔为挣牛排半夜整理情报
2014/07/13 DOTA
Python3.x和Python2.x的区别介绍
2013/02/12 Python
python使用正则表达式检测密码强度源码分享
2014/06/11 Python
python中os操作文件及文件路径实例汇总
2015/01/15 Python
python实现线程池的方法
2015/06/30 Python
浅谈pyhton学习中出现的各种问题(新手必看)
2017/05/17 Python
python select.select模块通信全过程解析
2017/09/20 Python
python消除序列的重复值并保持顺序不变的实例
2018/11/08 Python
对python中的乘法dot和对应分量相乘multiply详解
2018/11/14 Python
python 使用pygame工具包实现贪吃蛇游戏(多彩版)
2019/10/30 Python
python3获取文件中url内容并下载代码实例
2019/12/27 Python
pytorch ImageFolder的覆写实例
2020/02/20 Python
python爬取代理IP并进行有效的IP测试实现
2020/10/09 Python
Python爬虫之Selenium设置元素等待的方法
2020/12/04 Python
日本酒店、民宿、温泉旅馆、当地旅行团中文预订:e路东瀛
2019/12/09 全球购物
公共事业管理本科生求职信
2013/10/07 职场文书
环保建议书600字
2014/05/14 职场文书
人力资源管理专业毕业生自荐书
2014/05/25 职场文书
党员干部廉洁承诺书
2014/05/28 职场文书
乡镇计划生育工作汇报
2014/10/28 职场文书
会议通知范文
2015/04/15 职场文书
百年校庆感言
2015/08/01 职场文书
自信主题班会
2015/08/14 职场文书