快捷導(dǎo)航

jQuery實現(xiàn)的向下圖文信息滾動效果

更新時間：2015年05月03日 17:56:59 投稿：hebedich

jquery實現(xiàn)的圖文滾動效果,圖文內(nèi)容經(jīng)過指定的間隔時間自動向下滾動顯示,效果非常酷。有需要的小伙伴可以參考下。

WEB頁面需要展示網(wǎng)站最新信息，如微博動態(tài)、余票信息、路況監(jiān)控等項目中常見的實時數(shù)據(jù)滾動效果，我們可以用jQuery來實現(xiàn)前端信息滾動效果。本文我們將結(jié)合實例為大家講解如何使用jQuery來實現(xiàn)圖文信息滾動效果。

我們以新浪微博信息滾動為背景，html中包含了多條微博圖文信息，結(jié)構(gòu)如下：

<div id="con"> 
  <ul> 
    <li> <a href="#" class="face"><img src="http://tp3.sinaimg.cn/1197161814/ 
50/1290146312/1" /></a> 
      <h4><a href="#">李開復(fù)</a></h4> 
      <p>【領(lǐng)導(dǎo)力的四個境界】境界一：員工因為你的職位而服從你；境界二：員工因為你的能力而服從你； 
境界三：員工因為你的培養(yǎng)而服從你，他們感恩于你對他們的尊重、培養(yǎng)和付出； 
境界四：員工因為你的為人、魅力、風(fēng)范、價值觀而擁戴你。（轉(zhuǎn)）</p> 
    </li> 
    ...更多內(nèi)容... 
  </ul> 
</div>

CSS

我們用CSS來美化頁面布局，以下是數(shù)據(jù)滾動區(qū)的CSS代碼，當(dāng)然大家可以修改css定制不同的外觀效果。

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

原理：我們定義一個滾動函數(shù)scrtime()，當(dāng)鼠標(biāo)滑向滾動區(qū)域時，停止?jié)L動（即清除scrtime），當(dāng)鼠標(biāo)離開時繼續(xù)滾動，滾動scrtime()的過程中，讓最后的li元素定時插入第一個li元素的上方，采用animate方法來改變li的高度和透明效果，實現(xiàn)動畫加載效果，然后定時每隔3秒鐘執(zhí)行一次滾動。

$(function(){ 
  var scrtime; 
  $("#con").hover(function(){ 
     clearInterval(scrtime);//停止?jié)L動 
  },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"); 
});

以上代碼實現(xiàn)了一個內(nèi)容持續(xù)向下滾動的效果，每隔3秒內(nèi)容將從上部淡入，完成內(nèi)容滾動效果。

補充

關(guān)于圖片自動圓角處理，我們可以使用jquery.corner.js這個插件，使用靈活，兼容各瀏覽器，這個插件下載包里已經(jīng)為您準(zhǔn)備好了。當(dāng)然你也可以使用css3來控制圓角。

以上所述就是本文的全部內(nèi)容了，希望大家能夠喜歡。

您可能感興趣的文章: