利用JS定时器实现元素移动
网络编程 2021-07-04 14:07www.168986.cn编程入门
这篇文章主要为大家详细介绍了利用JS定时器实现元素移动,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
利用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;: 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>
运行结果如下:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持狼蚁SEO。
上一篇:浅析React中的受控组件和非受控组件
下一篇:最新热门脚本Autojs源码分享
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程