Scroll over images

Source: Internet
Author: User
Javascript-based image scrolling

  1. <HTML>
  2. <Meta http-equiv = 'content-type' content = 'text/html; charset = gb2312 '>
  3. <Script language = 'javascript '>
  4. VaR scrollerheight = 160; // defines the height displayed for each area
  5. VaR HTML, total_area = 0, wait_flag = true; // initialize the HTML string, the total number of display areas, whether to wait.
  6. VaR bmouseover = 1; // do not scroll when you move the mouse over it. Hard code is true here.
  7. 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.
  8. VaR waitingtime = 5000; // wait time for each flip, in milliseconds
  9. VaR s_tmp = 0 // initial number of moves
  10. VaR s_amount = 32; // its value is converted by dividing the pixel to be moved by scrollspeed.
  11. VaR scroll_content = new array (); // declare an array
  12. VaR startpanel = 0, n_panel = 0, I = 0; // declare the initial region, number of regions, and cyclic Variables
  13.  
  14. //************************************** ******
  15. // This is a variable tracking function.
  16. // Directly call the trace () function where tracing variables need to be used.
  17. VaR newwin;
  18. VaR isdebug = 1;
  19. Function trace (s)
  20. {
  21. If (isdebug)
  22. {
  23. Try
  24. {
  25. Newwin.doc ument. Write (S + "<br> ");
  26. }
  27. Catch (E)
  28. {
  29. Newwin = Window. Open ("", "trace ");
  30. Newwin.doc ument. Write (S + "<br> ");
  31. }
  32. }
  33. }
  34. //************************************** ********
  35. // Initialize the rolling function
  36. Function startscroll (){
  37. // Obtain the initial region randomly
  38. // Startpanel is any number of objects between 0 and scroll_content
  39. I = 0;
  40. For (I in scroll_content) n_panel ++;
  41. N_panel = n_panel-1;
  42. Startpanel = math. Round (math. Random () * n_panel );
  43.  
  44. // If the initial region is the first element,
  45. // Call insert_area to add all elements in scroll_content to the div.
  46. If (startpanel = 0)
  47. {
  48. I = 0;
  49. For (I in scroll_content)
  50. Insert_area (total_area, total_area ++ );
  51. }
  52. Else
  53. // If the initial region is the last element
  54. // First load the last element into the DIV, and then load other elements into the DIY
  55. If (startpanel = n_panel) // if it is the last element
  56. {
  57. Insert_area (startpanel, total_area );
  58. Total_area ++;
  59. For (I = 0; I <startpanel; I ++)
  60. {
  61. Insert_area (I, total_area );
  62. Total_area ++;
  63. }
  64. }
  65. Else
  66. // If the initial region is not the first or the last region
  67. // First load the current region into the DIV,
  68. // Add the area before and after the current area to the DIV
  69. If (startpanel> 0) | (startpanel <n_panel ))
  70. {
  71. Insert_area (startpanel, total_area );
  72. Total_area ++;
  73. For (I = startpanel + 1; I <= n_panel; I ++)
  74. {
  75. Insert_area (I, total_area );
  76. Total_area ++;
  77. }
  78. For (I = 0; I <startpanel; I ++)
  79. {
  80. Insert_area (I, total_area );
  81. Total_area ++;
  82. }
  83. }
  84. // Call the scrolling () function once every waitingtime
  85. Window. setTimeout ('rolling () ', waitingtime );
  86. }
  87.  
  88.  
  89. // Scroll Function
  90. Function scrolling ()
  91. {
  92. // Determine whether the mouse is placed and whether it is waiting
  93. If (bmouseover & wait_flag)
  94. {
  95. Trace ("----------------------------");
  96. For (I = 0; I <total_area; I ++)
  97. {
  98. // Each time all regions agree to move scrollspeed pixels up
  99. TMP = Document. getelementbyid ('scroll _ region' + I). style;
  100. TMP. Top = parseint (TMP. Top)-scrollspeed;
  101. If (I = 0) trace ("top of the first region" + parseint (TMP. Top ));
  102. // If one area is removed from the screen, the removed area appears from the bottom.
  103. If (parseint (TMP. Top) <=-scrollerheight)
  104. {
  105. TMP. Top = scrollerheight * (total_area-1 );
  106. }
  107. Trace ("number of moves:" + s_tmp );
  108. // 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.
  109. // Because the scrollspeed pixel is moved up at one time, the pixel to be moved during one flip operation in this example is scrollerheight.
  110. // Of course, you can also flip two scrollerheights at a time
  111. // So we need to move scrollerheight/scrollspeed times. s_amount calculates this.
  112. // Because s_tmp is initialized from 0, it is the number of times that a real flip will be moved after 1 is subtracted.
  113. // However, because the scrolling () function is executed once, s_tmp will add scroll_content.length multiple times,
  114. // So the number of moves should be (s_amount-1) * scroll_content.length ),
  115. // 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
  116. // This can be seen from the output of the trace variable
  117. If (s_tmp ++> (s_amount-1) * scroll_content.length)
  118. {
  119. Trace ("(s_amount-1) * scroll_content.length =" + (s_amount-1) * scroll_content.length)
  120. Wait_flag = false; // wait
  121. // Wait for waitingtime, and then cancel the wait, and s_tmp is set to zero.
  122. Window. setTimeout ('wait _ flag = true; s_tmp = 0; ', waitingtime );
  123. }
  124. }
  125. }
  126. // Set 1 second to execute 1000 times this function
  127. Window. setTimeout ('rolling () ', 1 );
  128. }
  129.  
  130. Function insert_area (idx, n)
  131. {
  132. Html = '<Div style = "Left: 0px; width: 100%; position: absolute; top:' + (scrollerheight * n) + 'px "id =" scroll_area '+ N +' "> ';
  133. HTML + = scroll_content [idx] + ''; HTML + = '</div>'; document. Write (HTML );
  134. }
  135. // The following parts can be generated cyclically by ASP
  136.  
  137. Scroll_content [0] = '<Table Height = 140 align = center border = 0 width = 300 id = 0> <tr> <TD> <a href = # target = _ blank> </a> </TD> </tr> </table> ';
  138. Scroll_content [1] = '<Table Height = 140 align = center border = 0 width = 300 id = 1> <tr> <TD> <a href = # target = _ blank> </a> </TD> </tr> </table> ';
  139. Scroll_content [2] = '<Table Height = 140 align = center border = 0 width = 300 id = 2> <tr> <TD> <a href = # target = _ blank> </a> </TD> </tr> </table> ';
  140. Startscroll (); </SCRIPT>

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.