<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery仿微博向下滚动效果</title>
<meta name="keywords" content="jQuery滚动,jQuery微博" />
<meta name="description" content="本文以新浪微博信息滚动实例为大家讲解如何使用jQuery来实现图文信息向下滚动效果。" />
<style type="text/css">
*{margin:0;padding:0;}
.title{text-align: center;}
#content{ width:600px; height:363px; margin:30px auto 10px auto; position:relative; border:1px #d3d3d3 solid; background-color:#fff; overflow:hidden;}
#content ul{ position:absolute; margin:0 10px; top:0; left:0; padding:0;}
#content ul li{ width:100%; height: 70px; border-bottom:1px #ccc dotted; padding:10px 0; overflow:hidden; }
#content ul li a.avatar{ float:left; width:50px; height:50px; margin-top:2px; padding:2px;text-decoration: none;}
#content ul li h4{height:15px; line-height:15px; margin-left:60px;margin-top: -10px;}
#content ul li p{ margin-left:60px;line-height:22px; }
#content img{-webkit-border-radius: 5px;-moz-border-radius: 5px;-ms-border-radius: 5px;-o-border-radius: 5px;border-radius: 5px;}
</style>
</head>
<body>
<div class="container">
<h2 class="title">jQuery仿微博向下滚动效果</h2>
<div class="demo">
<div id="content">
<ul>
<li> <a href="#" class="avatar"><img src="http://tp2.sinaimg.cn/5579422785/50/5723046439/0" /></a>
<h4><a href="#">腐女大本营</a></h4>
<p>被禁的62部动漫下载，随手转发传递正能量！！！ </p>
</li>
<li> <a href="#" class="avatar"><img src="http://tp1.sinaimg.cn/3876734080/50/22898583876/1" /></a>
<h4><a href="#">思想聚焦</a></h4>
<p>一位高三老师对高中“早恋”的看法</p>
</li>
<li> <a href="#" class="avatar"><img src="http://tp1.sinaimg.cn/1615743184/50/5607220127/0" /></a>
<h4><a href="#">我的脑壳长了个包</a></h4>
<p>哪位大神配的音，说出来我一定跪拜为湿.....</p>
</li>
<li> <a href="#" class="avatar"><img src="http://tp2.sinaimg.cn/1097201945/50/40022036076/1" /></a>
<h4><a href="#">徐昕</a></h4>
<p>40年前的今天，张志新被割喉；40年后，文革的影子还在，但不可能回去。必须彻底反思文革，呼吁开放文革档案</p>
</li>
<li> <a href="#" class="avatar"><img src="http://tp2.sinaimg.cn/1816011541/50/40037057877/0" /></a>
<h4><a href="#">张小娴</a></h4>
<p>沒有一個人是完全的。所謂幸福，是在於認識一個人的界限而愛這個界限。─── 《約翰 . 克利斯朵夫》</p>
</li>
<li> <a href="#" class="avatar"><img src="http://tp1.sinaimg.cn/3160227432/50/5716965285/1" /></a>
<h4><a href="#">思想箴言</a></h4>
<p>【你舍得对人家好，人家才会舍得对你好】舍得：母亲给我一生的最珍贵做人礼物 ，被这个朴实的故事感动哭了。</p>
</li>
</ul>
</div>
</div>
</div>
<script type="text/javascript" src="http://www.sucaihuo.com/Public/js/other/jquery.js"></script>
<script type="text/javascript">
$(function() {
var scrtime;
$("#content").hover(function() {
clearInterval(scrtime);
}, function() {
scrtime = setInterval(function() {
var ul = $("#content ul");
var liHeight = ul.find("li:last").height();
ul.animate({marginTop: liHeight + 20 + "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>
</body>
</html>
扫一扫
118
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
