javascript代码停止文本滚动在鼠标停留和到开始文本滚动在鼠标离开

shstlldc 于 2023-01-11 发布在 Java

关注(0)|答案(4)|浏览(229)

下面是文本滚动的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>

JavaScript

来源：https://stackoverflow.com/questions/22371494/javascript-code-to-stop-text-scrolling-on-mouseover-and-to-start-text-scrolling

4条答案

按热度按时间

iezvtpos1#

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

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

赞(0）回复(0）举报 2023-01-11

fcwjkofz2#

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

赞(0）回复(0）举报 2023-01-11

wecizke33#

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

赞(0）回复(0）举报 2023-01-11

piok6c0g4#

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

赞(0）回复(0）举报 2023-01-11

我来回答

javascript代码停止文本滚动在鼠标停留和到开始文本滚动在鼠标离开

4条答案

相关问题

热门标签

最新问答