Der von jQuery_jquery implementierte Abwärtsscrolleffekt von Grafik- und Textinformationen

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.