利用JS定时器实现元素移动
2021-05-25 04:11
1281 查看
利用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;top: 100px; /* 此处可以引入一个背景图作为移动的目标, */ /* 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值,转成整数,一定要转化为数值行在做运算, // 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就往回跑 step = -5; }else if(n_left==0){ step = 5; }; },100); }; </script> </body> </html>
运行结果如下:
以上就是本文的全部内容,希望对大家的学习有所帮助
您可能感兴趣的文章:相关文章推荐
- JavaScript定时器实现无缝滚动图片
- 浅谈如何循序渐进的学好JS
- JS实现单例模式的6种方案汇总
- 如何用JS有效的压缩图片
- js实现经典扫雷游戏
- JS实现简单图片轮播效果
- JS实现苹果计算器
- JS数组降维的几种方法详解
- js实现一个简易的计算器
- JavaScript自定义插件实现tabs切换功能
- JavaScript实现循环轮播图
- JS实现判断对象是否为空对象的5种方法
- JavaScript实现颜色查看器
- 一个关于JS操作符in问题引发的探究
- 一个关于JS正则匹配的踩坑记录
- JavaScript实现登录滑块验证
- JavaScript异步编程之Promise的初步使用详解
- 如何利用JS检查元素是否在视口内
- 使用Javascript开发sliding-nav带滑动条效果的导航插件
- JavaScript实现简易加法计算器