                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /信息滚动效果制作

鼠标移入移出为什么鼠标在box里面移动的时间文字会滚动？

<script type="text/javascript">

window.onload=function(){

var timer1=null;

timer1=setTimeout('startMove()',2000);

};

var area=document.getElementById('box');

//var con1=document.getElementById('con1');

//var con2=document.getElementById('con2');

var iLiHeight=24;

var timer=null;

area.scrollTop=0;

area.innerHTML+=area.innerHTML;

var speed=50;

var delay=2000;

function startMove(){

area.scrollTop++;

timer=setInterval('scrollUp()',speed);

}

function scrollUp(){

if(area.scrollTop%iLiHeight==0){

clearInterval(timer);

timer1=setTimeout('startMove()',delay);

}else{

area.scrollTop++;

if(area.scrollTop>=area.scrollHeight/2)

{

area.scrollTop=0;

}

}

}

area.onmouseover=function(){

clearInterval(timer);

clearInterval(timer1);

}

area.onmouseout=function(){

clearInterval(timer);

clearInterval(timer1);

startMove();

}

</script>

慕粉18813290620

2016-08-04

源自：信息滚动效果制作 3-3

关注问题我要回答

1026

操作

收起

4 回答

慕粉3698897 回答被采纳 +3 积分
2016-08-05

area.onmouseover=function(){

clearInterval(timer);

clearTimeout(timer1);

}

area.onmouseout=function(){

clearInterval(timer);

clearTimeout(timer1);

timer = setInterval("scrollUp()",speed);

}

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

#1

慕粉18813290620 提问者

鼠标在盒子里面不断移动，文字依然会动

2016-08-10 回复有任何疑惑可以回复我~

#2

如果我不清除setTimeout，鼠标移出时就有问题，滚动的速度会加快。这是为什么啊

2016-08-16 回复有任何疑惑可以回复我~

tanglj22
2016-08-16

如果我不清除setTimeout，鼠标移出时就有问题，滚动的速度会加快。

这是为什么啊

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

慕粉3698897
2016-08-10

你看看是不是js以外的地方有问题，我的全部代码是这样的，鼠标在盒子里面移动，文字是一直静止的。我用的是谷歌浏览器，不知道和这个有没有关系。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<style>
    *{margin: 0;
        padding:0}
    .content{
        width: 400px;
        margin:100px auto;
        border: 5px solid rgba(0,0,0,0.4);
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 2px 0 5px rgba(0,0,0,0.3);

    }
    #head{
        width: 100%;

        background-image:-webkit-gradient(linear, left top,left bottom,color-stop(0,#f05e6f),color-stop(1,#c9394a));
        color: #FFF;
        height:80px;
        font-weight: 500;
        font-family: "微软雅黑";
    }
    #moocTitle{
        padding-left: 20px;
        font-size: 24px;
        line-height: 80px;
        margin:0;
        overflow: hidden;
    }
    #head a,#head a:hover,#head a:link{
        text-decoration: none;
        color:#fff;
        font-size: 18px;
        float: right;
        padding:15px;
    }
    #box{
        margin: 10px 30px;
        height:144px;
        overflow: hidden;
    }
    ul,li{
        list-style: none;
        width:100%;
        padding:0;
        display: block;
    }
    li{
        font-size: 13px;
        height:24px ;
        line-height: 24px;
        width:100%;
    }
    li a,li a:hover,li a:link{
        text-decoration: none;
        color:#5e5e5e;
        float:left;
        width:180px;
        height:24px ;
        overflow: hidden;
        display: block;
    }
    li span{
        float: right;
        color:#999;
    }
</style>
</head>
<body>

<div class="content">
    <div id="head"><h3 id="moocTitle">最新课程<a href="#" target="_self">更多>></a> </h3></div>
    <div id="box">
        <ul id="con1">
            <li><a href="#">1.学会html5 绝对的屌丝逆袭（案例）</a><span>2013-10-09</span></li>
            <li><a href="#">2.tab页面切换效果（案例）</a><span>2013-10-09</span></li>
            <li><a href="#">3.圆角水晶按钮制作（案例）</a><span>2013-10-21</span></li>
            <li><a href="#">4.HTML+CSS基础课程(系列)</a><span>2013-11-01</span></li>
            <li><a href="#">5.分页页码制作（案例）</a><span>2013-11-06</span></li>
            <li><a href="#">6.导航条菜单的制作（案例）</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.如何实现“新手引导”效果</a><span>2013-12-06</span></li>
        </ul>
        <!--<ul id="con2">-->
        <!--</ul>-->
    </div>
</div>

<script type="text/javascript">
    window.onload=function(){
        var timer1=null;
        timer1=setTimeout('startMove()',2000);
    };
    var area=document.getElementById('box');
    //var con1=document.getElementById('con1');
    //var con2=document.getElementById('con2');
    var iLiHeight=24;
    var timer=null;
    area.scrollTop=0;
    area.innerHTML+=area.innerHTML;
    var speed=50;
    var delay=2000;
    function startMove(){
        area.scrollTop++;
        timer=setInterval('scrollUp()',speed);
    }
    function scrollUp(){
        if(area.scrollTop%iLiHeight==0){
            clearInterval(timer);
            timer1=setTimeout('startMove()',delay);
        }else{
            area.scrollTop++;
            if(area.scrollTop>=area.scrollHeight/2)
            {
                area.scrollTop=0;
            }
        }
    }
    area.onmouseover=function(){
        clearInterval(timer);
        clearTimeout(timer1);

    };
    area.onmouseout=function(){
        clearInterval(timer);
        clearTimeout(timer1);
        timer = setInterval("scrollUp()",speed);

    };
</script>
</body>

</html>

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

喝牛奶对身体好
2016-08-04

timer1变量赋值的是setTimeout函数，应该用clearTimeout

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

#1

慕粉18813290620 提问者

依然解决不了

2016-08-10 回复有任何疑惑可以回复我~

举报

0/150

提交

取消

信息滚动效果制作

参与学习 47753 人
解答问题 321 个

萌妹子带您快速学习滚动效果，掌握无缝滚动和歇间性滚动的制作方法

鼠标移入移出为什么鼠标在box里面移动的时间文字会滚动？

我要回答关注问题

意见反馈帮助中心 APP下载