夏日博客

A-A+

兼容Ie6、7、8，FF以及谷歌浏览器文字向上滚动代码

2016年01月27日 前端设计 暂无评论 阅读 7 views 次

本文章收藏了几款不错的兼容Ie6、7、8，FF以及谷歌浏览器文字向上滚动代码，有需要学习的朋友可参考一下,代码如下:

  1. <script type="text/javascript">  
  2. function scrollOneStep(obj)  
  3. {  
  4. var ul = document.getElementById(obj);  
  5. var li = ul.getElementsByTagName("li");  
  6. var li_move = li.item(0);  
  7. var line = 0 - parseInt(li_move.clientHeight);  
  8. var speed = 10;  
  9. var pix = 0;  
  10. t2 = setInterval(function(){  
  11. if(pix > line){  
  12. ul.style.top = ""+pix + "px";  
  13. pix --;  
  14. }else{  
  15. clearInterval(t2);  
  16. }  
  17. },speed);  
  18. ul.style.top += parseInt(ul.style.top)+30+"px";  
  19. ul.removeChild(li_move);  
  20. ul.appendChild(li_move);  
  21. ul.style.top = "0"  
  22. }  
  23. function scroll(obj)  
  24. {  
  25. var t= setInterval(function(){scrollOneStep(obj);},1000);  
  26. }  
  27. </script>  

在本例中如果需要单行滚动，只需要把css中#div1的值改为18即可。

注:经测试兼容Ie6、7、8，FF以及谷歌浏览器,代码如下:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
  2. <html>  
  3. <head>  
  4. <title>新闻列表单行滚动js效果，者多行滚动js效果，超简洁</title>  
  5. <style>  
  6. a{display:block;line-height:18px;text-decoration:none;color:#f00;font-family:Arial;font-size:12px;}  
  7. a:hover{text-decoration:underline;}  
  8. .shell{width:220px; }  
  9. #div1{height:72px;overflow:hidden;}  
  10. </style>  
  11. </head>  
  12. <body>  
  13. <div class="shell">  
  14.  <div id="div1">  
  15.    <a href="/js">1jQuery的图片滚动切换插件</a>  
  16.    <a href="/js">2Mootools slider 滚动条拖动取值的实现 </a>  
  17.    <a href="/js">3VB开发的Eclipse编程软件完整版</a>  
  18.    <a href="/js">4VC++生成随机数并快速排序的算法</a>  
  19.    <a href="/js">5VB语音报数计算器源程序</a>  
  20.    <a href="/js">6jQuery的图片滚动切换插件</a>  
  21.    <a href="/js">7Mootools slider 滚动条拖动取值的实现 </a>  
  22.    <a href="/js">8VB开发的Eclipse编程软件完整版</a>  
  23.    <a href="/js">9VC++生成随机数并快速排序的算法</a>  
  24.  </div>  
  25. <div>  
  26. <p>修改说明：#div1里的高度（72px）即是你需要显示的行数<br/>  
  27. js里的18即是要滚动的行高；1500即是每次滚动所需要的时间，越大则速度越慢！  
  28. <a href="/js">Js大全</a>注！<p/>  
  29. </body>  
  30. <script>  
  31. var c,_=Function;  
  32. with(o=document.getElementById("div1")){ innerHTML+=innerHTML; onmouseover=_("cc=1"); onmouseout=_("c=0");}  
  33. (F=_("if(#%18||!c)#++,#%=o.scrollHeight>>1;setTimeout(F,#%18?10:1500);".replace(/#/g,"o.scrollTop")))();  
  34. </script>  
  35. </html>  

本效果是完全基于JavaScript的，使用时候最好另存一个新文件，然后引入，这样方便一些,代码如下:

  1. <html>  
  2. <head>  
  3. <title>文字滚动</title>  
  4. <style type="text/css">  
  5. body{font-size:12px}  
  6. a {text-decoration: none;}  
  7. </style>  
  8. </head>  
  9. <body>  
  10. <script>  
  11. var marqueeContent=new Array();   
  12. marqueeContent[0]='<font color="#0000CC">14:25 </font><a href=http://www.baidu.com target=_blank class="f12red">jQuery 动态加载静态网页的实例</a><br>';  
  13. marqueeContent[1]='<font color="#0000CC">14:25 </font><a href=/ target=_blank class="f12red">比较炫的JavaScript图片展示特效</a><br>';  
  14. marqueeContent[2]='<font color="#0000CC">14:25 </font><a href=# target=_blank class="f12red">JQuery模仿的LightBox图片效果</a><br>';  
  15. marqueeContent[3]='<font color="#0000CC">14:25 </font><a href=# target=_blank class="f12red">C#酒店管理系统（VS2008+SQL2005）</a><br>';  
  16. var marqueeInterval=new Array();   
  17. var marqueeId=0;  
  18. var marqueeDelay=2000;  
  19. var marqueeHeight=18;  
  20. function initMarquee() {  
  21.     var str=marqueeContent[0];  
  22.     document.write('<div id=marqueeBox style="overflow:hidden;height:'+marqueeHeight+'px" onmouseover="clearInterval(marqueeInterval[0])" onmouseout="marqueeInterval[0]=setInterval('startMarquee()',marqueeDelay)"><div>'+str+'</div></div>');  
  23.     marqueeId++;  
  24.     marqueeInterval[0]=setInterval("startMarquee()",marqueeDelay);  
  25.     }  
  26. function startMarquee() {  
  27.     var str=marqueeContent[marqueeId];  
  28.         marqueeId++;  
  29.     if(marqueeId>=marqueeContent.length) marqueeId=0;  
  30.     if(marqueeBox.childNodes.length==1) {  
  31.         var nextLine=document.createElement('DIV');  
  32.         nextLine.innerHTML=str;  
  33.         marqueeBox.appendChild(nextLine);  
  34.         }  
  35.     else {  
  36.         marqueeBox.childNodes[0].innerHTML=str;  
  37.         marqueeBox.appendChild(marqueeBox.childNodes[0]);  
  38.         marqueeBox.scrollTop=0;  
  39.         }  
  40.     clearInterval(marqueeInterval[1]);  
  41.     marqueeInterval[1]=setInterval("scrollMarquee()",20);  
  42.     }  
  43. function scrollMarquee() {  
  44.     marqueeBox.scrollTop++;  
  45.     if(marqueeBox.scrollTop%marqueeHeight==(marqueeHeight-1)){  
  46.         clearInterval(marqueeInterval[1]);  
  47.         }  
  48.     }  
  49. initMarquee();  
  50. </script>  
  51. </body>  
  52. </html>  
标签：

给我留言