原生JS动画 定时器 传参
2016-08-16 17:15
507 查看
上栗子
startMove() 和 startMove1()非常相似,可以使用参数
js代码变成
参数越少越好,速度可以判断
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>鼠标移入移出</title> <style> *{margin: 0;padding: 0;} #div{ position: relative; left: -200px; top: 0; width: 200px; height: 200px; background: orange; } #div span{ position: absolute; left: 200px; top: 30%; height: 40px; width: 20px; background: #eee; cursor: pointer; } </style> </head> <body> <div id="div"><span>分享</span></div> <script> window.onload = function(){ var oDiv = document.getElementById('div'); oDiv.onmouseover = function(){ startMove(); } oDiv.onmouseout = function(){ startMove1(); } var timer; function startMove(){ clearInterval(timer); //清除定时器 timer = setInterval(function(){ if(oDiv.offsetLeft == 0){ clearInterval(timer); }else{ oDiv.style.left = oDiv.offsetLeft+10+'px'; } },30) } function startMove1(){ clearInterval(timer); //清除定时器 timer = setInterval(function(){ if(oDiv.offsetLeft == -200){ clearInterval(timer); }else{ oDiv.style.left = oDiv.offsetLeft-10+'px'; } },30) } } </script> </body> </html>
startMove() 和 startMove1()非常相似,可以使用参数
js代码变成
<script> window.onload = function(){ var oDiv = document.getElementById('div'); oDiv.onmouseover = function(){ startMove(10,0); } oDiv.onmouseout = function(){ startMove(-10,-200); } var timer; function startMove(speed,offLeft){ clearInterval(timer); //清除定时器 timer = setInterval(function(){ if(oDiv.offsetLeft == offLeft){ clearInterval(timer); }else{ oDiv.style.left = oDiv.offsetLeft+speed+'px'; } },30) } } </script>
参数越少越好,速度可以判断
<script> window.onload = function(){ var oDiv = document.getElementById('div'); oDiv.onmouseover = function(){ startMove(0); } oDiv.onmouseout = function(){ startMove(-200); } var timer; function startMove(offLeft){ clearInterval(timer); //清除定时器 timer = setInterval(function(){ var speed; if(oDiv.offsetLeft > offLeft){ speed = -10; }else{ speed = 10; } if(oDiv.offsetLeft == offLeft){ clearInterval(timer); }else{ oDiv.style.left = oDiv.offsetLeft+speed+'px'; } },30) } } </script>
相关文章推荐
- Cocos2d-JS 使用定时器取消往图片、骨骼动画添加的shader
- 原生js判断css3动画过度(transition)结束 transitionend事件 以及关键帧keyframes动画结束(animation)回调函数 animationEnd
- js原生动画效果
- js原生之焦点图转换加定时器实例
- 原生js利用鼠标滚轮实现滚动到当前页面实现动画效果
- js常用定时器 利用包装传参
- 原生js实现打字动画游戏
- 原生js实现jquery函数animate()动画效果的简单实例
- js原生滚动条动画
- 利用tween,使用原生js实现模块回弹动画效果
- 原生js判断css动画结束 css 动画结束的回调函数
- 九种原生js动画效果
- 原生js多动画同时运动框架(style属性多项同时改变)
- 原生JS实战:分享一个首页进度加载动画!
- 原生JS带动画手风琴下拉
- js原生方法传参的细节(面试必问)
- position relative 与 js 原生动画 浏览器兼容问题
- 九种原生js动画效果
- 原生JS实现轮播图1---匀速动画
- JS事件传递参数-Javascript事件动态传参-原生JS事件传递参数-Javascript onclick事件传递参数