Using JS timer to move elements
|
Use JS timer to make an element to make a method with moving effect. The implementation idea is: first declare a variable to store the distance of the element from the left side, then declare a variable to store the distance the element needs to move each time, and then give this method a completion time. It should be noted that if the obtained value is not numeric data, it needs to be converted, otherwise it cannot be judged. Then determine that after the element moves to a certain position, give it a negative step value and the element will move back. You can also think about how to achieve the turning effect when the element moves to the left or right side.
<!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;
/* Here you can introduce a background image as the target of movement, */
/* background: url(img/paobu_huaban.png) 0 0/100% 100%; */
}
</style>
</head>
<body>
<button type="button" id="Button">Click me to move</button>
<div id="box" style="left: 0px;"></div>
<script type="text/javascript">
var Button = document.getElementById("Button");
var box = document.getElementById("box");
//How many pixels to move each time, step represents the step length var step = 5;
Button.onclick = function(){
var timer = setInterval(function(){
//Get the left value of the box and convert it into an integer. It must be converted into a numerical value before performing calculations.
// parseInt means converting the obtained string into character type var o_left = parseInt(box.style.left);
//If you want the element to move faster, you can increase the distance of each move or reduce the completion time. //But reducing the completion time will have a better effect. var n_left = o_left+step; //Move right 10px each time
box.style.left = n_left+"px";
if ( n_left>500) { //If the moving distance is greater than 400px, run back step = -5;
}else if(n_left==0){
step = 5;
};
},100);
};
</script>
</body>
</html>The results are as follows:
The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. You may also be interested in:
|
<<: Analysis and description of network configuration files under Ubuntu system
>>: Implementation code for operating mysql database in golang
Recommend
A simple example of MySQL joint table query
MySql uses joined table queries, which may be dif...
Zabbix's psk encryption combined with zabbix_get value
Since Zabbix version 3.0, it has supported encryp...
Sample code for using CSS to write a textured gradient background image
The page length in the project is about 2000px or...
A detailed introduction to Linux memory management and addressing
Table of contents 1. Concept Memory management mo...
How to build svn server in linux
1: Install SVN yum install -y subversion 2. Creat...
Hyperlink icon specifications: improve article readability
1. What is the hyperlink icon specification ?<...
HTML table markup tutorial (2): table border attributes BORDER
By default, the border of the table is 0, and we ...
Detailed explanation of the process of querying user permissions using mysql statements
In MySQL, how do you view the permissions a user ...
How to display the border when td is empty
Previously, I summarized how to use CSS to achieve...
The complete usage of setup, ref, and reactive in Vue3 combination API
1. Getting started with setUp Briefly introduce t...
Usage and principles of provide and inject in Vue3
Preface: When passing data between parent and chi...
JS addEventListener() and attachEvent() methods implement registration events
In JavaScript's DOM event model, events are r...
Vue project packaging and optimization implementation steps
Table of contents Packaging, launching and optimi...
The principle and basic use of Vue.use() in Vue
Table of contents Preface 1. Understanding with e...
jQuery implements nested tab function
This article example shares the specific code of ...