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' ) ); //0px
3 alert( oBox.offsetLeft ); //0
4 } 現在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 --> 100
24 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" alt="" id="img"/>
51 </body>
52 </html> 作者:ghostwu, 出處:http://www.cnblogs.com/ghostwu
部落格大多數文章均屬原創，歡迎轉載，且在文章頁面明顯位置給出原文連接配接