JS实现的marquee风格代码

垃圾文章凑合着看很一般还不错精品 (暂时没有评价)
Loading ... Loading ...

用到的东西，记录下，回头用的时候方便～

网页调用部分

  1. <script type="text/javascript">initTicker(document.getElementById("list-pmarquee"));</script>

css部分

  1. #list-pmarquee{ position:relative; width:864px; height:58px; overflow:hidden; border: 2px solid #F0F0F0; margin-top:10px; }
  2.   #list-pmarquee ul{ display:inline;}
  3.   #list-pmarquee li{ display:inline; margin:5px 5px 0 0; float:left; width:150px;}

JS部分

  1. function initTicker(container) {
  2.  mover = container.getElementsByTagName("ul").item(0);
  3.  
  4.  
  5.  // set
  6.  mover.style.position = "absolute";
  7.  mover.style.margin = "0 0 0 0";
  8.  mover.style.left = "0px";
  9.  mover.leftPosition = 0;
  10.  
  11.   // duplicate text
  12.   mover.style.width = 300 * 3 * 2 + "px";
  13.   mover.innerHTML += mover.innerHTML;
  14.  
  15.   // set action
  16.   mover.tickerAction = window.setInterval(
  17.    function()
  18.    {
  19.     if (mover.leftPosition * -1 > (300 * 3)) {
  20.      mover.leftPosition = -1;
  21.     } else {
  22.      mover.leftPosition -= 1;
  23.     }
  24.     mover.style.left = mover.leftPosition + "px";
  25.    }
  26.   , 30);
  27.  
  28. }

你可能对这个有点兴趣：

可乐发表于:08-05-08

看完了说点啥？