jQuery模拟新浪微博首页滚动效果的方法
本文实例讲述了jQuery模拟新浪微博首页滚动效果的方法。分享给大家供大家参考。具体实现方法如下：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<scripttype="text/javascript"src="js/jquery.min.js"></script>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>无标题文档</title>
<scriptlanguage="javascript">
$(function(){
varscrtime;
$("#con").hover(function(){
clearInterval(scrtime);
},function(){
scrtime=setInterval(function(){
var$ul=$("#conul");
varliHeight=$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>
<styletype="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:10pxauto;position:relative;border:1px#666solid;background-color:#FFFFFF;
overflow:hidden;}
#conul{position:absolute;margin:10px;top:0;left:0;padding:0;}
#conulli{width:100%; border-bottom:1px#333333dotted;padding:20px0;overflow:hidden;}
#conullia{float:left; border:1px#333333solid;padding:2px;}
#conullip{margin-left:68px;line-height:1.5; padding:10px;}
-->
</style>
<body>
<divid="con">
<ul>
<li><ahref="#"><imgsrc="img/1.jpg"/></a>
<pclass="vright">人生若只如初见</p>
</li>
<li><ahref="#"><imgsrc="img/2.jpg"/></a>
<pclass="vright">何事秋风悲画扇</p>
</li>
<li><ahref="#"><imgsrc="img/3.jpg"/></a>
<pclass="vright">等闲变却故人心</p>
</li>
<li><ahref="#"><imgsrc="img/4.jpg"/></a>
<pclass="vright">却道故人心易变</p>
</li>
</ul>
</div>
</body>
</html>
希望本文所述对大家的jQuery程序设计有所帮助。