L'effet de défilement vers le bas des informations graphiques et textuelles implémenté par jQuery_jquery

Les pages WEB doivent afficher les dernières informations du site Web, telles que les mises à jour de Weibo, les informations restantes sur les billets, la surveillance du trafic et d'autres effets courants de défilement des données en temps réel dans les projets. Nous pouvons utiliser jQuery pour réaliser le défilement des informations frontales. effet. Dans cet article, nous utiliserons des exemples pour expliquer comment utiliser jQuery pour obtenir l'effet de défilement des informations graphiques et textuelles.

Nous utilisons le défilement des informations Sina Weibo comme arrière-plan. Le code HTML contient plusieurs informations graphiques et textuelles Weibo. La structure est la suivante :

<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

Nous utilisons CSS pour embellir la mise en page. Voici le code CSS pour la zone de défilement des données. Bien sûr, vous pouvez modifier le CSS pour personnaliser différents effets d'apparence.

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

Principe : nous définissons une fonction de défilement scrtime(). Lorsque la souris glisse vers la zone de défilement, elle arrête le défilement (c'est-à-dire qu'elle efface scrtime. Lorsque la souris quitte, elle continue de défiler pendant le processus de défilement de scrtime(). ), le dernier élément li est inséré régulièrement au-dessus du premier élément li, utilisez la méthode d'animation pour modifier la hauteur et la transparence du li afin d'obtenir l'effet de chargement de l'animation, puis effectuez un défilement toutes les 3 secondes.

$(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"); 
}); 

Le code ci-dessus implémente l'effet d'un contenu qui continue de défiler vers le bas. Le contenu apparaîtra en fondu depuis le haut toutes les 3 secondes pour compléter l'effet de défilement du contenu.

Supplément

Concernant l'arrondi automatique des coins des images, nous pouvons utiliser le plug-in jquery.corner.js, qui est flexible à utiliser et compatible avec différents navigateurs. Ce package de téléchargement de plug-in a été préparé pour vous. Bien sûr, vous pouvez également utiliser CSS3 pour contrôler les coins arrondis.

Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.