基于JQuery的類似新浪微博展示信息效果的代碼
更新時間:2012年07月23日 23:32:54 作者:
滑動向下時,把最后一個節(jié)點copy過去插入在第一節(jié)點中,并在顯示時隱藏,再通過透明漸變顯示出來。附上源碼,需要的朋友可以copy
復制代碼 代碼如下:
<!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>
您可能感興趣的文章:
- jQuery實現(xiàn)鼠標經(jīng)過時出現(xiàn)隱藏層文字鏈接的方法
- jQuery實現(xiàn)鼠標單擊網(wǎng)頁文字后在文本框顯示的方法
- jQuery實現(xiàn)表單input中提示文字value隨鼠標焦點移進移出而顯示或隱藏的代碼
- jquery實現(xiàn)仿新浪微博帶動畫效果彈出層代碼(可關閉、可拖動)
- jQuery實現(xiàn)仿新浪微博浮動的消息提示框(可智能定位)
- jquery實現(xiàn)仿新浪微博評論滾動效果
- jQuery模擬新浪微博首頁滾動效果的方法
- 仿新浪微博返回頂部的jquery實現(xiàn)代碼
- 基于jQuery的模仿新浪微博時間的組件
- 基于jquery的內(nèi)容循環(huán)滾動小模塊(仿新浪微博未登錄首頁滾動微博顯示)
- 簡單易用的基于jQuery版仿新浪微博向下滾動效果(附DEMO)
- Jquery與JS兩種方法仿twitter/新浪微博 高度自適應無縫滾動實現(xiàn)代碼
- jQuery實現(xiàn)鼠標選文字發(fā)新浪微博的方法
相關文章
jQuery EasyUI API 中文文檔 - MenuButton菜單按鈕使用介紹
jQuery EasyUI API 中文文檔 - MenuButton菜單按鈕使用介紹,使用jQuery EasyUI的朋友可以參考下。2011-10-10基于jquery的多彩百分比 動態(tài)進度條 投票效果顯示效果實現(xiàn)代碼
基于jquery的多彩百分比 動態(tài)進度條 投票效果顯示效果實現(xiàn)代碼,學習jquery的朋友可以參考下。2011-08-08Bootstrap嵌入jqGrid,使你的table牛逼起來
這篇文章主要介紹了Bootstrap嵌入jqGrid,使你的table牛逼起來,需要的朋友可以參考下2016-05-05