Maison > interface Web > js tutoriel > méthode js pour obtenir un effet de défilement des messages

méthode js pour obtenir un effet de défilement des messages

一个新手
Libérer: 2017-10-19 09:43:02
original
1392 Les gens l'ont consulté


   <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>
Copier après la connexion
.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;
}
Copier après la connexion

 

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal