jQuery信息展播效果源码下载

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

[ jQuery ] 运行代码下载代码

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="https://www.51qianduan.com/" />
<title>仿新浪微博信息展播效果-51前端</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="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>

代码描述：jQuery信息展播。jQuery信息展播效果源码下载

下载全部收藏

104 138

用户评论

大牛，别默默的看了，快登录帮我点评一下吧！:) 登录 | 注册