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
Environment Preparation Docker environment MySQL ...
Background: Some experiments need to be completed...
Table of contents 1. Backup 1.1 Fully prepared 1....
This article example shares the specific code of ...
The definition and inheritance of classes in JS a...
I'll record my first attempt at vue3.0. When ...
Recently, when I was using Linux to log in locall...
Without further ado, let's get straight to th...
Table of contents Container Hierarchy The process...
Through an example, I shared with you the solutio...
This article example shares the specific code of ...
Table of contents Question 1: How are props used ...
Preface When I was browsing Xianyu today, I notic...
This article shares the specific code of JavaScri...
summary In some scenarios, there may be such a re...