Home > Developer > JavaScript
Call method:
First, you must link the script to your page, or directly call the following link. Of course, you 'd better download it to your own machine.
Copy codeThe Code is as follows: <script type = "text/javascript" src = "http://www.aeroom.org/include/scripts/scrollingAD.js"> </script> below is the first method to use, it seems a little more troublesome, but only two lines of code are required;
Copy codeThe Code is as follows: var sampleDiv = new scrollingAD ("divId", 200,100, "yellow", "up", 10,200 0, 20, true );
SampleDiv. move ();
This will create an uninterrupted circular scroll area based on a DIV object of id = "divId" in the document. The area is Px in width, PX in height, and the background color is yellow (you can use the format "# ff00ff" if you do not have to worry about poor English) and scroll up in the direction. In fact, you can also choose to scroll left, as long as you change "up" to "left. But it does not support scrolling to the right or down, so you don't need to try "right" or "down"-it is easy to implement these two directions, but I personally think it is not practical, so we didn't do it-the delay time for every 1 px scrolling is 10 ms, that is, the ideal state is to scroll PX per second. Every 20 PX of scrolling is paused, and the pause time is 2 seconds. You can also hover over the mouse.
The order of parameters mentioned above must be strictly followed, that is, they must be arranged in the following order. If you want to be lazy, you can skip it with a comma:
Copy codeThe Code is as follows: 1. layer ID, required parameter. If this parameter is left blank or misspelled, an error is returned;
2. The width of the scroll area. The default value is 200px. All the default values can be modified in scrollingAD;
3. The height of the scroll area. The default value is 50px;
4. Background color. The default value is "transparent", which is transparent;
5. Direction. Value Options: "up/left ";
6. Delay of 1 px for each scroll. The default value is 20, and the Unit is ms. The larger the value, the slower the scroll;
7, each rolling limited distance after the stagnation of the time, the Unit is also MS, the default value of 2000, that is 2 seconds-if you do not want to stagnate, set it to 0 on the line;
8. The scroll distance between every two stops. The default value is one screen. That is to say, if you set the direction to "up", the default value is equal to the height of the rolling area. If the direction is left, the default value is the width of the rolling area;
9. Whether to hover over. The default value is true. It doesn't matter if you leave this field empty;
The second method is as follows:
Copy codeThe Code is as follows: var sampleDiv = new scrollingAD ("divId ");
SampleDiv. move ();
In this way, all the default values are used, but you should think that you must change a parameter. You can do this:
Var sampleDiv = new scrollingAD ("divId ");
SampleDiv. width = 500;
SampleDiv. height = 100;
SampleDiv. bgColor = "red ";
SampleDiv. direction = "left ";
SampleDiv. delay = 10;
SampleDiv. pauseTime = 1000;
SampleDiv. size = 50;
SampleDiv. isHover = false;
SampleDiv. move ();
Of course, you don't need to write it all like above. You just need to modify the necessary parameters. If you use the first method to create a rolling area, but you have modified it later, the following will prevail.
Note that you should use this order to create the rolling area:
<Html> <pead> <title> effect demonstration </title> </pead> <body> you do not need to write all layers as above, you only need to modify the required parameters. If you use the first method to create a rolling area, but you have modified it later, the following will prevail. Then call the script file to create a scroll area. <p> If the script reports an error, it may be because my website is too slow to connect. Just refresh the page. </P> </body> </ptml>
[Ctrl + A select all note: To import external Js, refresh required to execute] tip: you can modify some code before running
Update:
Now we can define the size parameter using percentages, as shown in the following code:
Var sampleDiv = new scrollingAD ("sampleDiv ");
SampleDiv. size = "50%"; // note that quotation marks must be added; otherwise, errors may occur.
SampleDiv. move ();
The result is that a loop is rolled only twice. Similarly, if one loop is rolled out at a time, set the size to "100%. However, it is not recommended to set the percentage at will. Set it to a value that matches the number of rows as much as possible. Otherwise, unexpected white space may occur.
Of course, numbers are still supported :)
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
