Heim > Artikel > Web-Frontend > js-Methode, um einen Nachrichten-Scroll-Effekt zu erzielen
<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 = $('#marquee li').eq(0).outerHeight(); //$('#marquee').css('height',liHeight * $('#marquee li').length * 2); setTimeout("startmarquee("+ liHeight +", 50, 500, 'marquee')", 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>
.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; }
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!