Implement animation effects with JavaScript

Everyone is using the timeline function in Dreamweaver to create interesting animation effects. Dreamweaver will automatically generate specific program codes for users. Have you ever thought about the implementation principle of animation? In fact, the principle is very simple, mainly using a timer function. Below I will demonstrate a simple animation production process for you. Through the relevant introduction, you can draw inferences and create more dazzling animation effects.

　The effect of this example is that if you click the "Start Moving" button on the web page, the specified layer will move from left to right. During this process, if you click the "Stop Moving" button, it will stop moving.

　

　

　

　startMove()

　{

　 var left = eval(div1.style.left.replace("px", ""));
　 if (left < document.body.scrollWidth - 150)
　 div1.style.left = left + 1;

　else

　div1.style.left = 10;
　movingID = setTimeout("startMove()", 10);
　}

　function stopMove()
　{
　clearTimeout(movingID);
　　}
　

　
　

　
　

　

　

I can moving...

　

　;
　

　　
　, interval) function, the parameter format of this function is:

The first parameter "function" is the function name to be called after timeout, and the second parameter "interval" is the timeout value in microseconds.

　One thing to note is that if you want to stop this timer, you must save the return value after calling the setTimeout() function, and cancel the timer through the clearTimeout(id) function.