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