利用JS定時器實現元素移動
阿新 • • 發佈：2021-05-20
利用js定時器做一個元素做一個有移動效果的方法，實現思路：首先宣告一個變數存放元素距離左側的邊距，然後我們在宣告一個變數存放每次元素需要移動的距離，然後再給這個方法一個完成時間就可以了。需要注意的是獲取到的值如果不是數值型的資料需要裝換，否則不能進行判斷。再判斷一下該元素移動到某個位置之後，步長給它一個負值，該元素就會往回跑了。
大家還可以想一想元素移動到左右側的時候如何實現轉身效果。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>程式設計客棧;</title> <style type="text/css"> *{margin: 0;padding: 0;} body{position: relative;} #box{ width: 120px;height: 120px;background: green; position: absolute;thttp://www.cppcns.comop: 100px; /* 此處可以引入一個背景圖作為移動的目標,*/ /* background: url(img/paobu_huaban.png) 0 0/100% 100%; */ } </style> </head> <body> <button type="button" id="Button"&程式設計客棧gt;點我移動<http://www.cppcns.com/button> <div id="box" style="left: 0px;"></div> <script type="text/javascript"> var Button = document.getElementById("Button"); var box = document.getElementById("box"); // 每次移動多少畫素，step表示步長 var step = 5; Button.onclick = function(){ var timer = setInterval(function(){ //獲取box的left值,轉成整數，一定要轉化為數值行在做運算， // parseInt表示將獲取到的字串轉化為字元型 var o_left = parseInt(box.style.left); //想要元素走的更快可以改變加大每次移動的距離或者是減少完成時間也可以 //但是減少完成時間這樣的效果要好一點 var n_left = o_left+step; //每次向右移動10px box.style.left = n_left+"px"; if ( n_left>500) { //如果移動的距離大於400px就往回跑 amiFjrvEsstep = -5; }else if(n_left==0){ step = 5; }; },100); }; </script> </body> </html>
執行結果如下：
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。