How to simulate the rolling effect of Sina Weibo homepage using jQuery
This article mainly introduces jQuery's method of simulating Sina Weibo's homepage rolling effect. The example shows jQuery's technique of using animate, css, and other methods to implement rolling special effects, which has some reference value, for more information, see
This article describes how jQuery simulates the rolling effect of Sina Weibo homepage. Share it with you for your reference. The specific implementation method is as follows:
The Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Script type = "text/javascript" src = "js/jquery. min. js"> </script>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> untitled document </title>
<Script language = "javascript">
$ (Function (){
Var scrtime;
$ ("# Con"). hover (function (){
ClearInterval (scrtime );
}, Function (){
Scrtime = setInterval (function (){
Var $ ul = $ ("# con ul ");
Var liHeight = $ ul. find ("li: last"). height ();
$ 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 ");
});
</Script>
<Style type = "text/css">
<! --
* {Margin: 0; padding: 0 ;}
Ul, li {list-style-type: none ;}
Body {font-size: 13px; background-color: #999999 ;}
# Con {width: 700px; height: 400px; margin: 10px auto; position: relative; border: 1px #666 solid; background-color: # FFFFFF;
Overflow: hidden ;}
# Con ul {position: absolute; margin: 10px; top: 0; left: 0; padding: 0 ;}
# Con ul li {width: 100%; border-bottom: 1px #333333 dotted; padding: 20px 0; overflow: hidden ;}
# Con ul li a {float: left; border: 1px #333333 solid; padding: 2px ;}
# Con ul li p {margin-left: 68px; line-height: 1.5; padding: 10px ;}
-->
</Style>
<Body>
<Div id = "con">
<Ul>
<Li> <a href = "#"> </a>
<P class = "vright"> if only the first sight of life appears, </p>
</Li>
<Li> <a href = "#"> </a>
<P class = "vright"> what is autumn wind and sorrow fan </p>
</Li>
<Li> <a href = "#"> </a>
<P class = "vright"> become idle but old-fashioned </p>
</Li>
<Li> <a href = "#"> </a>
<P class = "vright"> easy to change </p>
</Li>
</Ul>
</Div>
</Body>
</Html>
I hope this article will help you with jQuery programming.