Kesan tatal ke bawah bagi maklumat grafik dan teks yang dilaksanakan oleh jQuery_jquery

Halaman WEB perlu memaparkan maklumat terkini tapak web, seperti kemas kini Weibo, baki maklumat tiket, pemantauan trafik dan kesan penatalan data masa nyata biasa yang lain dalam projek Kami boleh menggunakan jQuery untuk mencapai penatalan maklumat bahagian hadapan kesan. Dalam artikel ini, kami akan menggunakan contoh untuk menerangkan cara menggunakan jQuery untuk mencapai kesan tatal maklumat grafik dan teks.

Kami menggunakan tatal maklumat Sina Weibo sebagai latar belakang html mengandungi pelbagai maklumat grafik dan teks Weibo adalah seperti berikut:

<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

Kami menggunakan CSS untuk mencantikkan reka letak halaman Berikut ialah kod CSS untuk kawasan tatal data Sudah tentu, anda boleh mengubah suai CSS untuk menyesuaikan kesan penampilan yang berbeza.

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

Prinsip: Kami mentakrifkan fungsi tatal scrtime() Apabila tetikus meluncur ke kawasan tatal, ia berhenti menatal (iaitu, mengosongkan scrtime, ia meneruskan proses tatal). ), elemen li terakhir ialah Sisipkan secara tetap di atas elemen li pertama, gunakan kaedah animasi untuk menukar ketinggian dan ketelusan li untuk mencapai kesan pemuatan animasi, dan kemudian lakukan tatal setiap 3 saat.

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

Kod di atas melaksanakan kesan kandungan yang terus menatal ke bawah Kandungan akan pudar dari atas setiap 3 saat untuk melengkapkan kesan menatal kandungan.

Suplemen

Mengenai pembundaran sudut automatik imej, kami boleh menggunakan pemalam jquery.corner.js, yang fleksibel untuk digunakan dan serasi dengan pelbagai pelayar Pakej muat turun pemalam ini telah disediakan untuk anda. Sudah tentu anda juga boleh menggunakan css3 untuk mengawal sudut bulat.

Di atas adalah keseluruhan kandungan artikel ini, saya harap anda semua menyukainya.