这个JS效果比较单一，就是一个按钮来控制这个图片左右来回运动，这种效果在前端开发里用的可能性不会太多。但能运用到几个常用JS的基础的知识，下面开始详细举例说明：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#tt{
position: absolute;
/*left: 0px;*/
top: 100px;
}
</style>
<script type="text/javascript">
window.onload = function(){
var dd = document.getElementById('dd');
var tt = document.getElementById('tt');
var aa;//先声明一下变量，要不然下面一开始清理定时器，没有这个变量，就会报错了
// (因为定时器,你点多一次就会多执行一次:所以会越来越快)
// 解决定时器叠加的思路:在设置定时器之前,先清理定时器
// 新的加多一个变量,多了这个变量好操作(方便下面的10变灵活)
var yy = 10;
// 给按钮加单击事件
dd.onclick = function(){
// 先清理定时器,把如果有第二次点击的,就会回到函数先清理上一次的定时器,这样减少:点一次减一次
clearInterval(aa);
// 定时器 这里直接aa设成一个局变量，因为 var aa 是局部变量会控制不到下一个点击的定时器执行的变量
aa=setInterval(function(){
// 原来的值
var uu = tt.style.left;
// 新的值
// var kk = parseInt(uu)+10; 原来的
var kk = parseInt(uu)+yy; //现在的
// 赋值回去
tt.style.left = kk+'px';
// 判断边界
// if (kk==800) {
//// 定时器是不会停止的,当运动到800的时候,开始+-10(加负值),减10往回走
// yy = -10;
// }
// else if(kk==0){
//// 当往回走到0时,又变成加10往走
// yy= 10;
// }
// 也可以这样写 正负值区分，负负得正，正负得负。
// if (kk==800) {
//// 本来yy就是等于正10的，乘以负数，等于-10
// yy = yy*-1;
// }
// else if(kk==0){
//// 当往回走到0时,又变成加10往走 ##上面的一步yy变-10了，现在再乘以负1，负负得正##变成正10又往前走了
// yy= yy*-1;
// }
//
// 再精减代码
if (kk==800 || kk==0) {
// 来回反转
yy=yy*-1;
}
},100)
}
}
</script>
</head>
<body>
<input type="button" name="dd" id="dd" value="一点就跑!" />
<br /><br />
<img src="https://www.qiquanji.com/data/img/dmj/201903161552740859142134.gif" alt="" id="tt" style="left: 0px;"/>
</body>
</html>
原文链接：https://www.qiquanji.com/post/7710.html
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
微信扫码关注
更新实时通知