May
23
2013
jquery实现模拟新浪微博大厅和腾讯微博首页滚动效果
作者：
绝缘体.. 发布：
2013-05-23 16:03 分类：
未分类 阅读：
抢沙发
新浪微博大厅和腾讯微博首页的微博信息一条一条的向下滚动效果是非常漂亮的，给人的感觉是这个网页人气特别旺的那一种，于是闲来无事也就研究了一番。用 jquery 也模拟实现了新浪微博和腾讯微博消息滚动的效果。效果如下图：
具体代码如下：
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jquery实现模拟新浪微博和腾讯微博首页滚动效果_www.phpernote.com</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="#"><img src="http://www.phpernote.com/uploadfiles/editor/201209301006568507.jpg" width="120" height="120" /></a>
<p class="vright">使用jquery模拟新浪微博和腾讯微博首页滚动效果，就是这么简单实用！</p>
</li>
<li> <a href="#"><img src="http://www.phpernote.com/uploadfiles/editor/201209301006568507.jpg" width="120" height="120" /></a>
<p class="vright">www.phpernote.com是一个php程序员的工作生活笔记,本站包含了php网络编程,数据库(主要是MySQL和Access数据库),javascript,jquery,div+css,html,windows系统,linux系统以及健康养生方面的学习笔记和生活经验积累!
</p>
</li>
<li> <a href="#"><img src="http://www.phpernote.com/uploadfiles/editor/201209301006568507.jpg" width="120" height="120" /></a>
<p class="vright">javascript模拟新浪微博和腾讯微博首页滚动效果</p>
</li>
<li> <a href="#"><img src="http://www.phpernote.com/uploadfiles/editor/201209301006568507.jpg" width="120" height="120" /></a>
<p class="vright">新浪微博和腾讯微博首页滚动效果</p>
</li>
</ul>
</div>
</body>
</html>
微信扫一扫，打赏作者吧～
jquery实现模拟新浪微博大厅和腾讯微博首页滚动效果：等您坐沙发呢！
发表评论
