Scroll down text information implemented by jQuery

The effect of scrolling text information implemented by jQuery

Jquery implements the image and text scrolling effect. The image and text content are automatically displayed downward after a specified interval, which is very cool. If you have any need, refer.

The WEB page needs to display the latest information of the website, such as the real-time data rolling effect of items such as Weibo dynamics, ticket remaining information, and traffic monitoring. We can use jQuery to implement the rolling effect of the front-end information. In this article, we will use examples to explain how to use jQuery to implement text-and-Image Information scrolling.

We use Sina Weibo information as the background. html contains multiple Weibo text and image 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"> 50/1290146312/1 "/> </a> <H4> <a href = "#"> Kai-fu Lee </a> <P> [four levels of leadership] realm 1: Employees obey you because of your position; realm 2: Employees obey you because of your ability; Realm 3: Employees obey you because of your training. They are grateful for your respect, cultivation, and dedication to them; Realm 4: Employees embrace you because of your personality, charm, style, and values. (Conversion) </p> </Li> ... More... </Ul> </Div>

CSS

We use CSS to beautify the page layout. The following is the CSS code of the Data scroll area. Of course, you can modify css to customize different appearances.

?

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 rolling function scrtime (). When the mouse slides toward the rolling area, it stops scrolling (I .e. clearing scrtime). When the mouse leaves, it continues to scroll, scrolling scrtime () in the process, let the last li element regularly Insert the top of the first li element, use the animate method to change the li height and transparency effect, to achieve the animation loading effect, then, the system regularly performs a rolling operation every three seconds.

?

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); // stop scrolling }, Function (){ Scrtime = setInterval (function (){ Var ul = $ ("# con ul "); Var liHeight = ul. find ("li: last"). height (); // calculate the height 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 }); Ul. find ("li: first"). fadeIn (1000 ); }); },3000 ); }). Trigger ("mouseleave "); });

The above code implements a continuous downward scrolling effect of the content, and the content will fade in from the top every 3 seconds to complete the content scrolling effect.

Supplement

For automatic image rounded corner processing, we can use the jquery. corner. js plug-in, which is flexible and compatible with various browsers. The plug-in download package is ready for you. Of course, you can also use css3 to control the rounded corner.