javascript代码在鼠标悬停时停止文本滚动并在鼠标悬停时开始文本滚动答案

【问题标题】：javascript code to stop text scrolling on mouseover and to start text scrolling on mouseoutjavascript代码在鼠标悬停时停止文本滚动并在鼠标悬停时开始文本滚动
【发布时间】：2014-03-13 07:07:55
【问题描述】：

以下是文本滚动的javascript代码。能否请您扩展 javascript，以便当鼠标在文本上时滚动将停止，一旦鼠标没有文本，滚动将重新开始。提前致谢。

<html>
    <head>
        <style type="text/css">
        #scroll{
            position : absolute;
            white-space : nowrap;
            top : 0px;
            left : 200px;
        }
        #oScroll{
            margin : 0px;
            padding : 0px;
            position : relative;
            width : 200px;
            height : 20px;
            overflow : hidden;
        }
        </style>
        <script type="text/javascript">
        function scroll(oid,iid){
            this.oCont=document.getElementById(oid)
            this.ele=document.getElementById(iid)
            this.width=this.ele.clientWidth;
            this.n=this.oCont.clientWidth;
            this.move=function(){
                this.ele.style.left=this.n+"px"
                this.n--
                if(this.n<(-this.width)){this.n=this.oCont.clientWidth}
            }
        }
        var vScroll
        function setup(){
            vScroll=new scroll("oScroll","scroll");
            setInterval("vScroll.move()",20)
        }
        onload=function(){setup()}
        </script>
    </head>
    <body>
        <div id="oScroll">
            <div id="scroll">This is the scrolling text</div>
        </div>
    </body>
</html>

【问题讨论】：

你不能自己研究一下吗？然后，如果您的代码不起作用，您可以寻求帮助。
您是否正在寻找类似 marquee 之类的东西，它会在悬停时停止？

标签： javascript html css

【解决方案1】：

如果您正在寻找在悬停时停止的选取框效果

      <marquee behavior="scroll" direction="left" onmouseover="this.stop();" onmouseout="this.start();">Go on... hover over me!</marquee>

【讨论】：

【解决方案2】：

使用 clearInterval() 暂停文本并使用 setInterval() 再次恢复

<html>
<head>
    <style type="text/css">
        #scroll {
            position: absolute;
            white-space: nowrap;
            top: 0px;
            left: 200px;
        }

        #oScroll {
            margin: 0px;
            padding: 0px;
            position: relative;
            width: 200px;
            height: 20px;
            overflow: hidden;
        }
    </style>
    <script type="text/javascript">
        var intervalHandle = null;
        function pauseScroll() {
            clearInterval(intervalHandle);
        }
        function resumeScroll() {
            intervalHandle = setInterval("vScroll.move()", 20);
        }
        function scroll(oid, iid) {
            this.oCont = document.getElementById(oid)
            this.ele = document.getElementById(iid)
            this.width = this.ele.clientWidth;
            this.n = this.oCont.clientWidth;
            this.move = function () {
                this.ele.style.left = this.n + "px"
                this.n--
                if (this.n < (-this.width)) { this.n = this.oCont.clientWidth }
            }
        }
        var vScroll
        function setup() {
            vScroll = new scroll("oScroll", "scroll");
            intervalHandle = setInterval("vScroll.move()", 20)
        }
        onload = function () { setup() }
    </script>
</head>
<body>
    <div id="oScroll" onmouseover="pauseScroll()" onmouseout="resumeScroll()">
        <div id="scroll">This is the scrolling text</div>
    </div>
</body>
</html>

【讨论】：

【解决方案3】：

    <marquee behavior="scroll" direction="left" scrolldelay="1" scrollamount="1" onmouseover="this.setAttribute('scrollamount', 0, 0);" onmouseout="this.setAttribute('scrollamount', 1, 0);">

This is a test marquee to pause on hover 

onmouseover="this.setAttribute('scrollamount', 0, 0);" onmouseout="this.setAttribute('scrollamount', 1, 0);"

</marquee>

【讨论】：

不鼓励仅链接的答案。请添加链接中的一些内容（代码、解释等）

【解决方案4】：

我们还可以在元素上使用 javascript 事件来停止和重新启动选取框。

<html>
<title>Demo</title>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
</script>

<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
</head>

<marquee id='scroll_news' style="font-family:Book Antiqua; color: #FFFFFF" bgcolor="#000080" >


<div style="width:99%">

 <div style="float:left; width:100%;" onMouseOver="document.getElementById('scroll_news').stop();" onMouseOut="document.getElementById('scroll_news').start();">
   News 1 News 2 News 3 News 4 ....... More news here </div>

<div style="fload:right; width:100%;" onMouseOver="document.getElementById('scroll_news').stop();" onMouseOut="document.getElementById('scroll_news').start();">News 1 News 2 News 3 News 4 ....... More news here1 </div>

</div>

</marquee>
</body>
</html>

示例：http://www.delhincrjob.com/blog/marquee-for-scroll-text-and-stop-on-mouseover/

【讨论】：