欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

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

程序员文章站 2022-06-14 12:00:51
代码如下:

代码如下:

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "https://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="https://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>
<p 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>
</p>
<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.hotkeys监听键盘按下事件keydown插件

下一篇： jquery easyui 结合jsp简单展现table数据示例

推荐阅读