网页中窗口文字定时滚动

网页中窗口文字定时滚动

常见于购物网站、资讯网站中
前段时间看了某购物网站 参考其结构写的
实现效果：文字定时向上滚动，至最底层时返回到上层，鼠标移入时暂停滚动

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)直接清除该定时器
鼠标移出后，再调用函数就可以了