Home > Developer > JavaScript
Js achieves seamless image scrolling effects and js seamless scrolling Effects
First, the first focus of seamless rolling is "dynamic. To learn how to make the page element nodes work, you must understand the related knowledge about the timer in JavaScript.
There are two methods to create a timer in JS: setTimeout and setInterval. First, they receive the same parameters: the first parameter is a function for timer execution, and the second parameter is a number, which indicates how many milliseconds later the timer will execute the function. The difference is that setTimeout only executes the aggregate function after the specified time, And setInterval is used to execute the function once at the specified time interval, that is, setInterval is the cyclic version of setTimeout.
There is also a usage of the Timer: to eliminate the timer, there are also two methods: clearTimeout and clearInterval, which correspond to different types of timers respectively. In addition, they all receive only one parameter, which is a value returned by the timer (I found in chrome that this return value is a number), used to specify to eliminate that timer.
After understanding the timer knowledge, we began to analyze how to use the timer to let the elements move. In fact, this is very simple, just like the principle of a movie, so that the elements can be continuously displaced in a short period of time. If we look like this element, we just want to keep moving. You can modify the style of an element by modifying the element style in JS, for example
oUl.style.left = oUl.offsetLeft + speed + 'px';
In the above Code, speed is the displacement generated each time. It is quite interesting to use speed: we can modify the positive and negative values of speed to modify the rolling direction.
In addition, I personally think there are two points to note about the element attribute offsetLeft: the value of offsetLeft is determined by the distance between its own left position and its own set margin sum and offsetLeft, which are similar to its include layer (offsetTop ). Of course, this is all my own understanding, and it is definitely not very accurate. I will solve it next time.
The principle of moving elements is basically like this. The following describes how to implement the seamless scrolling display of images. I have used this example to scroll to the left. The principle is the same as that of the right. The Code mentioned above:
First, assume that there are only four images that need to be rolled cyclically. In order to meet the cycle requirement of image scrolling, You need to perform the following operations on the image (1:
In this way, when the first image 1 scroll out of the border, the image 1 at the end appears behind Image 4, and the effect looks the same as the loop ~
When the image is scrolled to the following:
If you continue to scroll, it will lead to blank spaces behind the image, which is not the effect of circular scrolling. In fact, this is also the key of the program. When the image is rolled to the image (2, the image should be rolled back to the figure (1) and then continued to scroll, thus forming a seamless and circular scrolling effect.
In addition, I expanded the program to write the effect of moving the mouse into the image to stop scrolling, and moving the mouse into the image to continue scrolling. This is achieved by eliminating the timer. The code is very simple and will not be introduced. I also set the image size to 160*120 for better style. You need to prepare the image yourself when running the code.
The Code is as follows:
<Html lang = "en">The above is the detailed code for js to implement seamless rolling effects. I hope it will be helpful for your learning.
Articles you may be interested in:
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
