欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

在鼠標滑過時停止文本滾動和在鼠標離開時開始文本滾動的javascript代碼

CSS
江奕云2年前8瀏覽0評論

下面是文本滾動的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>

我們還可以在元素上使用javascript事件來停止和重啟marquee。

<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-mouse over/