The scrolling effect of the downward graphic information implemented by jquery

jquery implementation of the graphics and text scrolling effect, the text content after a specified interval of time automatically scroll down to display, the effect is very cool. The need for small partners can refer to the following.

Web pages need to display the latest web site information, such as micro-blog dynamics, ticket information, road monitoring and other projects in the common real-time data scrolling effect, we can use jquery to achieve the front-end information scrolling effect. This article we will combine examples to explain how to use jquery to achieve the scrolling effect of graphic information.

We use Sina Weibo information scrolling background, HTML contains a number of micro-BO information, the structure is as follows:

?

1 2 3 4 5 6 7 8 9 10 11-12

<div id= "Con" > <ul> <li> <a href= "class=" Face "></a>

Css

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

?

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

Principle: We define a scrolling function scrtime (), when the mouse is sliding into the scrolling area, stop scrolling (that is, clear scrtime), when the mouse leaves to continue scrolling, scrolling scrtime (), so that the last Li element is timed to insert the first LI element above, The Animate method is used to change Li's height and transparency effect, to achieve the animation load effect, and then perform a scrolling every 3 seconds.

?

1 2 3 4 5 6 7 8 9,

$ (function () {    var scrtime;    $ ("#con"). Hover (function () {        clearinterval (scrtime)/stop scrolling     },function () {       Scrtime = setinterval (function () {          var ul = $ ("#con ul");  & Nbsp;       var liheight = Ul.find ("Li:last"). Height ();//Calculate the altitude of the last Li element           ul.animate ({margintop:liheight+40 + "px"},1000,function () {            ul.find ("Li:last"). PREPENDTO (UL)              ul.find ("Li:first"). Hide ();             ul.css ({margintop:0});  &NBSp;         ul.find ("Li:first"). FadeIn (1000);          &NBSP});          },3000);    &NBSP}). Trigger ("MouseLeave"); });

The above code implements a continuous scrolling effect of content, every 3 seconds the content will fade from the upper, complete the content scrolling effect.

Add

About the image automatic fillet processing, we can use jquery.corner.js this plug-in, the use of flexible, compatible with each browser, this plugin download package has been ready for you. Of course you can also use CSS3 to control rounded corners.