本文主要為大家帶來一篇基於勻速運動的實例講解(側邊欄,淡入淡出)。小編覺得蠻不錯的,現在就分享給大家,也給大家做個參考。一起跟著小編過來看看吧,希望能幫助大家。在
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>
相關推薦:
以上是基於js勻速運動的實例解說的詳細內容。更多資訊請關注PHP中文網其他相關文章!