Javascript-based image scrolling
- <HTML>
- <Meta http-equiv = 'content-type' content = 'text/html; charset = gb2312 '>
- <Script language = 'javascript '>
- VaR scrollerheight = 160; // defines the height displayed for each area
- VaR HTML, total_area = 0, wait_flag = true; // initialize the HTML string, the total number of display areas, whether to wait.
- VaR bmouseover = 1; // do not scroll when you move the mouse over it. Hard code is true here.
- VaR scrollspeed = 5; // The rolling speed is actually the prime number of the Image Moving up each time. The larger the value, the faster it looks.
- VaR waitingtime = 5000; // wait time for each flip, in milliseconds
- VaR s_tmp = 0 // initial number of moves
- VaR s_amount = 32; // its value is converted by dividing the pixel to be moved by scrollspeed.
- VaR scroll_content = new array (); // declare an array
- VaR startpanel = 0, n_panel = 0, I = 0; // declare the initial region, number of regions, and cyclic Variables
-
- //************************************** ******
- // This is a variable tracking function.
- // Directly call the trace () function where tracing variables need to be used.
- VaR newwin;
- VaR isdebug = 1;
- Function trace (s)
- {
- If (isdebug)
- {
- Try
- {
- Newwin.doc ument. Write (S + "<br> ");
- }
- Catch (E)
- {
- Newwin = Window. Open ("", "trace ");
- Newwin.doc ument. Write (S + "<br> ");
- }
- }
- }
- //************************************** ********
- // Initialize the rolling function
- Function startscroll (){
- // Obtain the initial region randomly
- // Startpanel is any number of objects between 0 and scroll_content
- I = 0;
- For (I in scroll_content) n_panel ++;
- N_panel = n_panel-1;
- Startpanel = math. Round (math. Random () * n_panel );
-
- // If the initial region is the first element,
- // Call insert_area to add all elements in scroll_content to the div.
- If (startpanel = 0)
- {
- I = 0;
- For (I in scroll_content)
- Insert_area (total_area, total_area ++ );
- }
- Else
- // If the initial region is the last element
- // First load the last element into the DIV, and then load other elements into the DIY
- If (startpanel = n_panel) // if it is the last element
- {
- Insert_area (startpanel, total_area );
- Total_area ++;
- For (I = 0; I <startpanel; I ++)
- {
- Insert_area (I, total_area );
- Total_area ++;
- }
- }
- Else
- // If the initial region is not the first or the last region
- // First load the current region into the DIV,
- // Add the area before and after the current area to the DIV
- If (startpanel> 0) | (startpanel <n_panel ))
- {
- Insert_area (startpanel, total_area );
- Total_area ++;
- For (I = startpanel + 1; I <= n_panel; I ++)
- {
- Insert_area (I, total_area );
- Total_area ++;
- }
- For (I = 0; I <startpanel; I ++)
- {
- Insert_area (I, total_area );
- Total_area ++;
- }
- }
- // Call the scrolling () function once every waitingtime
- Window. setTimeout ('rolling () ', waitingtime );
- }
-
-
- // Scroll Function
- Function scrolling ()
- {
- // Determine whether the mouse is placed and whether it is waiting
- If (bmouseover & wait_flag)
- {
- Trace ("----------------------------");
- For (I = 0; I <total_area; I ++)
- {
- // Each time all regions agree to move scrollspeed pixels up
- TMP = Document. getelementbyid ('scroll _ region' + I). style;
- TMP. Top = parseint (TMP. Top)-scrollspeed;
- If (I = 0) trace ("top of the first region" + parseint (TMP. Top ));
- // If one area is removed from the screen, the removed area appears from the bottom.
- If (parseint (TMP. Top) <=-scrollerheight)
- {
- TMP. Top = scrollerheight * (total_area-1 );
- }
- Trace ("number of moves:" + s_tmp );
- // S_tmp indicates the number of times the object is moved up. It is reasonable to move it to a pixel that is just to be moved, so it should be stopped.
- // Because the scrollspeed pixel is moved up at one time, the pixel to be moved during one flip operation in this example is scrollerheight.
- // Of course, you can also flip two scrollerheights at a time
- // So we need to move scrollerheight/scrollspeed times. s_amount calculates this.
- // Because s_tmp is initialized from 0, it is the number of times that a real flip will be moved after 1 is subtracted.
- // However, because the scrolling () function is executed once, s_tmp will add scroll_content.length multiple times,
- // So the number of moves should be (s_amount-1) * scroll_content.length ),
- // When the number of flip operations is greater than the value we calculated, it will be stopped, that is, the necessary condition for moving up
- // This can be seen from the output of the trace variable
- If (s_tmp ++> (s_amount-1) * scroll_content.length)
- {
- Trace ("(s_amount-1) * scroll_content.length =" + (s_amount-1) * scroll_content.length)
- Wait_flag = false; // wait
- // Wait for waitingtime, and then cancel the wait, and s_tmp is set to zero.
- Window. setTimeout ('wait _ flag = true; s_tmp = 0; ', waitingtime );
- }
- }
- }
- // Set 1 second to execute 1000 times this function
- Window. setTimeout ('rolling () ', 1 );
- }
-
- Function insert_area (idx, n)
- {
- Html = '<Div style = "Left: 0px; width: 100%; position: absolute; top:' + (scrollerheight * n) + 'px "id =" scroll_area '+ N +' "> ';
- HTML + = scroll_content [idx] + ''; HTML + = '</div>'; document. Write (HTML );
- }
- // The following parts can be generated cyclically by ASP
-
- Scroll_content [0] = '<Table Height = 140 align = center border = 0 width = 300 id = 0> <tr> <TD> <a href = # target = _ blank> </a> </TD> </tr> </table> ';
- Scroll_content [1] = '<Table Height = 140 align = center border = 0 width = 300 id = 1> <tr> <TD> <a href = # target = _ blank> </a> </TD> </tr> </table> ';
- Scroll_content [2] = '<Table Height = 140 align = center border = 0 width = 300 id = 2> <tr> <TD> <a href = # target = _ blank> </a> </TD> </tr> </table> ';
- Startscroll (); </SCRIPT>