利用JS定時器實現(xiàn)元素移動
更新時間：2021年05月18日 10:50:12 作者：客官不愛喝酒
這篇文章主要為大家詳細(xì)介紹了利用JS定時器實現(xiàn)元素移動，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
利用JS定時器做一個元素做一個有移動效果的方法，實現(xiàn)思路：首先聲明一個變量存放元素距離左側(cè)的邊距，然后我們在聲明一個變量存放每次元素需要移動的距離，然后再給這個方法一個完成時間就可以了。需要注意的是獲取到的值如果不是數(shù)值型的數(shù)據(jù)需要裝換，否則不能進(jìn)行判斷。再判斷一下該元素移動到某個位置之后，步長給它一個負(fù)值，該元素就會往回跑了。
大家還可以想一想元素移動到左右側(cè)的時候如何實現(xiàn)轉(zhuǎn)身效果。
<!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;top: 100px;
/* 此處可以引入一個背景圖作為移動的目標(biāo), */
/* background: url(img/paobu_huaban.png) 0 0/100% 100%; */
}
</style>
</head>
<body>
<button type="button" id="Button">點我移動</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值,轉(zhuǎn)成整數(shù)，一定要轉(zhuǎn)化為數(shù)值行在做運算，
// parseInt表示將獲取到的字符串轉(zhuǎn)化為字符型
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就往回跑
step = -5;
}else if(n_left==0){
step = 5;
};
},100);
};
</script>
</body>
</html>
運行結(jié)果如下：
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于uniapp上傳圖片和上傳視頻的實現(xiàn)方法,文中還介紹了上傳文件的方法,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-01-01
用js取得鼠標(biāo)所在位置的對象...2007-01-01
在現(xiàn)代前端開發(fā)中,Webpack 是一個強(qiáng)大的模塊打包工具,廣泛應(yīng)用于各種項目中,為了簡化模塊導(dǎo)入路徑,開發(fā)者常常會在Webpack中配置別名路徑（alias）,然而,在實際使用過程中,配置別名路徑可能會遇到“無法解析別名路徑”的問題,所以本文給大家介紹了詳細(xì)的解決方案2025-02-02
這篇文章主要介紹了js window對象屬性和方法相關(guān)資料整理,需要的朋友可以參考下2015-11-11
JavaScript循環(huán)鏈表實現(xiàn)方法
這篇文章主要給大家介紹了關(guān)于JavaScript循環(huán)鏈表實現(xiàn)的相關(guān)資料,循環(huán)鏈表和單向鏈表很相似,唯一的區(qū)別是循環(huán)鏈表的尾節(jié)點是指向頭節(jié)點的,需要的朋友可以參考下2023-07-07
Bootstrap學(xué)習(xí)系列之使用 Bootstrap Typeahead 組件實現(xiàn)百度下拉效果
這篇文章主要介紹了Bootstrap學(xué)習(xí)系列之使用 Bootstrap Typeahead 組件實現(xiàn)百度下拉效果的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-07-07
這篇文章主要為大家詳細(xì)介紹了基于javascript實現(xiàn)移動端輪播圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12
通過 window.opener 實現(xiàn)。關(guān)于這個對象的用法請查閱相關(guān)資料。2008-11-11
javascript 使td內(nèi)容不換行不撐開如何實現(xiàn)，本文將詳細(xì)介紹，需要了解的朋友可以參考下2012-11-11
在前端開發(fā)中，當(dāng)遇到圖片或頭像上傳等功能時，有尺寸分辨率限制的話，就需要用到圖片的裁剪功能。本文為大家介紹了JavaScript實現(xiàn)圖片裁剪功能的示例代碼，希望對大家有所幫助2023-02-02