速度动画--JS实现分享按钮移入移出
2017-08-24 13:47
423 查看
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>速度动画--JS实现分享按钮移入移出</title> <style type="text/css"> *{margin: 0; padding: 0;} #div1{width: 200px; height: 200px; background: #c00; position: relative; left: -200px; top: 0;} #div1 span{width: 20px; height: 50px; background: green; position: absolute; left: 200px; top: 75px;} </style> <script type="text/javascript"> window.onload=function(){ var oDiv=document.getElementById('div1'); oDiv.onmouseover=function(){ startmove(0); } oDiv.onmouseout=function(){ startmove(-200); } } var timer=null; function startmove(target){ window.clearInterval(timer); var oDiv=document.getElementById('div1'); timer=window.setInterval(function(){ if (oDiv.offsetLeft<target) { speed=10; }else if (oDiv.offsetLeft>target) { speed=-10; } if (oDiv.offsetLeft==target) { window.clearInterval(timer); }else{ oDiv.style.left=oDiv.offsetLeft+speed+'px'; } },30); } </script> </head> <body> <div id="div1"><span>分享</span></div> </body> </html>
相关文章推荐
- JS实现鼠标移入移出控制图片的切换效果
- js实现按钮颜色渐变动画效果
- 不使用JS,使用CSS3 target 以及 动画效果实现,点击一下弹出,并且保持弹出状态,然后再点击一下弹回的导航栏(或者可以叫做按钮)
- 前端案例分享(一):CSS+JS实现流星雨动画
- 【简单】H5 jQuery鼠标移入移出改变图片大小动画的实现
- 初学JS值之用JS实现鼠标移入移出事件
- HTML+CSS+JS实现速度动画
- 利用Jquey.hover来实现 鼠标移入出现删除按钮,鼠标移出删除消失
- js实现div拖动动画运行轨迹效果代码分享
- 利用css3和js原生实现鼠标移入移出模块透明度的变化
- (37)JS运动之“分享到”移入移出功能
- JS动画——制作鼠标移入移出的时候控件属性的变化
- js实现鼠标移入移出小特效!
- js实现 导航移入移出效果
- js+css实现文字散开重组动画特效代码分享
- js实现按钮颜色渐变动画效果
- js+css实现文字散开重组动画特效代码分享
- js的面向对象(实现鼠标移入移出右下角出现备注)
- JS实现常用的分享到按钮
- js实现鼠标的移入移出控制图片的明暗显示