Heim > Web-Frontend > js-Tutorial > js-Methode, um einen Nachrichten-Scroll-Effekt zu erzielen

js-Methode, um einen Nachrichten-Scroll-Effekt zu erzielen

一个新手
Freigeben: 2017-10-19 09:43:02
Original
1387 Leute haben es durchsucht


   <div class="inform" style="">
            <div style="height:35px; overflow:hidden;">
                <ul id="marquee" style="height:35px;">
            <li><a href="javascript:void(0)" style="display:inline-block;overflow: hidden; white-space: nowrap;text-overflow:ellipsis; width: 100%;">****已预订****</a></li>
             <li><a href="javascript:void(0)" style="display:inline-block;overflow: hidden; white-space: nowrap;text-overflow:ellipsis; width: 100%;">
                                ****已预订****</a></li>
          </ul>
            </div>

            <script type="text/javascript">
                var liHeight = $(&#39;#marquee li&#39;).eq(0).outerHeight();
                //$(&#39;#marquee&#39;).css(&#39;height&#39;,liHeight * $(&#39;#marquee li&#39;).length * 2);
                setTimeout("startmarquee("+ liHeight +", 50, 500, &#39;marquee&#39;)", 500);
                function startmarquee(lh,speed,delay,id) {
                    var t;
                    var p = false;
                    var o = document.getElementById(id);
                    o.innerHTML += o.innerHTML;
                    o.onmouseover = function() {
                        p = true;
                    }
                    o.onmouseout = function() {
                        p = false;
                    }
                    o.scrollTop = 0;

                    function start() {
                        t = setInterval(scrolling,speed);
                        if(!p) o.scrollTop += 1;
                    }

                    function scrolling() {
                        if(o.scrollTop%lh != 0) {
                            o.scrollTop += 1;
                            if(o.scrollTop >= o.scrollHeight / 2) o.scrollTop = 0;
                        } else {
                            clearInterval(t);
                            setTimeout(start,delay);
                        }
                    }
                    setTimeout(start,delay);
                }
            </script>
        </div>
Nach dem Login kopieren
.inform {
    padding: 1px;
    margin: 10px auto;
    /*position: fixed; bottom:80px;left: 50%;*/ width: 6.8rem;font-size: 12px;/*margin-left: -3.4rem;*/ border: none; background-color:rgba(238,115,115,0.3); border-radius: 10px;
}
.inform h2 {
    background: none repeat scroll 0 0 #015198;
    font-weight: normal;
    line-height: 30px;
}
.inform h2 span {
    color: #FFFFFF;
    font-size: 16px;
    padding-left: 10px;
}
.inform h2 a {
    color: #FFFFFF;
    float: right;
    font-size: 14px;
    padding-right: 3px;
}
.inform ul {
    height: 170px;
    margin-top: 7px;
    overflow: hidden;
}
.inform ul li {
    line-height: 26px;
    padding-left: 12px;
}
Nach dem Login kopieren

 

Das obige ist der detaillierte Inhalt vonjs-Methode, um einen Nachrichten-Scroll-Effekt zu erzielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage