[JS效果]无间断滚动程序
Code<!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库)-->
<mce:script type="text/javascript" src="../js/jquery-1.3.1.js" mce_src="js/jquery-1.3.1.js"></mce:script>
<mce: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();
});
// --></mce: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>
浙公网安备 33010602011771号