基于JQuery的类似新浪微博展示信息效果的代码

复制代码代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
<title>Untitled Page</title> 
<link rel="Stylesheet" type="text/css" href="Result-Css/reset/reset-min.css" /> 
<style type="text/css"> 
.w_con{ width:400px; height:160px; overflow:hidden; border:1px solid #333;} 
#w_slid{ width:100%;} 
#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="Result-JavaScriptOrJQuery/jquery/jquery-1.7.2.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> 