Javascript代码用于在鼠标悬停时停止文本滚动，并在鼠标悬停时开始文本滚动

javascript code to stop text scrolling on mouseover and to start text scrolling on mouseout

本文关键字：悬停 文本 滚动 鼠标 开始 代码 用于 Javascript      更新时间：2023-09-26

下面是文本滚动的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 behavior="scroll" direction="left" onmouseover="this.stop();" onmouseout="this.start();">Go on... hover over me!</marquee>

使用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>

    <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>

我们也可以在元素上使用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/

相关文章：