javascript中，如何让一个元素(比如div)运动起来呢？
设置基本的样式，一定要让div有定位( 当然用margin的变化也可以让元素产生运动效果 );
1 <style>2 ???????div {3 ???????????width: 100px;4 ???????????height: 100px;5 ???????????background: red;6 ???????????position: absolute;7 ???????????left: 0px;8 ???????}9 </style>基本的结构:
1 ????<input type="button" value="动起来"/>2 ????<div id="box"></div>
当我们点击，这个按钮的时候，要让div运动起来，其实就是让div的left值持续变化，那么div就会产生运动效果，我们先让left改变，再让他持续改变
1 ????window.onload = function(){2 ????????var oBtn = document.querySelector( "input" ),3 ????????????oBox = document.querySelector( ‘#box‘ );4 ????????oBtn.onclick = function(){5 ????????????oBox.style.left = oBox.offsetLeft + 10 + ‘px‘;6 ????????}7 ????}那么每当我点击按钮的时候，div的left值就会在原来的基础上加上10px。这里也可以用获取非行间样式的方法获取left的值再加上10px，也可以达到效果
1 function css(obj, attr) { 2 ????if (obj.currentStyle) { 3 ????????return obj.currentStyle[attr]; 4 ????} else { 5 ????????return getComputedStyle(obj, false)[attr]; 6 ????} 7 } 8 window.onload = function () { 9 ????var oBtn = document.querySelector("input"),10 ????????oBox = document.querySelector(‘#box‘);11 ????oBtn.onclick = function () {12 ????????oBox.style.left = parseInt( css( oBox, ‘left‘ ) ) + 10 + ‘px‘;13 ????}14 }offsetLeft与获取非行间样式left的值 有什么区别呢？
offsetLeft没有px单位，而left是有px单位的
1 oBtn.onclick = function () {2 ????????// alert( css( oBox, ‘left‘ ) ); //0px3 ????????alert( oBox.offsetLeft ); //04 ????}现在div是点击一下动一下，我们让他持续动起来，怎么做？ 加上定时器
1 ????oBtn.onclick = function () {2 ????????setInterval( function(){3 ????????????oBox.style.left = oBox.offsetLeft + 10 + ‘px‘;4 ????????}, 1000 / 16 );5 ????}当我们点击按钮时候，div就会不停的向左运动，怎么让他停下来呢？停下来，肯定是需要条件的，比如，我们让他跑到500px的时候停下来
1 var timer = null; 2 ????oBtn.onclick = function () { 3 ????????timer = setInterval( function(){ 4 ????????????if ( oBox.offsetLeft == 500 ) { 5 ????????????????clearInterval( timer ); 6 ????????????}else { 7 ????????????????oBox.style.left = oBox.offsetLeft + 10 + ‘px‘; 8 ????????????} 9 ????????}, 1000 / 16 );10 ????}这样，我们就可以让div停在500px的位置，这里如果我们把步长10 改成 7或者8，你会发现停不下来了，为什么呢？因为会跳过500px这个判断条件
0, 7, 14, 21 .... 280, 287, 294, 301, ... 490, 497, 504. 从497变成504跳过了500px，所以div停不下来，那怎么办呢？修改下判断条件就可以了.
1 oBtn.onclick = function () { 2 ????timer = setInterval( function(){ 3 ????????if ( oBox.offsetLeft >= 500 ) { 4 ????????????oBox.style.left = 500 + ‘px‘; 5 ????????????clearInterval( timer ); 6 ????????}else { 7 ????????????oBox.style.left = oBox.offsetLeft + 7 + ‘px‘; 8 ????????} 9 ????}, 1000 / 16 );10 }把条件变成>=500 清除定时器， 同时还要加上这句代码oBox.style.left = 500 + ‘px‘，让他强制被停在500px, 否则div就不会停在500px, 而是504px了，还有一个问题，如果在div运动的过程中，你不停的点击按钮，会发现， div开始加速运动了，而不是每次加10px了，这又是为什么呢？这是因为，每次点击一下按钮，就开了一个定时器，每次点击一个按钮就开了一个定时器，这样就会有多个定时器叠加，那么速度也会产生叠加，所以div开始加速了，那么我们要让他保持10px的速度，意思就是不要让定时器叠加，更通俗点说就是确保一个定时器在开着。应该怎么做呢？
1 oBtn.onclick = function () { 2 ????clearInterval( timer ); 3 ????timer = setInterval( function(){ 4 ????????if ( oBox.offsetLeft >= 500 ) { 5 ????????????oBox.style.left = 500 + ‘px‘; 6 ????????????clearInterval( timer ); 7 ????????}else { 8 ????????????oBox.style.left = oBox.offsetLeft + 7 + ‘px‘; 9 ????????}10 ????}, 1000 / 16 );11 }只需要在每次点击按钮的时候，清除之前的定时器就可以了，这样就能确保始终一个定时器开着，至此，一个最基本的匀速运动结构就完成了，那么我们可以把他封装成函数
1 ????????function animate(obj, target, speed) { 2 ????????????????clearInterval(timer); 3 ????????????????timer = setInterval(function () { 4 ????????????????????if (obj.offsetLeft == target) { 5 ????????????????????????clearInterval(timer); 6 ????????????????????} else { 7 ????????????????????????obj.style.left = obj.offsetLeft + speed + ‘px‘; 8 ????????????????????} 9 ????????????????}, 30);10 ????????????}有了这个函数之后，我们来小小的应用一下。
http://www.jiathis.com/getcode
打开这个网站，你注意看他右边有个侧栏式效果（分享到），这种特效在网站上很普遍
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 ????<meta charset="UTF-8"> 5 ????<title>侧边栏 - by ghostwu</title> 6 ????<style> 7 ????????#box { 8 ????????????width: 150px; 9 ????????????height: 300px;10 ????????????background: red;11 ????????????position: absolute;12 ????????????left: -150px;13 ????????????top: 50px;14 ????????}15 16 ????????#box div {17 ????????????width: 28px;18 ????????????height: 100px;19 ????????????position: absolute;20 ????????????right: -28px;21 ????????????top: 100px;22 ????????????background: green;23 ????????}24 ????</style>25 ????<script>26 ????????window.onload = function () {27 ????????????var timer = null;28 ????????????var oBox = document.getElementById("box");29 ????????????oBox.onmouseover = function () {30 ????????????????animate(this, 0, 10);31 ????????????}32 ????????????oBox.onmouseout = function () {33 ????????????????animate(this, -150, -10);34 ????????????}35 ????????????function animate(obj, target, speed) {36 ????????????????clearInterval(timer);37 ????????????????timer = setInterval(function () {38 ????????????????????if (obj.offsetLeft == target) {39 ????????????????????????clearInterval(timer);40 ????????????????????} else {41 ????????????????????????obj.style.left = obj.offsetLeft + speed + ‘px‘;42 ????????????????????}43 ????????????????}, 30);44 ????????????}45 ????????}46 ????</script>47 </head>48 <body>49 <div id="box">50 ????<div>分享到</div>51 </div>52 </body>53 </html>再来一个淡入淡出的效果:
当鼠标移上去之后，透明度变成1
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 ????<meta charset="UTF-8"> 5 ????<title>淡入淡出 - by ghostwu</title> 6 ????<style> 7 ????????img { 8 ????????????border: none; 9 ????????????opacity: 0.3;10 ????????????filter: alpha(opacity:30);11 ????????}12 ????</style>13 ????<script>14 ????????window.onload = function () {15 ????????????var timer = null;16 ????????????var oImg = document.getElementById("img");17 ????????????oImg.onmouseover = function(){18 ????????????????animate( this, 100, 10 );19 ????????????}20 ????????????oImg.onmouseout = function(){21 ????????????????animate( this, 30, -10 );22 ????????????}23 ????????????//alpha=30 --> 10024 ????????????function animate(obj, target, speed) {25 ????????????????clearInterval(timer);26 ????????????????var cur = 0;27 ????????????????timer = setInterval(function () {28 ????????????????????cur = css( obj, ‘opacity‘) * 100;29 ????????????????????if( cur == target ){30 ???????????????????????clearInterval( timer );31 ????????????????????}else {32 ????????????????????????cur += speed;33 ????????????????????????obj.style.opacity = cur / 100;34 ????????????????????????obj.style.filter = "alpha(opacity:" + cur + ")";35 ????????????????????}36 ????????????????}, 30);37 ????????????}38 39 ????????????function css(obj, attr) {40 ????????????????if (obj.currentStyle) {41 ????????????????????return obj.currentStyle[attr];42 ????????????????} else {43 ????????????????????return getComputedStyle(obj, false)[attr];44 ????????????????}45 ????????????}46 ????????}47 ????</script>48 </head>49 <body>50 <img src="./img/h4.jpg" ?id="img"/>51 </body>52 </html>[js高手之路]匀速运动与实例实战(侧边栏,淡入淡出)
原文地址：http://www.cnblogs.com/ghostwu/p/7667669.html