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
How to automatically start RabbitMq software when centos starts
1. Create a new rabbitmq in the /etc/init.d direc...
Recommend several MySQL related tools
Preface: With the continuous development of Inter...
Pull-down refresh and pull-up loading components based on Vue encapsulation
Based on Vue and native javascript encapsulation,...
The textarea tag cannot be resized and cannot be dragged with the mouse
The textarea tag size is immutable Copy code The c...
Summary of common HTML elements including basic structure, document type, header, body, etc.
1. Basic structure: Copy code The code is as follo...
React method of displaying data in pages
Table of contents Parent component listBox List c...
Diagram of the process of implementing direction proxy through nginx
This article mainly introduces the process of imp...
Tutorial on deploying jdk and tomcat on centos7 without interface
1. Install xshell6 2. Create a server connection ...
How to force vertical screen on mobile pages
I recently wrote a mobile page at work, which was...
Detailed steps for QT to connect to MYSQL database
The first step is to add the corresponding databa...
Gallery function implemented by native Js
Table of contents The first The second Native Js ...
Mysql master/slave database synchronization configuration and common errors
As the number of visits increases, for some time-...
JavaScript to filter arrays
This article example shares the specific code for...
How to allow remote connection in MySql
How to allow remote connection in MySql To achiev...
Css3 realizes seamless scrolling and anti-shake
question The seamless scrolling of pictures and t...