This article illustrates the method of jquery simulation of Sina Weibo home page scrolling effect. Share to everyone for your reference. The implementation methods are as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<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" > Life if only as first sight </p>
</li>
<li> <a href= "#" ></a>
<p class= "Vright" > What Autumn sad painting fan </p>
</li>
<li> <a href= "#" ></a>
<p class= "Vright" > Change but Heart </p>
</li>
<li> <a href= "#" ></a>
<p class= "Vright" > but it is easy to change the heart </p>
</li>
</ul>
</div>
</body>
I hope this article will help you with your jquery programming.
