DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript綜合知識 >> jQuery實現的向下圖文信息滾動效果
jQuery實現的向下圖文信息滾動效果
編輯:JavaScript綜合知識     

   jquery實現的圖文滾動效果,圖文內容經過指定的間隔時間自動向下滾動顯示,效果非常酷。有需要的小伙伴可以參考下。

  WEB頁面需要展示網站最新信息,如微博動態、余票信息、路況監控等項目中常見的實時數據滾動效果,我們可以用jQuery來實現前端信息滾動效果。本文我們將結合實例為大家講解如何使用jQuery來實現圖文信息滾動效果。

  我們以新浪微博信息滾動為背景,html中包含了多條微博圖文信息,結構如下:

  ?

1 2 3 4 5 6 7 8 9 10 11 12 <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

  我們用CSS來美化頁面布局,以下是數據滾動區的CSS代碼,當然大家可以修改css定制不同的外觀效果。

  ?

1 2 3 4 5 6 7 8 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

  原理:我們定義一個滾動函數scrtime(),當鼠標滑向滾動區域時,停止滾動(即清除scrtime),當鼠標離開時繼續滾動,滾動scrtime()的過程中,讓最後的li元素定時插入第一個li元素的上方,采用animate方法來改變li的高度和透明效果,實現動畫加載效果,然後定時每隔3秒鐘執行一次滾動。

  ?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 $(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");  });

  以上代碼實現了一個內容持續向下滾動的效果,每隔3秒內容將從上部淡入,完成內容滾動效果。

  補充

  關於圖片自動圓角處理,我們可以使用jquery.corner.js這個插件,使用靈活,兼容各浏覽器,這個插件下載包裡已經為您准備好了。當然你也可以使用css3來控制圓角。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved