js實現(xiàn)盒子移動動畫效果
更新時間：2020年08月09日 14:08:24 作者：cnkeysky
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)盒子移動動畫效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了js實現(xiàn)盒子移動動畫效果的具體代碼，供大家參考，具體內(nèi)容如下
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box {
width: 200px;
height: 200px;
border: 1px solid red;
position: absolute;
left: 0;
top: 50px;
}
</style>
</head>
<body>
<input type="button" value="前進(jìn)" id="box_start">
<input type="button" value="停止" id="box_stop">
<input type="button" value="回退" id="box_back">
<br><br>
<div id="box" class="box">
</div>
<script>
let boxStart = document.getElementById("box_start");
let boxStop = document.getElementById("box_stop");
let boxBack = document.getElementById("box_back");
let timeId_1;
let timeId_2;
boxStart.onclick = function () {
let box = document.getElementById("box");
clearInterval(timeId_2);
timeId_1 = setInterval(function () {
if (box.offsetLeft >= 600) {
clearInterval(timeId_1);
box.style.left = 600 + 'px';
alert('到達(dá)目的地');
} else {
box.style.left = box.offsetLeft + 10 + 'px';
}
}, 100);
};
boxBack.onclick = function () {
let box = document.getElementById("box");
clearInterval(timeId_1);
timeId_2 = setInterval(function () {
if (box.offsetLeft <= 0) {
clearInterval(timeId_2);
box.style.left = "0";
alert('已在出發(fā)位置');
} else {
box.style.left = box.offsetLeft - 10 + 'px';
}
}, 100);
};
boxStop.onclick = function () {
clearInterval(timeId_1);
clearInterval(timeId_2);
};
</script>
</body>
</html>
效果圖：
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
下面小編就為大家?guī)硪黄獪\談js的url解析函數(shù)封裝。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
本文主要給大家整理了最新的Javascript程序員面試試題以及相關(guān)的解題方法和思路。2017-11-11
JavaScript實現(xiàn)移動端彈窗后禁止?jié)L動
這篇文章主要介紹了JavaScript實現(xiàn)移動端彈窗后禁止?jié)L動,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-05-05
CSS的確是很強(qiáng)大，很奇妙。很多愛好者時常可以用CSS做出一些讓人意想不到的效果，比如用CSS做的燈籠、用CSS畫的房子！然而這些東西酷歸酷，說到底還只是一些不實用的東西。過濾之，過濾之……2008-11-11
javascript日期驗證之輸入日期大于等于當(dāng)前日期
這篇文章主要介紹了javascript日期驗證之輸入日期大于等于當(dāng)前日期，需要的朋友可以參考下2015-12-12
這篇文章主要介紹了javascript中Event 對象中的 on, off 方法，非常的簡單實用，有需要的小伙伴可以參考下2016-08-08
下面小編就為大家?guī)硪黄狫S公共小方法之判斷對象是否為domElement的實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11
javascript 瀏覽器判斷 綁定事件 arguments 轉(zhuǎn)換數(shù)組 數(shù)組遍歷
javascript 瀏覽器 判斷 綁定事件 arguments 轉(zhuǎn)換數(shù)組 數(shù)組遍歷等函數(shù)2009-07-07
這篇文章主要介紹了9102了，你還不會移動端真機(jī)調(diào)試嗎，本文詳細(xì)的介紹了3種移動端真機(jī)調(diào)試方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-03-03
js中對于TextArea的選中區(qū)域后進(jìn)行處理的代碼，需要的朋友可以參考下。2010-12-12