Home > Article > Web Front-end > How to use JavaScript to achieve animation effects_javascript skills

How to use JavaScript to achieve animation effects_javascript skills

WBOYOriginal: 2016-05-16 17:28:171110browse

In fact, the principle is very simple. It mainly uses 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 to click the "Start Moving" button on the web page, and the specified layer will move from left to right. During this process, if you click the "Stop Moving" button, it will stop moving.

Copy code The code is as follows:

　
　
　JavaScript Motion Sample
　

"visibility:visible; position:absolute; left:10; top:10; z-index:1;">
　
　
　;/div>
　

　
　
　
　

The main one used here is called setTimeout( function, interval) function, the parameter format of this function is:
The first parameter "function" is the name of the function to be called after timeout, and the second parameter "interval" is the timeout value, in microseconds.
Note 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.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：The solution to the problem that js changes the src attribute of the img tag but does not respond in IE_javascript skillsNext article：The solution to the problem that js changes the src attribute of the img tag but does not respond in IE_javascript skills

See more

How to use JavaScript to achieve animation effects_javascript skills

Related articles