js实现盒子移动动画效果
更新时间：2020年08月09日 14:08:24 作者：cnkeysky
这篇文章主要为大家详细介绍了js实现盒子移动动画效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了js实现盒子移动动画效果的具体代码，供大家参考，具体内容如下
<!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="前进" 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('到达目的地');
} 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('已在出发位置');
} else {
box.style.left = box.offsetLeft - 10 + 'px';
}
}, 100);
};
boxStop.onclick = function () {
clearInterval(timeId_1);
clearInterval(timeId_2);
};
</script>
</body>
</html>
效果图：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
实现思路为：密码小于六位的时候，密码强度图片都为灰色;密码为七位及以上并且字母、数字、特殊字符三项中有两项，强度等等，感兴趣的朋友可以参考下哈2013-04-04
JavaScript trim 实现去除字符串首尾指定字符的简单方法
下面小编就为大家带来一篇JavaScript trim 实现去除字符串首尾指定字符的简单方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-12-12
ie6下如果用css图片平铺，会出现cpu短暂100%的情况，主要原因在于，ie6会重复下载图片。2010-12-12
在日常的移动端开发时，一般都是试用chrome浏览器的移动端模式进行开发和调试，只有在chrome调试完成，而最近发现了一个新的调试方法，所以这篇文章主要给大家介绍了关于移动端网页开发调试神器Eruda的基本资料，以及其使用的一些技巧，需要的朋友可以参考下。2017-10-10
这篇文章主要给大家介绍了关于JavaScript实现通过键盘弹钢琴效果的相关资料,通过JS代码实现了钢琴键盘的交互效果,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-03-03
大部分小程序都会有这样的需求，页面有长列表，需要下拉到底时请求后台数据，一直渲染数据，当数据列表长时，会发现明显的卡顿，页面白屏闪顿现象，那么如何实现小程序虚拟列表，感兴趣的可以了解一下2021-07-07
这篇文章主要给大家介绍了关于uniapp图片展示自适应等比例缩放方法的相关资料,在uniapp页面展示中会遇到图片展示问题,等比缩放或者自适应view大小,需要的朋友可以参考下2023-10-10
下面小编就为大家分享一篇通过js动态创建标签，并设置属性方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
要捕获JavaScript代码中的异常一般会采用 try catch，不过try catch的使用是否是对代码性能产生影响呢？答案是肯定有的，但是有多少不得而知。下面这篇文章就给大家详细介绍了在JS中用try catch对代码运行的性能影响，有需要的朋友们可以参考借鉴。2016-12-12
JavaScript获取图片像素颜色并转换为box-shadow显示
这篇文章主要介绍了JavaScript获取图片像素颜色并转换为box-shadow显示的方法,用到了HTML5中的FileReader API和getImageData,转换为的CSS3 box-shadow也要注意浏览器的兼容问题,需要的朋友可以参考下2016-03-03
最新评论