昨晚花了点时间给女友做了个无间断滚动程序,支持一个页中多个滚动块,只要class为scrollTextDiv 的dom中的内容都会被滚动显示,传上来给大家分享:
<!
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" />
< title > 无间断滚动程序示例 </ title >
<!-- 效果代码开始(需要jquery库) -->
< script type ="text/javascript" src ="../js/jquery-1.3.1.js" ></ script >
< script type ="text/javascript" >
var ScrollText = {
speed: 1 , // 每次滚动幅度
interval: 10 , // 每次滚动间隔时间(毫秒)
mouseControl: true , // 是否在鼠标放上时暂停滚动
/* ****上面的三个属性可以简单对滚动进行配置,以下代码请不要修改***** */
clid: ' scrollTextDiv ' ,
text: [],
_appendCount: [],
intervalFlag: 0 ,
init: function (){
var cl = $( ' . ' + ScrollText.clid);
if (ScrollText.mouseControl){
cl.mouseover( function (){ScrollText.stop();});
cl.mouseout( function (){ScrollText.play();});
}
cl.each( function (i){
ScrollText.text.push($( this ).html());
ScrollText._appendCount.push( 0 );
});
ScrollText.play();
},
doScrollText : function (){
var cl = $( ' . ' + ScrollText.clid);
cl.each( function (i){
if ( this .scrollTop + cl.height() >= this .scrollHeight){
if (ScrollText._appendCount[i] > 100 )
{ // 清除无用内容,防止内容过多导致浏览器出现问题
ScrollText._appendCount[i] = 0 ;
$( ' . ' + ScrollText.clid + ' . ' + ScrollText.clid + ' _temp ' ).remove();
}
$( ' <div class= ' + ScrollText.clid + ' _temp> ' + ScrollText.text[i] + ' </div> ' ).appendTo($( this ));
ScrollText._appendCount[i] ++ ;
}
this .scrollTop += ScrollText.speed;
});
},
play: function (){
ScrollText.intervalFlag = window.setInterval( ' ScrollText.doScrollText(); ' ,ScrollText.interval);
},
stop: function (){
window.clearInterval(ScrollText.intervalFlag);
}
}
$(document).ready( function (){
ScrollText.init();
});
</ script >
<!-- 效果代码结束 -->
</ head >
< body >
<!-- 测试效果代码开始 -->
< div class ="scrollTextDiv" style ="height:150px; overflow:hidden;border:1px #666 solid;" >
大家好家好1 < br />
大家好家好2 < br />
大家好家好3 < br />
大家好家好4 < br />
大家好家好5 < br />
大家好家好6 < br />
大家好家好7 < br />
大家好家好8 < br />
</ div >
<!-- 测试效果代码结束 -->
</ body >
</ html >
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" />
< title > 无间断滚动程序示例 </ title >
<!-- 效果代码开始(需要jquery库) -->
< script type ="text/javascript" src ="../js/jquery-1.3.1.js" ></ script >
< script type ="text/javascript" >
var ScrollText = {
speed: 1 , // 每次滚动幅度
interval: 10 , // 每次滚动间隔时间(毫秒)
mouseControl: true , // 是否在鼠标放上时暂停滚动
/* ****上面的三个属性可以简单对滚动进行配置,以下代码请不要修改***** */
clid: ' scrollTextDiv ' ,
text: [],
_appendCount: [],
intervalFlag: 0 ,
init: function (){
var cl = $( ' . ' + ScrollText.clid);
if (ScrollText.mouseControl){
cl.mouseover( function (){ScrollText.stop();});
cl.mouseout( function (){ScrollText.play();});
}
cl.each( function (i){
ScrollText.text.push($( this ).html());
ScrollText._appendCount.push( 0 );
});
ScrollText.play();
},
doScrollText : function (){
var cl = $( ' . ' + ScrollText.clid);
cl.each( function (i){
if ( this .scrollTop + cl.height() >= this .scrollHeight){
if (ScrollText._appendCount[i] > 100 )
{ // 清除无用内容,防止内容过多导致浏览器出现问题
ScrollText._appendCount[i] = 0 ;
$( ' . ' + ScrollText.clid + ' . ' + ScrollText.clid + ' _temp ' ).remove();
}
$( ' <div class= ' + ScrollText.clid + ' _temp> ' + ScrollText.text[i] + ' </div> ' ).appendTo($( this ));
ScrollText._appendCount[i] ++ ;
}
this .scrollTop += ScrollText.speed;
});
},
play: function (){
ScrollText.intervalFlag = window.setInterval( ' ScrollText.doScrollText(); ' ,ScrollText.interval);
},
stop: function (){
window.clearInterval(ScrollText.intervalFlag);
}
}
$(document).ready( function (){
ScrollText.init();
});
</ script >
<!-- 效果代码结束 -->
</ head >
< body >
<!-- 测试效果代码开始 -->
< div class ="scrollTextDiv" style ="height:150px; overflow:hidden;border:1px #666 solid;" >
大家好家好1 < br />
大家好家好2 < br />
大家好家好3 < br />
大家好家好4 < br />
大家好家好5 < br />
大家好家好6 < br />
大家好家好7 < br />
大家好家好8 < br />
</ div >
<!-- 测试效果代码结束 -->
</ body >
</ html >
注:需要jquery库