js方法:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> New Document </title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <script type="text/javascript"> //获取 window.onload=function(){ var oneDiv = document.getElementsByTagName("div")[0]; var div1 =document.getElementById("div1"); var div2 =document.getElementById("div2"); div2.innerHTML=div1.innerHTML //定时器 heights = oneDiv.scrollTop var a1a =setInterval(scrolls,150); function scrolls(){ if (oneDiv.scrollTop>=div2.offsetHeight) { oneDiv.scrollTop-=div1.offsetHeight } else{ oneDiv.scrollTop+=5; } } //鼠标移上时清除定时器达到滚动停止的目的 oneDiv.onmouseover=function() {clearInterval(a1a)} //鼠标移开时重设定时器 oneDiv.onmouseout=function(){a1a=setInterval(scrolls,150)} } </script> <style type="text/css"> #oneDiv{ width:300px; height:300px; overflow:hidden; border:solid 3px #6C787B; text-align:center; background-color: #4390BA; color: #FEFEFE; } </style> </head> <body> <h1>子时过</h1> <div id="oneDiv"> <div id="div1"> <p>单骑奉月光<br/>欲观花 午时的香 <br/>却芬芳带伤 <br/>记相传 跋涉万水<br/>流连的过往<br/>怎奈作 一滴苦水<br/>在枕边流淌<br/>葬爱化成蝶 相见断桥边<br/>亦真亦幻的情节 梦回子时曰 <br/>琴声的忏悔和冰冷的眼泪 <br/>华丽的咒语 完美的沉睡 <br/>前世的宿命在今夜里轮回 <br/>弹指间 路转峰回 <br/>眼看狂风又乍起是狼族的呼唤 <br/>刺客的嘴脸 渔人的世界 <br/>迷失的荒野与真爱的纠结 <br/>记载着 子时 狂澜 <br/>记相传 跋涉万水 <br/>流连的过往 <br/>怎奈作 一滴苦水 <br/>在枕边流淌 <br/>葬爱化成蝶 相见断桥边<br/>亦真亦幻的情节 梦回子时曰 <br/>琴声的忏悔和冰冷的眼泪<br/>华丽的咒语 完美的沉睡 <br/>前世的宿命在今夜里轮回 <br/>弹指间 路转峰回 <br/>眼看狂风又乍起是狼族的呼唤 <br/>刺客的嘴脸 渔人的世界<br/>迷失的荒野与真爱的纠结 <br/>记载着 子时 狂澜<br/></p> </div> <div id="div2"> </div> </div> </body> </html>
jquery方法:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> New Document </title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <script type="text/javascript" src="http://common.cnblogs.com/script/jquery.js"></script> <script type="text/javascript"> $(function(){ //复制div1内容到div2 $("#div2").html($("#div1").html()); //定时器 var scroll = setInterval(scrolls,150); //滚动函数 function scrolls(){ if($("#oneDiv").scrollTop()>=$("#div2").height()){ $("#oneDiv").scrollTop($("#oneDiv").scrollTop()-$("#div1").height()); }else{ $("#oneDiv").scrollTop($("#oneDiv").scrollTop()+5); } } //鼠标悬停停止 $("#oneDiv").mouseover(function(){ clearInterval(scroll); }); //鼠标离开继续 $("#oneDiv").mouseout(function(){ scroll = setInterval(scrolls,150); }); }) </script> <style type="text/css"> #oneDiv{ width:300px; height:300px; overflow:hidden; border:solid 3px #6C787B; text-align:center; background-color: #4390BA; color: #FEFEFE; } </style> </head> <body> <h1>子时过</h1> <div id="oneDiv"> <div id="div1"> <p>单骑奉月光<br/>欲观花 午时的香 <br/>却芬芳带伤 <br/>记相传 跋涉万水<br/>流连的过往<br/>怎奈作 一滴苦水<br/>在枕边流淌<br/>葬爱化成蝶 相见断桥边<br/>亦真亦幻的情节 梦回子时曰 <br/>琴声的忏悔和冰冷的眼泪 <br/>华丽的咒语 完美的沉睡 <br/>前世的宿命在今夜里轮回 <br/>弹指间 路转峰回 <br/>眼看狂风又乍起是狼族的呼唤 <br/>刺客的嘴脸 渔人的世界 <br/>迷失的荒野与真爱的纠结 <br/>记载着 子时 狂澜 <br/>记相传 跋涉万水 <br/>流连的过往 <br/>怎奈作 一滴苦水 <br/>在枕边流淌 <br/>葬爱化成蝶 相见断桥边<br/>亦真亦幻的情节 梦回子时曰 <br/>琴声的忏悔和冰冷的眼泪<br/>华丽的咒语 完美的沉睡 <br/>前世的宿命在今夜里轮回 <br/>弹指间 路转峰回 <br/>眼看狂风又乍起是狼族的呼唤 <br/>刺客的嘴脸 渔人的世界<br/>迷失的荒野与真爱的纠结 <br/>记载着 子时 狂澜<br/></p> </div> <div id="div2"> </div> </div> </body> </html>
基本思路:
1.复制div1的内容到div2(为了无缝衔接)
2.设置定时器触发scrolls函数
3.scrolls函数,当scrollTop大于div2的高度时,使得scrollTop回到滚动到div1与div2的交接点(无缝衔接),其他时候向下滚动
为了方便理解:
4.添加鼠标悬停与鼠标离开事件
希望对你有所帮助! ^_^~~