javascript中，如何让一个元素(比如p)运动起来呢？
设置基本的样式，一定要让p有定位( 当然用margin的变化也可以让元素产生运动效果 );
<style> p { width: 100px; height: 100px; background: red; position: absolute; left: 0px; } </style>
基本的结构:
<input type="button" value="动起来"/> <p id="box"></p>
当我们点击，这个按钮的时候，要让p运动起来，其实就是让p的left值持续变化，那么p就会产生运动效果，我们先让left改变，再让他持续改变
window.onload = function(){ var obtn = document.queryselector( input ), obox = document.queryselector( '#box' ); obtn.onclick = function(){ obox.style.left = obox.offsetleft + 10 + 'px'; } }
那么每当我点击按钮的时候，p的left值就会在原来的基础上加上10px。这里也可以用获取非行间样式的方法获取left的值再加上10px，也可以达到效果
function css(obj, attr) { if (obj.currentstyle) { return obj.currentstyle[attr]; } else { return getcomputedstyle(obj, false)[attr]; } } window.onload = function () { var obtn = document.queryselector(input), obox = document.queryselector('#box'); obtn.onclick = function () { obox.style.left = parseint( css( obox, 'left' ) ) + 10 + 'px'; } }
offsetleft与获取非行间样式left的值 有什么区别呢？
offsetleft没有px单位，而left是有px单位的
obtn.onclick = function () { // alert( css( obox, 'left' ) ); //0px alert( obox.offsetleft ); //0 }
现在p是点击一下动一下，我们让他持续动起来，怎么做？ 加上定时器
obtn.onclick = function () { setinterval( function(){ obox.style.left = obox.offsetleft + 10 + 'px'; }, 1000 / 16 ); }
当我们点击按钮时候，p就会不停的向左运动，怎么让他停下来呢？停下来，肯定是需要条件的，比如，我们让他跑到500px的时候停下来
var timer = null; obtn.onclick = function () { timer = setinterval( function(){ if ( obox.offsetleft == 500 ) { clearinterval( timer ); }else { obox.style.left = obox.offsetleft + 10 + 'px'; } }, 1000 / 16 ); }
这样，我们就可以让p停在500px的位置，这里如果我们把步长10 改成 7或者8，你会发现停不下来了，为什么呢？因为会跳过500px这个判断条件
0, 7, 14, 21 .... 280, 287, 294, 301, ... 490, 497, 504. 从497变成504跳过了500px，所以p停不下来，那怎么办呢？修改下判断条件就可以了.
obtn.onclick = function () { timer = setinterval( function(){ if ( obox.offsetleft >= 500 ) { obox.style.left = 500 + 'px'; clearinterval( timer ); }else { obox.style.left = obox.offsetleft + 7 + 'px'; } }, 1000 / 16 ); }
把条件变成>=500 清除定时器， 同时还要加上这句代码obox.style.left = 500 + 'px'，让他强制被停在500px, 否则p就不会停在500px, 而是504px了，还有一个问题，如果在p运动的过程中，你不停的点击按钮，会发现， p开始加速运动了，而不是每次加10px了，这又是为什么呢？这是因为，每次点击一下按钮，就开了一个定时器，每次点击一个按钮就开了一个定时器，这样就会有多个定时器叠加，那么速度也会产生叠加，所以p开始加速了，那么我们要让他保持10px的速度，意思就是不要让定时器叠加，更通俗点说就是确保一个定时器在开着。应该怎么做呢？
obtn.onclick = function () { clearinterval( timer ); timer = setinterval( function(){ if ( obox.offsetleft >= 500 ) { obox.style.left = 500 + 'px'; clearinterval( timer ); }else { obox.style.left = obox.offsetleft + 7 + 'px'; } }, 1000 / 16 ); }
只需要在每次点击按钮的时候，清除之前的定时器就可以了，这样就能确保始终一个定时器开着，至此，一个最基本的匀速运动结构就完成了，那么我们可以把他封装成函数
function animate(obj, target, speed) { clearinterval(timer); timer = setinterval(function () { if (obj.offsetleft == target) { clearinterval(timer); } else { obj.style.left = obj.offsetleft + speed + 'px'; } }, 30); }
有了这个函数之后，我们来小小的应用一下。
http://www.jiathis.com/getcode
打开这个网站，你注意看他右边有个侧栏式效果（分享到），这种特效在网站上很普遍
<!doctype html> <html> <head lang="en"> <meta charset="utf-8"> <title>侧边栏 - by ghostwu</title> <style> #box { width: 150px; height: 300px; background: red; position: absolute; left: -150px; top: 50px; } #box p { width: 28px; height: 100px; position: absolute; right: -28px; top: 100px; background: green; } </style> <script> window.onload = function () { var timer = null; var obox = document.getelementbyid(box); obox.onmouseover = function () { animate(this, 0, 10); } obox.onmouseout = function () { animate(this, -150, -10); } function animate(obj, target, speed) { clearinterval(timer); timer = setinterval(function () { if (obj.offsetleft == target) { clearinterval(timer); } else { obj.style.left = obj.offsetleft + speed + 'px'; } }, 30); } } </script> </head> <body> <p id="box"> <p>分享到</p> </p> </body> </html>
再来一个淡入淡出的效果:
当鼠标移上去之后，透明度变成1
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>淡入淡出 - by ghostwu</title> <style> img { border: none; opacity: 0.3; filter: alpha(opacity:30); } </style> <script> window.onload = function () { var timer = null; var oimg = document.getelementbyid(img); oimg.onmouseover = function(){ animate( this, 100, 10 ); } oimg.onmouseout = function(){ animate( this, 30, -10 ); } //alpha=30 --> 100 function animate(obj, target, speed) { clearinterval(timer); var cur = 0; timer = setinterval(function () { cur = css( obj, 'opacity') * 100; if( cur == target ){ clearinterval( timer ); }else { cur += speed; obj.style.opacity = cur / 100; obj.style.filter = alpha(opacity: + cur + ); } }, 30); } function css(obj, attr) { if (obj.currentstyle) { return obj.currentstyle[attr]; } else { return getcomputedstyle(obj, false)[attr]; } } } </script> </head> <body> <img src="./img/h4.jpg" alt="" id="img"/> </body> </html>
相关推荐：
如何用html5 canvas实现匀速运动
用js指定步长实现单方向匀速运动
js实现匀速运动的代码实例_javascript技巧
以上就是基于js匀速运动的实例讲解的详细内容。