Nicole McIntyre 发布于

文章来源： 100素材网更新时间： 2014-04-05 13:05:41

微博滚动代码新浪微博滚动腾讯微博滚动 js滚动代码文字滚动js代码文字滚动js代码

<a style="display:none" href="http://www.100sucai.com">www.100sucai.com</a>
        <!DOCTYPE HTML>
<html>
<head>
<title>演示：jquery仿微博实现向下推送图文信息滚动效果</title>
<style type="text/css">
body {
	font-size:12px
}
p, h1, h2, h3, h4, h5, h6 {
	margin:0px;
	padding:0px
}
ul, li {
	list-style-type:none;
	margin:0px;
	padding:0px;
}
#con {
	width:450px;
	height:400px;
	margin:30px auto 10px auto;
	position:relative;
	border:1px #d3d3d3 solid;
	background-color:#fff;
	overflow:hidden;
}
#con ul {
	position:absolute;
	margin:10px;
	top:0;
	left:0;
	padding:0;
}
#con ul li {
	width:100%;
	border-bottom:1px #ccc dotted;
	padding:20px 0;
	overflow:hidden;
}
#con ul li a.face {
	float:left;
	width:50px;
	height:50px;
	margin-top:2px;
	padding:2px;
}
#con ul li h4 {
	height:22px;
	line-height:22px;
	margin-left:60px
}
#con ul li p {
	margin-left:60px;
	line-height:22px;
}
</style>
<script type="text/javascript" src="http://www.100sucai.com/js/jquery.js"></script>
<script type="text/javascript" src="http://www.100sucai.com/img/demo/198.js"></script>
<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");
	$(".face img").corner("5px");
});
</script>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body>
<div id="main">
  <div class="demo">
    <div id="con">
      <ul>
        <li> <a href="#" class="face"><img src="http://tp3.sinaimg.cn/1197161814/50/1290146312/1" /></a>
          <h4><a href="#">李开复</a></h4>
          <p>【领导力的四个境界】境界一：员工因为你的职位而服从你；境界二：员工因为你的能力而服从你；境界三：员工因为你的培养而服从你，他们感恩于你对他们的尊重、培养和付出；境界四：员工因为你的为人、魅力、风范、价值观而拥戴你。（转）</p>
        </li>
        <li> <a href="#" class="face"><img src="http://tp4.sinaimg.cn/1788911247/50/40008507892/1" /></a>
          <h4><a href="http://www.jsctrlc.com/">js网页特效</a></h4>
          <p>简单实用的网页特效ctrlc+cltrv</p>
        </li>
        <li> <a href="#" class="face"><img src="http://tp1.sinaimg.cn/1161257652/50/1285809118/1" /></a>
          <h4><a href="#">月光光</a></h4>
          <p>最难过的，莫过于当你遇上一个特别的人，却明白永远不可能在一起，或迟或早，你不得不放弃。[转]</p>
        </li>
        <li> <a href="#" class="face"><img src="http://tp3.sinaimg.cn/1601563722/50/5597516188/1" /></a>
          <h4><a href="#">陆琪</a></h4>
          <p>在这世上，没有一辈子接你上下班的男人，更没有一辈子不对你说谎的男人。但确实会有一辈子陪着你，不离开你的男人。要记住，只要是人，就会松懈、懒惰、有缺点。千万别对人抱着不可能实现的期望。男人有多好，就看你的期望有多低。期待少一些，惊喜才会多一点。——陆琪（上帝保佑，大家晚安）</p>
        </li>
      </ul>
    </div>
  </div>
</div>
</body>
</html>

在线演示

浏览次数次

react源码系统 vue源码系统 vue + typeScript源码系统

上一篇文章： jquery页面滑动效果插件scrollBanner

下一篇文章： jquery首页全屏幻灯片动画图片切换效果

首页

jquery特效

网页素材

网页特效

网站模板

图片素材

jQuery仿微博实现向下推送图文信息滚动效果

推荐阅读：

相关代码：

标签分类