jquery仿新浪微博信息展播效果

jquery仿新浪微博信息展播效果:
下面分享一个仿新浪微博的信息展播效果，具有缓冲效果，当然外观现在还不够美观，需要开发者执行再去完善。
代码实例如下:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" />
<title>仿新浪微博信息展播效果-蚂蚁部落</title>
<style type="text/css">
*{
  margin:0px;
  padding:px;
}
.w_con {
  width:400px;
  height:160px;
  overflow:hidden;
  border:1px solid #333;
  margin:0px auto;
  margin-top:50px;
}
#w_slid {
  width:100%;
  list-style:none;
}
#w_slid li {
  width:100%;
  height:40px;
}
li.a {
  background:#ffc000;
}
li.b {
  background:#56aaff;
}
li.c {
  background:#0fffaa;
}
li.d {
  background:#0ffffa;
}
li.e {
  background:#ffff56;
}
</style>
<script type="text/javascript" src="http://www.softwhy.com/mytest/jQuery/jquery-1.8.3.js"></script>
</head>
<body>
<div class="w_con" id="w_con">
  <ul id="w_slid">
    <li class="a"></li>
    <li class="b"></li>
    <li class="c"></li>
    <li class="d"></li>
    <li class="e"></li>
  </ul>
</div>
<script type="text/javascript"> 
function slide(){ 
  var $w_slid=$('#w_con'); 
  console.log($w_slid); 
  var Timer; 
  $w_slid.hover(function(){ 
    clearInterval(Timer); 
  },function(){ 
    Timer = setInterval(function(){ 
      slideFadeIn($w_slid); 
    },3000); 
  }).trigger("mouseleave"); 
}
function slideFadeIn(obj){ 
  var $self = obj.find('ul:first'); 
  var $height = $self.find('li:first').height(); 
  console.log($height); 
  $self.animate({ 
    'marginTop':+$height+'px', 
  },1200,function(){ 
    $self.css({ marginTop:0}).find("li:first").appendTo($self); 
    $self.find("li:first").hide(); 
    $self.find("li:first").fadeIn("slow"); 
  }); 
} 
$(function(){ 
  slide(); 
}); 
</script>
</body>
</html>

以上代码实现了我们想要的下效果，大家可以在本站测试，也可以复制黏贴到本地。
特别说明:代码来源于网络，如有侵权请尽快联系本站。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=8525

更多内容可以参阅:http://www.softwhy.com/jquery/

爱程序网

Tags：[db:关键字]