This article example shares the specific code for implementing uniform speed animation in javascript for your reference. The specific content is as follows Implementation ideas: 1. Mainly use the timing function setInterval() to achieve animation effects Tip: The above is just one method. Different animation effects can be adjusted according to the needs. Code example:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Uniform Animation</title> <style> .box { position: relative; width: 1000px; margin-top: 20px; } .xiaohuli { position: absolute; top: 0; left: 0; width: 150px; height: 150px; } .pikaqiu { position: absolute; top: 150px; left: 0; width: 200px; height: 150px; } </style> </head> <body> <button class="btn1">Click to move the little fox</button> <button class="btn2">Click to move Pikachu</button> <div class="box"> <img src="images/little fox.jpg" alt="" class="xiaohuli"> <img src="images/Pikachu.jpg" alt="" class="pikaqiu"> </div> <script> var btn1 = document.querySelector('.btn1'); var btn2 = document.querySelector('.btn2'); var xiaohuli = document.querySelector('.xiaohuli'); var pikaqiu = document.querySelector('.pikaqiu'); btn1.addEventListener('click', function() { animate(xiaohuli, 300); }) btn2.addEventListener('click', function() { animate(pikaqiu, 450); }) // animation function obj animation object, target target left offset, callback callback function function animate(obj, target, callback) { clearInterval(obj.timer); obj.timer = setInterval(function() { obj.style.left = obj.offsetLeft + 5 + 'px'; if (obj.offsetLeft >= target) { // Stop animation clearInterval(obj.timer); // If there is a callback function, execute the callback function if (callback) { callback(); } } }, 30); } </script> </body> </html> Page effect: 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:
|
<<: Use of MySQL DDL statements
>>: Docker data volume container creation and usage analysis
Table of contents 1. Introduction 2. Rendering 3....
In Beginners' Understanding MySQL Deadlock Pr...
The difference between := and = = Only when setti...
Table of contents 1. Introduction 2. The differen...
Table of contents 1. Background 2. Prerequisites ...
Table of contents Immediately execute function fo...
Copy code The code is as follows: <div style=&...
This article uses examples to illustrate the prin...
Article Structure 1. Preparation 2. Install Java ...
Linux version: CentOS 7 [root@azfdbdfsdf230lqdg1b...
<!doctype html> <html xmlns="http:/...
Preface In web applications, in order to save tra...
Introduction to Selenium Grid Although some new f...
Xiaobai records the installation of vmtools: 1. S...
Because I wrote a Python program and intensively ...