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 相关文章推荐
动感效果的TAB选项卡jquery 插件
Jul 09 Javascript
基于JQuery的Select选择框的华丽变身
Aug 23 Javascript
解决js中window.open弹出的是上次的缓存页面问题
Dec 29 Javascript
使用原生JS实现弹出层特效
Dec 22 Javascript
javascript实现在网页中运行本地程序的方法
Feb 03 Javascript
JavaScript暂停和继续定时器的实现方法
Jul 18 Javascript
微信小程序 商城开发(ecshop )简单实例
Apr 07 Javascript
Vue.Draggable实现拖拽效果
Jul 29 Javascript
Vue2.0基于vue-cli+webpack父子组件通信(实例讲解)
Sep 14 Javascript
小程序多图列表实现性能优化的方法步骤
May 28 Javascript
详解Node.js使用token进行认证的简单示例
May 25 Javascript
js实现盒子滚动动画效果
Aug 09 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读取文件内容的三种可行方法示例介绍
2014/02/08 PHP
微信公众平台天气预报功能开发
2014/07/06 PHP
PHP中大括号'{}'用法实例总结
2017/02/08 PHP
JavaScript实现点击按钮后变灰避免多次重复提交
2013/07/15 Javascript
js获取当前月的第一天和最后一天的小例子
2013/11/18 Javascript
js图片轮播特效代码分享
2015/09/07 Javascript
JS类的定义与使用方法深入探索
2016/11/26 Javascript
原生js编写2048小游戏
2017/03/17 Javascript
小程序实现展开/收起的效果示例
2018/09/22 Javascript
小程序实现搜索界面 小程序实现推荐搜索列表效果
2019/05/18 Javascript
node学习笔记之读写文件与开启第一个web服务器操作示例
2019/05/29 Javascript
微信小程序解析富文本过程详解
2019/07/13 Javascript
简单了解微信小程序 e.target与e.currentTarget的不同
2019/09/27 Javascript
jQuery加PHP实现图片上传并提交的示例代码
2020/07/16 jQuery
VUE 项目在IE11白屏报错 SCRIPT1002: 语法错误的解决
2020/09/27 Javascript
[01:31:03]DOTA2完美盛典全回顾 见证十五项大奖花落谁家
2017/11/28 DOTA
在Python的Flask框架下使用sqlalchemy库的简单教程
2015/04/09 Python
举例讲解Python中的list列表数据结构用法
2016/03/12 Python
在VS Code上搭建Python开发环境的方法
2018/04/06 Python
使用matplotlib画散点图的方法
2018/05/25 Python
Python程序打包工具py2exe和PyInstaller详解
2019/06/28 Python
python简单区块链模拟详解
2019/07/03 Python
解决TensorFlow训练内存不断增长,进程被杀死问题
2020/02/05 Python
python GUI库图形界面开发之PyQt5下拉列表框控件QComboBox详细使用方法与实例
2020/02/27 Python
Python连接Mysql进行增删改查的示例代码
2020/08/03 Python
CSS3中background-clip和background-origin的区别示例介绍
2014/03/10 HTML / CSS
Mytheresa中国官网:德国时尚奢侈品商城
2017/08/04 全球购物
机械专业应届生求职信
2013/09/21 职场文书
门卫人员岗位职责
2013/12/24 职场文书
校本教研工作制度
2014/01/22 职场文书
工程学毕业生自荐信
2014/06/14 职场文书
机械设计制造及其自动化专业求职信
2014/06/17 职场文书
人生哲理妙语30条:淡写流年,笑过人生
2019/09/04 职场文书
Mysql systemctl start mysqld报错的问题解决
2021/06/03 MySQL
Python集合的基础操作
2021/11/01 Python
Pandas实现批量拆分与合并Excel的示例代码
2022/05/30 Python