jQuery實現的向下推送圖文信息滾動效果

HTML

咱們以新浪微博信息滾動爲背景，html中包含了多條微博圖文信息，結構以下：

<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定製不一樣的外觀效果

ul,li{ list-style-type:none;} 
#con{ width:760px; height:400px; margin:30px auto 10px auto; position:relative;  
border:1px #d3d3d3 solid;  padding: 0px; color: green;">#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秒鐘執行一次滾動。

$(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秒內容將從上部淡入，完成內容滾動效果。

補充

1.關於圖片自動圓角處理，咱們能夠使用jquery.corner.js這個插件，使用靈活，兼容各瀏覽器，這個插件下載包裏已經爲您準備好了。固然你也能夠使用css3來控制圓角。