Webseiten müssen die neuesten Informationen der Website anzeigen, z. B. Weibo-Updates, verbleibende Ticketinformationen, Verkehrsüberwachung und andere gängige Echtzeit-Daten-Scrolling-Effekte in Projekten. Wir können jQuery verwenden, um das Scrollen der Front-End-Informationen zu erreichen Wirkung. In diesem Artikel erklären wir anhand von Beispielen, wie Sie mit jQuery den Scrolleffekt von Grafik- und Textinformationen erzielen.
Wir verwenden das Scrollen von Sina-Weibo-Informationen als Hintergrund. Der HTML-Code enthält mehrere Weibo-Grafik- und Textinformationen. Die Struktur ist wie folgt:
<div id="con">
<ul>
<li> <a href="#" class="face"><img src="http://tp3.sinaimg.cn/1197161814/
50/1290146312/1" /></a>
<h4><a href="#">李开复</a></h4>
<p>【领导力的四个境界】境界一：员工因为你的职位而服从你；境界二：员工因为你的能力而服从你；
境界三：员工因为你的培养而服从你，他们感恩于你对他们的尊重、培养和付出；
境界四：员工因为你的为人、魅力、风范、价值观而拥戴你。（转）</p>
</li>
...更多内容...
</ul>
</div>
CSS
Wir verwenden CSS, um das Seitenlayout zu verschönern. Im Folgenden finden Sie den CSS-Code für den Daten-Scrollbereich. Natürlich können Sie das CSS ändern, um verschiedene Erscheinungsbildeffekte anzupassen.
ul,li{ list-style-type:none;}
#con{ width:760px; height:400px; margin:30px auto 10px auto; position:relative;
border:1px #d3d3d3 solid; background-color:#fff; overflow:hidden;}
#con ul{ position:absolute; margin:10px; top:0; left:0; padding:0;}
#con ul li{ width:100%; border-bottom:1px #ccc dotted; padding:20px 0; overflow:hidden; }
#con ul li a.face{ float:left; width:50px; height:50px; margin-top:2px; padding:2px;}
#con ul li h4{height:22px; line-height:22px; margin-left:60px}
#con ul li p{ margin-left:60px;line-height:22px; }
jQuery
Prinzip: Wir definieren eine Scrollfunktion scrtime() Wenn die Maus in den Scrollbereich gleitet, stoppt sie den Scrollvorgang (d. h., sie löscht den Scrollvorgang, wenn sie scrtime verlässt). ), das letzte Li-Element ist Fügen Sie regelmäßig über dem ersten Li-Element ein, ändern Sie die Höhe und Transparenz des Li mit der Animationsmethode, um den Animationsladeeffekt zu erzielen, und führen Sie dann alle 3 Sekunden einen Bildlauf durch.
$(function(){
var scrtime;
$("#con").hover(function(){
clearInterval(scrtime);//停止滚动
},function(){
scrtime = setInterval(function(){
var ul = $("#con ul");
var liHeight = ul.find("li:last").height();//计算最后一个li元素的高度
ul.animate({marginTop : liHeight+40 +"px"},1000,function(){
ul.find("li:last").prependTo(ul)
ul.find("li:first").hide();
ul.css({marginTop:0});
ul.find("li:first").fadeIn(1000);
});
},3000);
}).trigger("mouseleave");
});
Der obige Code implementiert den Effekt eines weiter nach unten scrollenden Inhalts. Der Inhalt wird alle 3 Sekunden von oben eingeblendet, um den Inhaltsscrolleffekt abzuschließen.
Ergänzung
Für die automatische Eckenrundung von Bildern können wir das Plug-in jquery.corner.js verwenden, das flexibel einsetzbar und mit verschiedenen Browsern kompatibel ist. Dieses Plug-in-Download-Paket wurde für Sie vorbereitet. Natürlich können Sie auch CSS3 verwenden, um abgerundete Ecken zu steuern.
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er gefällt Ihnen allen.
