HTML文字图片无间断滚动(跑马灯效果)

2080阅读 0评论2011-11-05 ulovko
分类:LINUX

1: 文字图片向上滚动
  1. <table cellspacing="0" width="100%" align="center">
  2. <tr>
  3. <td align="center" width="100%">

  4. <div id="adscroll" style="overflow:hidden;height:12px;width:100%;text-align:center;float:left;">
  5. <div id="adinner1">


  6. <a href="" target="_blank">
  7. <font color="green">当当网新书上架:俺是山东蓬莱人,梦回故乡~!已经卖断货,预购从速!</a></font>
  8. <br/><br/>
  9. <a href="" target="_blank">
  10. <font color="green">当当网新书上架:俺是山东蓬莱人,梦回故乡~!已经卖断货,预购从速!</a></font>
  11. <br/><br/>
  12. <a href="" target="_blank">
  13. <font color="green">当当网新书上架:俺是山东蓬莱人,梦回故乡~!已经卖断货,预购从速!</a></font>
  14. <br/><br/>

  15. </div>
  16. <div id="adinner2"></div>
  17. </div>
  18. </td>
  19. </tr>
  20. <table>

  21. <script language="javascript">
  22.         var speed=98;
  23.         var adinner2=document.getElementById("adinner2");
  24.         var adinner1=document.getElementById("adinner1");
  25.         var adscroll=document.getElementById("adscroll");
  26.         adinner2.innerHTML=adinner1.innerHTML;
  27.         function Marquee(){
  28.         if(adinner2.offsetTop-adscroll.scrollTop<=0){
  29.                 adscroll.scrollTop-=adinner1.offsetHeight;
  30.         }else{
  31.                 adscroll.scrollTop++;
  32.         }
  33.         }
  34.         var adMarquee=setInterval(Marquee,speed);
  35.         adscroll.onmouseover=function(){clearInterval(adMarquee)};
  36.         adscroll.onmouseout=function(){Marquee=setInterval(adMarquee,speed)};
  37. </script>
2:文字图片向左滚动
  1. <table cellspacing="0" width="100%" align="center">
  2. <tr>
  3. <td align="center" width="100%">

  4. <div id="adscroll" style="overflow:hidden;height:120px;width:300px;text-align:center;float:left;">
  5. <div id="adscrollX" style="float:left;width:800%;">
  6. <div id="adinner1" style="float:left;">


  7. <a href="" target="_blank">
  8. <font color="green">当当网新书上架:俺是山东蓬莱人,梦回故乡~!已经卖断货,预购从速!</a></font>
  9. <br/><br/>
  10. <a href="" target="_blank">
  11. <font color="green">当当网新书上架:俺是山东蓬莱人,梦回故乡~!已经卖断货,预购从速!</a></font>
  12. <br/><br/>
  13. <a href="" target="_blank">
  14. <font color="green">当当网新书上架:俺是山东蓬莱人,梦回故乡~!已经卖断货,预购从速!</a></font>
  15. <br/><br/>

  16. </div>
  17. <div id="adinner2" style="float:left;"></div>
  18. </div>
  19. </div>
  20. </td>
  21. </tr>
  22. <table>

  23. <script language="javascript">
  24.         var speed=28;
  25.         var adinner2=document.getElementById("adinner2");
  26.         var adinner1=document.getElementById("adinner1");
  27.         var adscroll=document.getElementById("adscroll");
  28.         adinner2.innerHTML=adinner1.innerHTML;
  29.         function Marquee(){
  30.         if(adinner2.offsetWidth-adscroll.scrollLeft<=0){
  31.                 adscroll.scrollLeft-=adinner1.offsetWidth;
  32.         }else{
  33.                 adscroll.scrollLeft++;
  34.         }
  35.         }
  36.         var adMarquee=setInterval(Marquee,speed);
  37.         adscroll.onmouseover=function(){clearInterval(adMarquee)};
  38.         adscroll.onmouseout=function()adMarquee=setInterval(Marquee,speed)};
  39. </script>

3:
上一篇:ClustrMaps—点击计数地图工具以及能够显示任何网站所有访问者位置的追踪器—免费
下一篇:使用ZFS的十条理由