js实现marquee类似效果

css：

#timerSliding {
    overflow: hidden;
    width: 320px;
    height: 430px;
    position: relative;
    margin-left: 30px;
    vertical-align: top;
}

 

#timerSliding_content {
 font-size: 12px;
 color: #f0f0f0;
 width: 320px;
 word-wrap: break-word;
 overflow: hidden;
 position: absolute;
 vertical-align: top;
}

 

 

html：

<div id='timerSliding'>
     <div id="timerSliding_content" style="top: 0px;" οnmοusemοve="setStopped();" οnmοuseοut="setStart();">
                     输入滚动的文字。

     </div>
</div>

 

 

js：

var tm_intervalTime = 50;
var tm_speed = 10;
var tm_intervalId;
var move_span = 0;
var stopped = false;
var contentHeight = 0;
var times = 0;
var curHeight = 0;
var curDiv = 0;
       
function Page_Onload() {
 var content = document.getElementById('timerSliding_content');
 // var scontent = document.getElementById('timerSliding_seconde_content');
 //content.innerHTML = content.innerHTML + content.innerHTML;
 if(content) {
  contentHeight = parseInt(content.clientHeight);
  times = contentHeight / 430;
  if(times <= 1) {
   return;
  }
  content.style.position = 'absolute';
  content.style.top = '0px';
  curHeight = 0;
  curDiv = 0;
  stopped = false;
  window.setInterval(AfterBraek, 8000);
 }
}

function AfterBraek() {
 if(stopped)
  return;

 if(tm_intervalId) {
  return;
 }
 var content = document.getElementById('timerSliding_content');
 if(content) {
  var top = parseInt(content.style.top);
  if (top < (430 - contentHeight)) {
   content.style.top = '430';
   curDiv = 0;
   curHeight = 430;
  } else {
   var divs = content.getElementsByTagName("div");
   curHeight = 0;
   if(divs && divs.length > 0) {
    if(divs.length <= curDiv) {
     curDiv = 0;
    }
    while(curDiv < divs.length) {
     curHeight += divs[curDiv].offsetHeight;
     if(curHeight > 430) {
      curHeight -= divs[curDiv].offsetHeight;
      break;
     }
     curDiv++;
    }
   }
   //alert("curHeight:" + curHeight);
  }
  
  move_span = 0;
  tm_intervalId = window.setInterval(TM_Sliding_OnTime, tm_intervalTime);
 }
}

function TM_Sliding_OnTime() {
 if(stopped)
  return;
 var content = document.getElementById('timerSliding_content');
 var top = parseInt(content.style.top);
 if((move_span + tm_speed) > curHeight) {
  top = top - curHeight + move_span;
  move_span = curHeight;
 } else {
  top = top - tm_speed;
  move_span += tm_speed;
 }
 content.style.top = top + 'px';

 if (move_span >= curHeight) {
  window.clearInterval(tm_intervalId);
  move_span = 0;
  tm_intervalId = null;
 }
}

function setStopped() {
 if(!stopped)
  stopped = true;
}

function setStart() {
 if(stopped)
  stopped = false;
}