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;
}