網頁中窗口文字定時滾動

網頁中窗口文字定時滾動

常見於購物網站、資訊網站中
前段時間看了某購物網站 參考其結構寫的
實現效果：文字定時向上滾動，至最底層時返回到上層，鼠標移入時暫停滾動

html：

<div class="messagebox">
                <ul class="message">
                    <li>
                    <a href="#"><span class="orange-text">[硬件]</span>AMD新發4款二代Ryzen處理器測評</a>
                    </li>
                    <li>
                    <a href="#"><span class="orange-text">[家電]</span>有了這些小電器，讓秋季養生變得簡單</a>
                    </li>
                    <li>
                    <a href="#"><span class="orange-text">[美食]</span>傳統四大派月餅，給你不同的口感</a>
                    </li>
                    <li>
                    <a href="#"><span class="orange-text">[系統]</span>Win10.6新版本發佈</a>
                    </li>
                    <li>
                    <a href="#"><span class="orange-text">[日常]</span>帶你看懂電動車剎車重要性</a>
                    </li>
                    <li>
                    <a href="#"><span class="orange-text">[家電]</span>看看新一代空調有什麼不同</a>
                    </li>
                    <li>
                    <a href="#"><span class="orange-text">[美食]</span>紅酒的品種有哪些，你知道嗎</a>
                    </li>
                    <li>
                    <a href="#"><span class="orange-text">[家電]</span>曲面屏電視要涼？無邊框全面屏電視強勢來襲！</a>
                    </li>
                </ul>
            </div>

css：

.messagebox{ overflow:hidden; height:120px}
		.message{ list-style:none; padding-left:10px; line-height:30px; position:relative}

指定了overflow爲hidden後，離開該區域的文字將不會顯示

jquery：

var message = $(".messagebox").children("ul");
		var messageTimer = null;
		var Top = parseInt(message.css("margin-top"),16);
		$(".messagebox").mouseover(function(){ clearInterval(messageTimer);});
		$(".messagebox").mouseout(function(){messageStart();});
		messageStart();
		
	function messageStart(){
		messageTimer = setInterval(function(){
		Top -= 30;
		if(Top>-200)
		{
			message.animate({marginTop:Top+"px"});
		}
		else
		{
			Top = 0;
			message.animate({marginTop:Top+"px"});	
			}
		},2000);
		}

Top存放ul標籤margin-top的INT值
setInterval實現定時執行，2000爲間隔毫秒，定時器內對Top減30px（ul標籤已規定了30px的行高），超出了規定值就歸零。animate實現動畫過渡效果，裏面指定需要過渡的屬性。
鼠標移入時通過clearInterval(messageTimer)直接清除該定時器
鼠標移出後，再調用函數就可以了