js上下滚动效果

js上下滚动效果
<div id="demo" style="width:363px;height:220px;">
<div class="kaijiangxinxi_list_one">
<div class="kaijiangdetail">
<div class="kaijiangmessage">
<ul>
<li>彩种：<span class="redcolor">双色球</span></li>
<li>期数：<span class="redcolor">09017</span>  开奖时间：<span class="redcolor">2009-02-14</span></li>
<li><ul><li>开奖号码：</li><li class="redboll">01</li><li class="blueboll">02</li><li class="redboll">01</li><li class="blueboll">02</li><li class="redboll">01</li><li class="blueboll">02</li><li class="redboll">01</li><li class="blueboll">02</li></ul></li>
</ul>
<div class="jiangchi">
<div class="jiangchi1">奖池：<span class="redcolor">231,254,456</span>元</div>
<div class="jiangchi2"><ul><li>>>详情</li><li>>>购买</li></ul></div>
</div>
</div>
<div class="kaijiangimg"><img src="../img/201_logo.gif" /></div>
</div>

<div class="grayborder"></div>
</div>
</div>
<SCRIPT type=text/javascript>
var scrollElem;
var stopscroll;
var stoptime;
var preTop;
var leftElem;
var currentTop;
var marqueesHeight;
var scrollObj;
function marque(width,height,marqueName,marqueCName){
try{
  marqueesHeight = height;
  stopscroll     = false;

  scrollElem = document.getElementById(marqueName);
  with(scrollElem){
  scrollElem.style.width = width;
  scrollElem.style.height = marqueesHeight;
  style.overflow  = 'hidden';
noWrap = true;
  }

  scrollElem.onmouseover = new Function('stopscroll = true');
  scrollElem.onmouseout  = new Function('stopscroll = false');

  preTop     = 0;
  currentTop = 0;
  stoptime   = 0;

  //leftElem = document.getElementById(marqueCName);
  //scrollElem.appendChild(leftElem.cloneNode(true));
 
  init_srolltext();

}catch(e) {}
}
function init_srolltext(){
  if(scrollObj)clearInterval(scrollObj);//递归，当我调用自己的时候要清除上一个setInterval对象
  scrollElem.scrollTop = 0;
  scrollObj=setInterval('scrollUp()', 30);//速度
}

function scrollUp(){
  if(stopscroll) return;
  currentTop += 1;
  if(currentTop == marqueesHeight+1) {
   /* stoptime += 1;
    currentTop -= 1;
    if(stoptime == (marqueesHeight)*4) {*///停顿时间
      currentTop = 0;
      stoptime = 0;
      init_srolltext();//递归调用
    /*}*/
  }else{
    preTop = scrollElem.scrollTop;
    scrollElem.scrollTop += 1;
    if(preTop == scrollElem.scrollTop){
      scrollElem.scrollTop = marqueesHeight;
      scrollElem.scrollTop += 1;
    }
  }
}
marque("363px","220px","demo","demo1");//滚动(当内容小于220px是不会滚动的，也没必要)
</SCRIPT>

评论

1 楼 cloudgamer 2009-12-10  

我也写过一个无缝滚动效果