                        課程
                    
                        /前端開(kāi)發(fā)
                        
                            /JavaScript
                        
                        /信息滾動(dòng)效果制作

偶爾出現(xiàn)鼠標(biāo)快速移開(kāi)的時(shí)候就會(huì)滾動(dòng)的很快，不知道是瀏覽器的問(wèn)題還是bug，求解？

Soveme

2016-12-28

源自：信息滾動(dòng)效果制作 2-1

關(guān)注問(wèn)題我要回答

1134

操作

收起

3 回答

Soveme 提問(wèn)者
2016-12-28

按著教程來(lái)寫(xiě)的，不知道問(wèn)題在哪？大神幫看看

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

Soveme 提問(wèn)者
2016-12-28

<!DOCTYPE?html>
<html>
????<head>
????????<meta?charset="utf-8"?/>
????????<title>滾動(dòng)測(cè)試</title>
????????<style>
????????????li{
????????????????list-style:?none;
????????????}
????????????#g1,#g2{
????????????????width:?450px;
????????????????height:?200px;
????????????????overflow:?hidden;
????????????????border:?1px?solid?#CCCCCC;
????????????
????????????}
????????????#g1?ul,#g2?ul{
????????????????display:?block;
????????????????margin:?0;
????????????????width:?430px;
????????????????padding-left:?10px;
????????????}
????????????#g1?li,#g2?li{
????????????????height:?40px;
????????????????border-bottom:?1px?dotted?#ccc;
????????????????line-height:?35px;
????????????}
????????????#g1?span,#g2?span{
????????????????color:?#ff5203;
????????????????margin-left:?50px;
????????????}
????????</style>
????</head>
????<body>
????????
????????????<h1>文字無(wú)縫滾動(dòng)</h1>
????????????<div??id="g1">
????????????????<ul?id="con1">
????????????????????<li>1、滾動(dòng)的內(nèi)容滾動(dòng)的內(nèi)容滾動(dòng)的內(nèi)容<span>2016-12-27</span></li>
????????????????????<li>2、滾動(dòng)的內(nèi)容滾動(dòng)的內(nèi)容滾動(dòng)的內(nèi)容<span>2016-12-27</span></li>
????????????????????<li>3、滾動(dòng)的內(nèi)容滾動(dòng)的內(nèi)容滾動(dòng)的內(nèi)容<span>2016-12-27</span></li>
????????????????????<li>4、滾動(dòng)的內(nèi)容滾動(dòng)的內(nèi)容滾動(dòng)的內(nèi)容<span>2016-12-27</span></li>
????????????????????<li>5、滾動(dòng)的內(nèi)容滾動(dòng)的內(nèi)容滾動(dòng)的內(nèi)容<span>2016-12-27</span></li>
????????????????????<li>6、滾動(dòng)的內(nèi)容滾動(dòng)的內(nèi)容滾動(dòng)的內(nèi)容<span>2016-12-27</span></li>
????????????????????
????????????????</ul>
????????????????<ul?id="con2"></ul>
????????????</div>
????????????
????????????<script>
????????????????var?con=document.getElementById('g1');
????????????????var?con1=document.getElementById('con1');
????????????????var?con2=?document.getElementById('con2');
????????????????con2.innerHTML?=?con1.innerHTML;
????????????????function?scrollUp(){
????????????????????if(con.scrollTop?>=?con1.offsetHeight){
????????????????????con.scrollTop?=?0;
????????????????}else{
????????????????????con.scrollTop++;
????????????????}
????????????????
????????????????}
????????????????var?time=50;
????????????????myScroll=setInterval('scrollUp()',time);
????????????????con.onmouseover?=?function(){
?????????????????????????clearInterval(myScroll);
????????????????????????}
????????????????con.onmouseout?=?function(){
?????????????????????????myScroll?=?setInterval("scrollUp()",time);
????????????????????????}
????????????</script>
????????????
????????????
????????????<h1>文字間歇性滾動(dòng)</h1>
????????????<div??id="g2">
????????????????<ul?>
????????????????????<li>1、滾動(dòng)的內(nèi)容滾動(dòng)的內(nèi)容滾動(dòng)的內(nèi)容<span>2016-12-27</span></li>
????????????????????<li>2、滾動(dòng)的內(nèi)容滾動(dòng)的內(nèi)容滾動(dòng)的內(nèi)容<span>2016-12-27</span></li>
????????????????????<li>3、滾動(dòng)的內(nèi)容滾動(dòng)的內(nèi)容滾動(dòng)的內(nèi)容<span>2016-12-27</span></li>
????????????????????<li>4、滾動(dòng)的內(nèi)容滾動(dòng)的內(nèi)容滾動(dòng)的內(nèi)容<span>2016-12-27</span></li>
????????????????????<li>5、滾動(dòng)的內(nèi)容滾動(dòng)的內(nèi)容滾動(dòng)的內(nèi)容<span>2016-12-27</span></li>
????????????????????<li>6、滾動(dòng)的內(nèi)容滾動(dòng)的內(nèi)容滾動(dòng)的內(nèi)容<span>2016-12-27</span></li>
????????????????????
????????????????</ul>
????????????????
????????????????<script>
????????????????????var?are=document.getElementById('g2');
????????????????????var?iLiHeight=41;
????????????????????are.innerHTML+=are.innerHTML;
????????????????????are.scrollTop=0;
????????????????????var?speed=50;
????????????????????var?delay=2000;
????????????????????var?time;
????????????????????function?starMove(){
????????????????????????time?=?setInterval('scrollUp2()',speed);
????????????????????????are.scrollTop++;
????????????????????????
????????????????????}
????????????????????function?scrollUp2(){
????????????????????????if(are.scrollTop?%?iLiHeight?==?0?){
????????????????????????????clearInterval(time);
????????????????????????????setTimeout(starMove,delay);
????????????????????????}else{
????????????????????????????are.scrollTop++;
????????????????????????????if(are.scrollTop>=?are.scrollHeight/2){
????????????????????????????????are.scrollTop=0;
????????????????????????????}
????????????????????????}
????????????????????}
????????????????????setTimeout(starMove,delay);
????????????????</script>
????????????????
????????????????
????????????????
????????????????
????????????</div>
????</body>
</html>