js实现同一页面多个运动效果的方法


Posted in Javascript onApril 10, 2015

本文实例讲述了js实现同一页面多个运动效果的方法。分享给大家供大家参考。具体分析如下:

实现原理,就是在调用的时候,给这五个元素,循环加上事件。需要注意的是,每个元素的定时器需要分开。

要点一:

var speed = (target - obj.offsetWidth)/8;

缓冲运动效果,一开始速度很快,然后越来越慢,直到停止

speed = speed>0?Math.ceil(speed):Math.floor(speed);

如果速度大于0,则向上取整,如果速度小于0,则向下取整。

要点二:

if(obj.offsetWidth == target){
clearInterval(obj.timer);
}else{
obj.style.width = obj.offsetWidth+speed+"px";
}

元素宽度和目标值比较,如果相等,关闭定时器,否则,宽度继续增加。

要点三:

for(i=0; i<runs_li.length; i++){
runs_li[i].timer = null;
runs_li[i].onmouseover = function(){
startrun(this,300);
}
runs_li[i].onmouseout = function(){
startrun(this,80);
}
}

给每个元素加上各自的定时器属性,各自的鼠标事件,在鼠标事件中调用运动函数。

最后,上代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
body,ul,li{margin:0; padding:0;}
#runs li{width:80px; height:80px; background:#06c; list-style:none;
position:absolute; left:0;}
</style>
<script>
window.onload = function(){
 var runs = document.getElementById("runs");
 var runs_li = runs.getElementsByTagName("li");
 var i=0;
 for(i=0; i<runs_li.length; i++){
 runs_li[i].timer = null;
 runs_li[i].onmouseover = function(){
  startrun(this,300);
 }
 runs_li[i].onmouseout = function(){
  startrun(this,80);
 }
 }
}
function startrun(obj,target){
 clearInterval(obj.timer);
 obj.timer = setInterval(function(){
 var speed = (target - obj.offsetWidth)/8;
 speed = speed>0?Math.ceil(speed):Math.floor(speed);
 
 if(obj.offsetWidth == target){
  clearInterval(obj.timer);
 }else{
  obj.style.width = obj.offsetWidth+speed+"px";
 }
 document.title = obj.offsetWidth + ',' + target;
 },30);
}
</script>
</head>
<body>
<ul id="runs">
 <li style="top:0">1</li>
 <li style="top:90px;">2</li>
 <li style="top:180px;">3</li>
 <li style="top:270px;">4</li>
 <li style="top:360px;">5</li>
</ul>
</body>
</html>

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

Javascript 相关文章推荐
不安全的常用的js写法
Sep 15 Javascript
javascript中检测变量的类型的代码
Dec 28 Javascript
Egret引擎开发指南之运行项目
Sep 03 Javascript
基于jQuery实现点击列表加载更多效果
May 31 Javascript
jQuery事件委托之Safari
Jul 05 Javascript
5分钟学会Vue动画效果(小结)
Jul 21 Javascript
深入解读Node.js中的koa源码
Jun 17 Javascript
如何提升vue.js中大型数据的性能
Jun 21 Javascript
原生javascript运动函数的封装示例【匀速、抛物线、多属性的运动等】
Feb 23 Javascript
jQuery 动态粒子效果示例代码
Jul 07 jQuery
JavaScript封装单向链表的示例代码
Sep 17 Javascript
vue-cli —— 如何局部修改Element样式
Oct 22 Javascript
js实现同一个页面多个渐变效果的方法
Apr 10 #Javascript
js实现缓冲运动效果的方法
Apr 10 #Javascript
js实现分享到随页面滚动而滑动效果的方法
Apr 10 #Javascript
js实现同一页面多个不同运动效果的方法
Apr 10 #Javascript
js实现类似jquery里animate动画效果的方法
Apr 10 #Javascript
js实现类似新浪微博首页内容渐显效果的方法
Apr 10 #Javascript
javascript中关于&amp;&amp; 和 || 表达式的小技巧分享
Apr 10 #Javascript
You might like
php str_pad 函数用法简介
2009/07/11 PHP
thinkphp框架下404页面设置 仅三步
2016/05/14 PHP
javascript第一课
2007/02/27 Javascript
js给dropdownlist添加选项的小例子
2013/03/04 Javascript
jquery改变tr背景色的示例代码
2013/12/28 Javascript
NodeJS中利用Promise来封装异步函数
2015/02/25 NodeJs
使用JavaScript实现连续滚动字幕效果的方法
2015/07/07 Javascript
分享15个大家都熟知的jquery小技巧
2015/12/02 Javascript
JS三级可折叠菜单实现方法
2016/02/29 Javascript
基于JS实现textarea中获取动态剩余字数的方法
2016/05/25 Javascript
利用JS实现数字增长
2016/07/28 Javascript
jQuery简单实现title提示效果示例
2016/08/01 Javascript
jQuery使用Layer弹出层插件闪退问题
2016/12/22 Javascript
JavaScript使用readAsDataUrl方法预览图片
2017/05/10 Javascript
React-Native中props具体使用详解
2017/09/04 Javascript
微信小程序实现蒙版弹窗效果
2018/11/01 Javascript
浅谈目前可以使用ES10的5个新特性
2019/06/25 Javascript
从零搭一个自用的前端脚手架的方法步骤
2019/09/23 Javascript
JavaScript缺少insertAfter解决方案
2020/07/03 Javascript
基于 Vue 的 Electron 项目搭建过程图文详解
2020/07/22 Javascript
微信小程序实现购物车小功能
2020/12/30 Javascript
Python多线程编程(六):可重入锁RLock
2015/04/05 Python
Python中运算符&quot;==&quot;和&quot;is&quot;的详解
2016/10/08 Python
一文总结学习Python的14张思维导图
2017/10/17 Python
Python 动态变量名定义与调用方法
2020/02/09 Python
Python制作简易版小工具之计算天数的实现思路
2020/02/13 Python
python GUI库图形界面开发之PyQt5访问系统剪切板QClipboard类详细使用方法与实例
2020/02/27 Python
基于Python的OCR实现示例
2020/04/03 Python
CSS3线性渐变简单实现以及该属性在浏览器中的不同
2012/12/12 HTML / CSS
HTML5 Canvas中绘制矩形实例
2015/01/01 HTML / CSS
俄罗斯和世界各地的酒店预订:Hotels.com俄罗斯
2016/08/19 全球购物
如何写你的创业计划书
2014/01/07 职场文书
《登鹳雀楼》教学反思
2014/04/09 职场文书
初中生考试作弊检讨书
2014/12/14 职场文书
勤俭节约倡议书范文
2015/04/29 职场文书
有关保护环境的宣传标语100条
2019/08/07 职场文书