快捷導(dǎo)航

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

更新時間：2012年07月23日 23:32:54 作者：

滑動向下時，把最后一個節(jié)點(diǎn)copy過去插入在第一節(jié)點(diǎn)中，并在顯示時隱藏，再通過透明漸變顯示出來。附上源碼，需要的朋友可以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> 

您可能感興趣的文章:

相關(guān)文章

jquery文字上下滾動的實(shí)現(xiàn)方法
jquery文字上下滾動的實(shí)現(xiàn)方法，需要的朋友可以參考一下
2013-03-03
jquery中的查找parents與closest方法之間的區(qū)別
這篇文章主要是對jquery中的查找parents與closest方法之間的區(qū)別進(jìn)行了詳細(xì)的分析介紹，需要的朋友可以過來參考下，希望對大家有所幫助
2013-12-12
Web開發(fā)者必備的12款超贊jQuery插件
jQuery插件能夠增強(qiáng)網(wǎng)站的可用性，有效地改善用戶體驗，還可以大大減少創(chuàng)建一個新站點(diǎn)的開發(fā)時間。
2010-12-12
jQuery中next方法用法實(shí)例
這篇文章主要介紹了jQuery中next方法用法,實(shí)例分析了jQuery中next方法的功能、定義及相關(guān)使用技巧,需要的朋友可以參考下
2015-04-04
SinaEditor使用方法詳解
本篇文章主要是對SinaEditor使用方法進(jìn)行了詳細(xì)的介紹，需要的朋友可以過來參考下，希望對大家有所幫助
2013-12-12
jquery簡單插件制作(fn.extend)完整實(shí)例
這篇文章主要介紹了jquery簡單插件制作(fn.extend)方法,結(jié)合完整實(shí)例形式分析了jQuery fn.extend擴(kuò)展插件的實(shí)現(xiàn)技巧,需要的朋友可以參考下
2016-05-05
jQuery給表格添加分頁效果
這篇文章主要為大家詳細(xì)介紹了利用jQuery給表格添加分頁效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-03-03
jQuery+ThinkPHP實(shí)現(xiàn)圖片上傳
這篇文章主要為大家詳細(xì)介紹了jQuery+ThinkPHP實(shí)現(xiàn)圖片上傳，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-07-07
jQuery移動web開發(fā)中的頁面初始化與加載事件
這篇文章主要介紹了jQuery移動web開發(fā)中的頁面初始化與加載事件,是JavaScript移動端頁面開發(fā)學(xué)習(xí)中的基礎(chǔ)知識,需要的朋友可以參考下
2015-12-12
JQuery 實(shí)現(xiàn)的頁面滾動時浮動窗口控件
JQuery 實(shí)現(xiàn)的頁面滾動時浮動窗口控件實(shí)現(xiàn)代碼，大家可以參考下。
2009-07-07