JS無縫滾動顯示和JSP中marquee標籤滾動顯示
一、JS向上滾動的文字特效程式碼
這個向上滾動的文字特效JS程式碼比較簡潔，程式碼量很少，你可以根據具體情況使用，做一個下載連結滾動的效果
<!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> </head> <body> <div class =" sidebox_bd bdbtm bdgray"> <c:if test="${null!=attForm&&6 >attForm.size()}">//第一種情況，正常顯示List中的物件（在類中獲取，再set到request） <ul class = "download_list"> <c:forEach items="${attForm}" var="pur"> <li> <a href="javascript:downloadFile('${pur.pk_file}','${pur.file_name}');">${pur.file_name}</a> </li> </c:forEach> </ul> </c:if> <c:if test="${null!=attForm&&5 <attForm.size()}"> <div id="demo" style="overflow:hidden;height:121px;width:217px;position:absolute;border:1px solid #e2e3ea;"> <ul id="demo1" class = "download_list2"> <c:forEach items="${attForm}" var="pur"> <li> <a href="javascript:downloadFile('${pur.pk_file}','${pur.file_name}');">${pur.file_name}</a> </li> </c:forEach> </ul> <ul id="demo2" class = "download_list2"></ul> </div> </c:if> </div> <script style="text/javascript"> //JS無縫向上滾動20170810 var speed=30;//數值越大，速度越慢 var demo2=document.getElementById("demo2"); var demo1=document.getElementById("demo1"); var demo=document.getElementById("demo"); demo2.innerHTML=demo1.innerHTML; function MarqueeUp(){ if(demo2.offsetTop-demo.scrollTop <= 0){ demo.scrollTop-=demo1.offsetHeight; } else{ demo.scrollTop++; } } var MyMar=setInterval(MarqueeUp,speed); demo.onmouseover=function() {clearInterval(MyMar);} demo.onmouseout=function() {MyMar=setInterval(MarqueeUp,speed);} </script> </body> </html>
這段程式碼的核心處理是應用setInterval每speed(30)毫秒執行一次頁面更新.更新的函式是Marquee,通常執行的是demo.scrollTop++,也就是說通常情況下是每30毫秒向下移動一個畫素,這樣子連續起來就成了動畫了.當動畫移動到邊界時,執行的時marquee裡面的另外一個分支,將動畫移動到最初位置.實現無縫,其實是借用了兩個相同的dom塊(demo1和demo2),兩者同時向下移動,一個移出可視範圍多少,另外一個就移入可是範圍多少。
遇到的問題及解決方法：
JS無縫滾動只滾動2次就停止了：
1、當元素的父容器沒有指定定位方式時，指元素與body元素之間的偏移距離；
2、當對父容器指定定位方式（如：position：relative；）時，則指元素與父容器之間的偏移距離；
所以，當沒有指定定位方式時，程式碼中的colee2.offsetTop值已經是元素colee2與body元素之間的偏移距離了。當這部分程式碼置入頁面上方top：0處時，自然沒有問題。但是，如果插入到頁面下方時，colee2.offsetTop值就已經不再是top：0了，自然就出現位移偏差了，以致滾動執行不正確！所以只需在colee的css樣式中加入"position:absolute"即可。
即：<div id="colee" style="overflow:hidden;height:100px;width:200px;position:absolute;">以上希望對遇到同樣問題的朋友有所幫助。
JS無縫滾動只滾動1次就停止了：
手動寫死的資料要超過你的視窗高度，需要內容比視窗大才能迴圈滾動。
二、JSP中marquee標籤向上滾動
<marquee scrollAmount=2 width=450>實現滾動訊息-----</marquee>
引數詳解：
a)scrollAmount。它表示速度，值越大速度越快。如果沒有它，預設為6，建議設為1～3比較好。
b)width和height，表示滾動區域的大小，width是寬度，height是高度。特別是在做垂直滾動的時候，一定要設height的值。
c)direction。表示滾動的方向，預設為從右向左：可選的值有right、down、up。
d)scrollDelay，這也是用來控制速度的，預設為90，值越大，速度越慢。通常scrollDelay是不需要設定的。
e)behavior。用它來控制屬性，預設為迴圈滾動，可選的值有alternate(交替滾動)、slide(幻燈片效果，指的是滾動一次，然後停止滾動)
實現訊息停頓： 游標懸浮時停頓，游標離開時開始
<marquee onmouseout=this.start() onmouseover=this.stop() behavior="scroll" direction="up" width="660px" height="80px" SCROLLDELAY="320" >實現滾動訊息-----</marquee>
參考文獻：
http://bbs.csdn.net/topics/390174892
http://blog.csdn.net/my773962804/article/details/51681535
https://zhidao.baidu.com/question/1447404431243396780.html
http://www.51xuediannao.com/js/texiao/xiangshanggundong.html
http://blog.csdn.net/xttxqjfg/article/details/7873179