向上滚动的无缝文字列表，兼容各大浏览器

发表时间:2011-12-21 15:04:09

 网上有很多无缝滚动，但是我在使用的时候，发现一个问题，当无缝滚动的块不是在网页的顶部，也就是说，当上面有内容时，只有火狐才能一直滚动，而IE却是只滚动一圈，所以分享以下代码，支持各浏览器，支持上部不为顶部。

 

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
  5. <title>向上滚动的无缝文字列表，兼容各大浏览器</title> 
  6. <style type="text/css"> 
  7. <!-- 
  8. #demo ul{ 
  9. text-align: left; 
  10. margin:10px; 
  11. padding:0px; 
  12. width:200px; 
  13.  
  14. } 
  15. #demo ul li{ 
  16.    margin-left:25px; 
  17.    display:block; 
  18.    list-style-image:url(images/icon_01.gif); 
  19.    font-size:13px; 
  20.    height:26px;  
  21.    padding-top:5px; 
  22. } 
  23. #demo{ 
  24. overflow:hidden; 
  25. width: 232px; 
  26. height: 270px; 
  27. margin: 5px; 
  28. float: left; 
  29. display: inline; 
  30. } 
  31. --> 
  32. </style> 
  33.  
  34. </head> 
  35.  
  36. <body> 
  37. <div style="height:800px; width:100%;"></div> 
  38. <div id="demo"> 
  39. <div id="demo1"> 
  40. <ul> 
  41. <li>1最新客户名称</li> 
  42. <li>2最新客户名称</li> 
  43. <li>3最新客户名称</li> 
  44. <li>4最新客户名称</li> 
  45. <li>5最新客户名称</li> 
  46. <li>6最新客户名称</li> 
  47. <li>7最新客户名称</li> 
  48. <li>8最新客户名称</li> 
  49. <li>9最新客户名称</li>  
  50. <li>10最新客户名称</li> 
  51. <li>11最新客户名称</li> 
  52. <li>12最新客户名称</li>  
  53. </ul> 
  54. </div> 
  55. <div id="demo2"></div> 
  56. <script type="text/javascript"> 
  57. var speed=40; 
  58. var FGDemo=document.getElementById('demo'); 
  59. var FGDemo1=document.getElementById('demo1'); 
  60. var FGDemo2=document.getElementById('demo2'); 
  61. FGDemo2.innerHTML=FGDemo1.innerHTML 
  62. function Marquee1(){ 
  63. if(FGDemo2.offsetHeight-FGDemo.scrollTop<=0) 
  64. FGDemo.scrollTop-=FGDemo1.offsetHeight 
  65. else{ 
  66. FGDemo.scrollTop++ 
  67. } 
  68. } 
  69. var MyMar1=setInterval(Marquee1,speed) 
  70. FGDemo.onmouseover=function() {clearInterval(MyMar1)} 
  71. FGDemo.onmouseout=function() {MyMar1=setInterval(Marquee1,speed)} 
  72. </script> 
  73. </div> 
  74. </body> 
  75. </html> 

注：如果IE下出现变形，那么请把CSS转移到单独的外部CSS文件里即可！

 

 

------分割线---------------------------------------

您可能感兴趣

Tags: 无缝滚动 兼容 向上滚动 文字列表

留个脚印

点击我更换图片 (请输入验证码)

最新评论