                        課程
                    
                        /前端開發
                        
                            /JavaScript
                        
                        /信息滾動效果制作

偶爾出現鼠標快速移開的時候就會滾動的很快，不知道是瀏覽器的問題還是bug，求解？

Soveme

2016-12-28

源自：信息滾動效果制作 2-1

關注問題我要回答

1135

操作

收起

3 回答

Soveme 提問者
2016-12-28

按著教程來寫的，不知道問題在哪？大神幫看看

0 回復有任何疑惑可以回復我~

收起回答

Soveme 提問者
2016-12-28

<!DOCTYPE?html>
<html>
????<head>
????????<meta?charset="utf-8"?/>
????????<title>滾動測試</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>文字無縫滾動</h1>
????????????<div??id="g1">
????????????????<ul?id="con1">
????????????????????<li>1、滾動的內容滾動的內容滾動的內容<span>2016-12-27</span></li>
????????????????????<li>2、滾動的內容滾動的內容滾動的內容<span>2016-12-27</span></li>
????????????????????<li>3、滾動的內容滾動的內容滾動的內容<span>2016-12-27</span></li>
????????????????????<li>4、滾動的內容滾動的內容滾動的內容<span>2016-12-27</span></li>
????????????????????<li>5、滾動的內容滾動的內容滾動的內容<span>2016-12-27</span></li>
????????????????????<li>6、滾動的內容滾動的內容滾動的內容<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>文字間歇性滾動</h1>
????????????<div??id="g2">
????????????????<ul?>
????????????????????<li>1、滾動的內容滾動的內容滾動的內容<span>2016-12-27</span></li>
????????????????????<li>2、滾動的內容滾動的內容滾動的內容<span>2016-12-27</span></li>
????????????????????<li>3、滾動的內容滾動的內容滾動的內容<span>2016-12-27</span></li>
????????????????????<li>4、滾動的內容滾動的內容滾動的內容<span>2016-12-27</span></li>
????????????????????<li>5、滾動的內容滾動的內容滾動的內容<span>2016-12-27</span></li>
????????????????????<li>6、滾動的內容滾動的內容滾動的內容<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>