提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

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

jQuery代码 基于 信息 效果 展示 微博 类似
2023-06-13 09:14:34 时间
复制代码代码如下:

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>UntitledPage</title>
<linkrel="Stylesheet"type="text/css"href="Result-Css/reset/reset-min.css"/>
<styletype="text/css">
.w_con{width:400px;height:160px;overflow:hidden;border:1pxsolid#333;}
#w_slid{width:100%;}
#w_slidli{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>
<scripttype="text/javascript"src="Result-JavaScriptOrJQuery/jquery/jquery-1.7.2.js"></script>
</head>
<body>
<divclass="w_con"id="w_con">
<ulid="w_slid">
<liclass="a"></li>
<liclass="b"></li>
<liclass="c"></li>
<liclass="d"></li>
<liclass="e"></li>
</ul>
</div>
<scripttype="text/javascript">
functionslide(){
var$w_slid=$("#w_con");
console.log($w_slid);
varTimer;
$w_slid.hover(function(){
clearInterval(Timer);
},function(){
Timer=setInterval(function(){
slideFadeIn($w_slid);
},3000);
}).trigger("mouseleave");
}
functionslideFadeIn(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>

相关文章