The scrolling effect of the downward graphic information implemented by jquery

Source: Internet
Author: User

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>


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;


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;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP});          },3000);  &NBSP;&NBSP;&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.


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.

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.