您的位置：首页 > Web前端 > JavaScript

[JS效果]无间断滚动程序

2009-04-24 11:23 387 查看

昨晚花了点时间给女友做了个无间断滚动程序，支持一个页中多个滚动块，只要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>

<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库

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航