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/
时间： 2024-10-05 04:45:11