The downward scrolling effect of graphic and text information implemented by jQuery_jquery

WEB pages need to display the latest information of the website, such as Weibo updates, remaining ticket information, traffic monitoring and other common real-time data scrolling effects in projects. We can use jQuery to achieve the front-end information scrolling effect. In this article, we will use examples to explain how to use jQuery to achieve the scrolling effect of graphic and text information.

We use Sina Weibo information scrolling as the background. The html contains multiple Weibo graphic and text information. The structure is as follows:

<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

We use CSS to beautify the page layout. The following is the CSS code for the data scrolling area. Of course, you can modify the CSS to customize different appearance effects.

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

Principle: We define a scrolling function scrtime(). When the mouse slides to the scrolling area, it stops scrolling (that is, clears scrtime). When the mouse leaves, it continues scrolling. During the scrolling process of scrtime(), the last li element is Insert regularly above the first li element, use the animate method to change the height and transparency of the li to achieve the animation loading effect, and then perform scrolling every 3 seconds.

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

The above code implements the effect of a content that continues to scroll downwards. The content will fade in from the top every 3 seconds to complete the content scrolling effect.

Supplement

Regarding automatic corner rounding of images, we can use the jquery.corner.js plug-in, which is flexible to use and compatible with various browsers. This plug-in download package has been prepared for you. Of course you can also use css3 to control rounded corners.

The above is the entire content of this article, I hope you all like it.