jQuery to achieve the down text and text information scrolling effect

  • 2020-06-03 05:51:35
  • OfStack

WEB page needs to display the latest information of the website, such as the real-time data scrolling effect commonly seen in projects such as weibo dynamic information, residual ticket information and road condition monitoring. We can use jQuery to achieve the front-end information scrolling effect. In this article, we will show you how to use jQuery to achieve the scrolling effect of graphic information.

With sina weibo information scrolling as the background, html contains a number of microblog 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="#"> Kai-fu lee </a></h4> 
      <p> [Leadership 4 The realm of the realm 1 : Employees obey you because of your position; state 2 : Employees obey you because of your ability;  
 state 3 : Employees obey you because of your cultivation. They are grateful for your respect, cultivation and contribution to them.  
 state 4 : Employees love you for who you are, your charisma, your style, and your values. (turn) </p> 
    </li> 
    ... More content ... 
  </ul> 
</div> 

CSS

We use CSS to beautify the page layout. Here is the CSS code for the data scrolling area. Of course, you can modify css to customize the look and feel.


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 rolling function scrtime (), when the mouse towards rolling area, stop rolling (i.e., remove scrtime), when the mouse left to continue rolling, rolling scrtime () in the process, to make the final li timing insert element 1 li elements above, animate method is used to change the height of the li and transparent effect, to achieve animation load effect, and then every 3 seconds to perform regularly one roll.


$(function(){ 
  var scrtime; 
  $("#con").hover(function(){ 
     clearInterval(scrtime);// Stop rolling  
  },function(){ 
    scrtime = setInterval(function(){ 
        var ul = $("#con ul"); 
        var liHeight = ul.find("li:last").height();// Calculate the final 1 a li Height of element  
        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 realizes the effect of 1 content continuously scrolling down, and every 3 seconds the content will fade in from the top to complete the scrolling effect.

supplement

As for automatic image rounding, we can use jquery.corner.js, a plug-in that is flexible and compatible with all browsers. The plug-in download package is ready for you. You can also use css3 to control rounded corners.

This is the end of this article, I hope you enjoy it.


Related articles: