jQuery仿新浪微博資訊展播效果

admin發表於2017-02-23
jQuery
分享一個仿新浪微博的資訊展播效果，具有緩衝效果，當然外觀現在還不夠美觀，需要開發者執行再去完善。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!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="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>

相關文章