原課程中最后一節(jié)，老師沒有加鼠標(biāo)懸停事件，我想自己加，于是加了下面兩段代碼。area.onmouseover = function(){ clearInterval(time);}area.onmouseout = function(){ time=setInterval("scrollUp()",speed);}但是會(huì)出現(xiàn)bug，就是鼠標(biāo)快速進(jìn)出area區(qū)域，滾動(dòng)會(huì)滾得越來(lái)越快，請(qǐng)問怎么解決？是什么問題？源代碼如下：<!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>新聞無(wú)縫向上無(wú)縫滾動(dòng)</title> <style> body { font-size: 12px; line-height: 24px; text-algin: center; ? ? ? ?/* 頁(yè)面內(nèi)容居中 */ } * { margin: 0px; padding: 0px; ? ? ? ? ? ?/* ?去掉所有標(biāo)簽的marign和padding的值 ?*/ } ul { list-style: none; ? ? ? ? ? /* ?去掉ul標(biāo)簽?zāi)J(rèn)的點(diǎn)樣式 ?*/ } a img { border: none; ? ? ? ?/* ?超鏈接下，圖片的邊框 ?*/ } a { color: #333; text-decoration: none; ? ? /* 超鏈接樣式 */ } a:hover { color: #ff0000; } #mooc { width: 399px; border: 5px solid #ababab; -moz-border-radius: 15px; ? ? ?/* Gecko browsers */ -webkit-border-radius: 15px; ? /* Webkit browsers */ border-radius: 15px; box-shadow: 2px 2px 10px #ababab; margin: 50px auto 0; text-align: left; ? ? ? ? ? ? ? /* 讓新聞內(nèi)容靠左 */ } /* ?頭部樣式 */ #moocTitle { height: 62px; overflow: hidden; ?/* 這個(gè)一定要加上，內(nèi)容超出的部分要隱藏，免得撐高頭部 */ font-size: 26px; line-height: 62px; padding-left: 30px; background-image: -moz-linear-gradient(top, #f05e6f, #c9394a); /* Firefox */ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f05e6f), color-stop(1, #c9394a)); /* Saf4+, Chrome */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8fa1ff', endColorstr='#f05e6f', GradientType='0'); /* IE*/ border: 1px solid ##f05e6f; -moz-border-radius: 8px 8px 0 0; ? ? ?/* Gecko browsers */ -webkit-border-radius: 8px 8px 0 0; ? /* Webkit browsers */ border-radius: 8px 8px 0 0; color: #fff; position: relative; } #moocTitle a { position: absolute; right: 10px; bottom: 10px; display: inline; color: #fff; font-size: 12px; line-height: 24px; } /* ?底部樣式 */ #moocBot { width: 399px; height: 10px; overflow: hidden; ? ? /* 這個(gè)一定要加上，內(nèi)容超出的部分要隱藏，免得撐高底部結(jié)構(gòu) */ } /* ?中間樣式 */ #moocBox { height: 144px; width: 335px; margin-left: 25px; margin-top: 10px; overflow: hidden; ? ?/* ?這個(gè)一定要加，超出的內(nèi)容部分要隱藏，免得撐高中間部分 */ } #mooc ul li { height: 24px; } #mooc ul li a { width: 180px; float: left; display: block; overflow: hidden; text-indent: 15px; height: 24px; } #mooc ul li span { float: right; color: #999; } </style></head><body> <!-- ?慕課網(wǎng)課程公告開始 --> <div ?id="mooc">? <!-- ?頭部 --> <div ?id="moocTitle">慕課網(wǎng)最新課程<a href="#" target="_self">更多>></a> </div> <!-- ?頭部結(jié)束 -->? <!-- ?中間 --> <div ?id="moocBox"> <ul> <li><a href="#">1.學(xué)會(huì)html5 絕對(duì)的屌絲逆襲（案例）</a><span>2013-09-18</span></li> <li><a href="#">2.tab頁(yè)面切換效果（案例）</a><span>2013-10-09</span></li> <li><a href="#">3.圓角水晶按鈕制作（案例）</a><span>2013-10-21</span></li> <li><a href="#">4.HTML+CSS基礎(chǔ)課程(系列)</a><span>2013-11-01</span></li> <li><a href="#">5.分頁(yè)頁(yè)碼制作（案例）</a><span>2013-11-06</span></li> <li><a href="#">6.導(dǎo)航條菜單的制作（案例）</a><span>2013-11-08</span></li> <li><a href="#">7.信息列表制作(案例)</a><span>2013-11-15</span></li> <li><a href="#">8.下拉菜單制作(案例)</a><span>2013-11-22</span></li> <li><a href="#">9.如何實(shí)現(xiàn)“新手引導(dǎo)”效果</a><span>2013-12-06</span></li> </ul> </div> <!-- ?中間結(jié)束 -->? <!-- ?底部 --> <div ?id ="moocBot"> </div> <!-- ?底部結(jié)束 -->? </div> <!-- ?慕課網(wǎng)課程公告結(jié)束 -->? <script type="text/javascript"> var area = document.getElementById('moocBox');?var iliHeight = 24;//單行滾動(dòng)的高度?var speed = 50;//滾動(dòng)的速度?var time;?var delay= 2000;?area.scrollTop=0;?area.innerHTML+=area.innerHTML;//克隆一份一樣的內(nèi)容?function startScroll(){? time=setInterval("scrollUp()",speed);? area.scrollTop++;?}?function scrollUp(){? if(area.scrollTop % iliHeight==0){? clearInterval(time);? setTimeout(startScroll,delay);? }else{? area.scrollTop++;? if(area.scrollTop >= area.scrollHeight/2){? area.scrollTop =0;? }? }?}area.onmouseover = function(){ clearInterval(time);}area.onmouseout = function(){ time=setInterval("scrollUp()",speed);}setTimeout(startScroll,delay);</script></body></html>
關(guān)于信息間歇性滾動(dòng)
Taki丶
2015-11-20 10:44:33
