頁面中多處使用無縫滾動效果的時候，爲方便調用一般都會寫一個函數多次調用；項目中在調試的時候遇到一些問題，最終解決了，把代碼記錄下來方便下次查詢：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <style> *{ margin:0 auto;padding:0; list-style:none; color:#ffffff; } </style> <body> <div id="home_userlist_body" style="overflow:hidden;height:139px;width:232px;background:yellow;float:left"> <ul id="home_userlist_body_1"> <li><a href="http://zzjs.net" target="_blank">11羅富仙和孫玉蘭</a></li> <li><a href="http://zzjs.net" target="_blank">22急尋許秀軍和苟玲父女兩人！</a></li> <li><a href="http://zzjs.net" target="_blank">33尋找汶川縣城的陳永英！</a></li> <li><a href="http://www.zzjs.net" target="_blank">44拜託你們幫我尋小妹劉冬梅！</a></li> <li><a href="http://www.zzjs.net" target="_blank">55尋龔倩！</a></li> <li><a href="http://www.zzjs.net" target="_blank">66尋找親友報平安</a></li> <li><a href="http://www.zzjs.net" target="_blank">77四川師大叫李明速回綿陽中醫院看望病重母親</a></li> <li><a href="<#ZC_BLOG_HOST#>?cat=8" target="_blank">88尋找秦丹</a></li> </ul> <ul id="home_userlist_body_2"></ul> </div> <div id="home_round_body" style="overflow:hidden;height:139px;width:232px;background:red;float:left"> <ul id="top_li_1"> <li><a href="http://zzjs.net" target="_blank">211羅富仙和孫玉蘭</a></li> <li><a href="http://zzjs.net" target="_blank">222急尋許秀軍和苟玲父女兩人！</a></li> <li><a href="http://zzjs.net" target="_blank">233尋找汶川縣城的陳永英！</a></li> <li><a href="http://www.zzjs.net" target="_blank">244拜託你們幫我尋小妹劉冬梅！</a></li> <li><a href="http://www.zzjs.net" target="_blank">255尋龔倩！</a></li> <li><a href="http://www.zzjs.net" target="_blank">266尋找親友報平安</a></li> <li><a href="http://www.zzjs.net" target="_blank">277四川師大叫李明速回綿陽中醫院看望病重母親</a></li> <li><a href="<#ZC_BLOG_HOST#>?cat=8" target="_blank">288尋找秦丹</a></li> </ul> <ul id="home_round_body_2"></ul> </div> <div id="home_vires_body" style="overflow:hidden;height:139px;width:232px;background:green;float:left"> <ul id="top_li_2"> <li><a href="http://zzjs.net" target="_blank">22222222羅富仙和孫玉蘭</a></li> <li><a href="http://zzjs.net" target="_blank">急尋許秀軍和苟玲父女兩人！</a></li> <li><a href="http://zzjs.net" target="_blank">尋找汶川縣城的陳永英！</a></li> <li><a href="http://www.zzjs.net" target="_blank">拜託你們幫我尋小妹劉冬梅！</a></li> <li><a href="http://www.zzjs.net" target="_blank">尋龔倩！</a></li> <li><a href="http://www.zzjs.net" target="_blank">尋找親友報平安</a></li> <li><a href="http://www.zzjs.net" target="_blank">四川師大叫李明速回綿陽中醫院看望病重母親</a></li> <li><a href="<#ZC_BLOG_HOST#>?cat=8" target="_blank">尋找秦丹</a></li> </ul> <ul id="home_vires_body_2"></ul> </div> <div id="home_sens_body" style="overflow:hidden;height:139px;width:232px;background:darkred;float:left"> <ul id="top_li_3"> <li><a href="http://zzjs.net" target="_blank">22222222羅富仙和孫玉蘭</a></li> <li><a href="http://zzjs.net" target="_blank">急尋許秀軍和苟玲父女兩人！</a></li> <li><a href="http://zzjs.net" target="_blank">尋找汶川縣城的陳永英！</a></li> <li><a href="http://www.zzjs.net" target="_blank">拜託你們幫我尋小妹劉冬梅！</a></li> <li><a href="http://www.zzjs.net" target="_blank">尋龔倩！</a></li> <li><a href="http://www.zzjs.net" target="_blank">尋找親友報平安</a></li> <li><a href="http://www.zzjs.net" target="_blank">四川師大叫李明速回綿陽中醫院看望病重母親</a></li> <li><a href="<#ZC_BLOG_HOST#>?cat=8" target="_blank">尋找秦丹</a></li> </ul> <ul id="home_sens_body_2"></ul> </div> <script> function homeMarQuee(coleeId,colee1Id,colee2Id){ var speed = 60; var colee = document.getElementById(coleeId); var colee1 = document.getElementById(colee1Id); var colee2 = document.getElementById(colee2Id); colee.scrollTop=colee.scrollHeight; colee2.innerHTML = colee1.innerHTML; //克隆colee1爲colee2 function Marquee1() { //當滾動至colee1與colee2交界時 if (colee2.offsetHeight - colee.scrollTop <= 0) { colee.scrollTop -= colee1.offsetHeight; //colee跳到最頂端 console.log("124564"); } else { colee.scrollTop++; console.log("14545645878"); } } var MyMar1 = setInterval(Marquee1, speed);//設置定時器 //鼠標移上時清除定時器達到滾動停止的目的 colee.onmouseover = function () { clearInterval(MyMar1); //console.log("清除了定時器."); }; //鼠標移開時重設定時器 colee.onmouseout = function () { // console.log("add了定時器."); MyMar1 = setInterval(Marquee1, speed); }; } homeMarQuee('home_userlist_body','home_userlist_body_1','home_userlist_body_2'); homeMarQuee('home_round_body','top_li_1','home_round_body_2'); homeMarQuee('home_vires_body','top_li_2','home_vires_body_2'); homeMarQuee('home_sens_body','top_li_3','home_sens_body_2'); </script> </body> </html>