Home > Developer > JavaScript
Typical Summary of various javascript problems about motion, and typical Summary of javascript
This example summarizes various javascript problems about motion. Share it with you for your reference. The details are as follows:
I. JS movement problems
Question 1:
Error code:
function startMove(){ var timer=null; var div1=document.getElementById("div1"); if (div1.offsetLeft==300){ clearInterval(timer); }else{ timer=setInterval(function(){ div1.style.left=div1.offsetLeft+10+"px"; },30) } }
Desired features:
Turn on the timer, let div1 move to 300px, and then let div1 stop to turn off the timer.
Error:
If the statement is incorrect, the code first sets a null timer. if the left margin of div1 is 300px, the timer is disabled. Otherwise, exercise continuously. However, if statements are not cyclic and will not be executed once. So the timer will never be disabled.
Correct code:
var timer=null; function startMove(){ var div1=document.getElementById("div1"); timer=setInterval(function(){ if (div1.offsetLeft==300){ clearInterval(timer); } div1.style.left=div1.offsetLeft+10+"px"; },30) }
Question 2:
Error code:
function startMove(){ var speed=1; var timer=null; var oDiv1=document.getElementById("div1"); clearInterval(timer); timer=setInterval(function(){ if (oDiv1.offsetLeft>=300){ clearInterval(timer); }else{ oDiv1.style.left=oDiv1.offsetLeft+speed+"px"; } },30) }
Desired features:
Clicking the start button in a row will accelerate div1. This is because every time you click the button, a timer will be enabled and the timer will be accelerated as it accumulates, therefore, you must first disable the timer, whether or not it is enabled. However, after the clearInterval Method for disabling the timer is added, it will still accelerate.
Error:
The timer variable is placed in the startMove method, which is equivalent to executing the startMove method every time you click the button. A closure is generated, so a partial timer is created, timer in each closure is not shared, so it is equivalent to the closure timer that generates the number of clicks.
Correct code:
var timer=null; function startMove(){ var speed=1; var oDiv1=document.getElementById("div1"); clearInterval(timer); timer=setInterval(function(){ if (oDiv1.offsetLeft>=300){ clearInterval(timer); }else{ oDiv1.style.left=oDiv1.offsetLeft+speed+"px"; } },30) }
The share bar entry and exit function is implemented:
Code:
<! DOCTYPE html>Enable the image fade-in and fade-out function:
Code:<!DOCTYPE html>Note:
1. In terms of transparency, JavaScript does not have attributes such as the left margin (offsetLeft. So replace it with an alpha variable.
2. For cross-line transparency settings in JavaScript code, browser compatibility needs to be considered. For ie, the method is oDiv1.style. filter = "aplha (opacity:" + aplha + ")";
Chrome and Firefox are oDiv1.style. opacity = alpha/100.
Implement scroll bar events:
Code:<!DOCTYPE html>Ii. JS multi-object Motion Problems
Question 1:
Expected function: Free parallel scaling of the three parallel Divs.
Code:<!DOCTYPE html>Note:
If only one timer (Global timer) is set for multi-object motion, the three divs share one global timer, when a div does not complete the zoom-out operation, the timer of the other div is enabled to execute the stretch action. Because the timer is global, the timer of the previous div will be overwritten and then canceled, therefore, the previous timer cannot zoom in completely last night. The solution is to set an attribute timer for each div.
Question 2:
Desired function: fade in and out of multiple images.
Code:<!DOCTYPE html>Expected features: multi-object scaling in different directions.
Code:
<!DOCTYPE html>Note:
1. offsetwidth is not only the pure width of the object, but also the variation width and margin of the object. In obj. style. width = obj. offsetwidth-1 + "px"; in this sentence, the intention is to reduce the image at a speed of 1 px, but if the Border width is set to 1px rather than 0px, the offsetwidth value is actually the width of obj (Note: it is not a style. width is not the width of the line) + 2, the above sentence becomes obj. style. width = obj width + 2-1 + "px"; the image increases. The solution is to use the width of obj instead of offsetwidth. Width is obtained through the getStyle method.
2. The getStyle method returns a string. You must use parseint to forcibly convert data to the numeric type.Complete motion frame:
<!DOCTYPE html>I hope this article will help you design javascript programs.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
