快捷導(dǎo)航

基于jquery的direction圖片漸變動(dòng)畫效果

更新時(shí)間：2010年05月24日 15:25:53 作者：

這個(gè)插件的制作用到j(luò)query的animate,fadeIn,fadeTo等動(dòng)畫透明度之類的知識(shí)，對(duì)css的控制樣式也是很重要的

還有一點(diǎn)就是包括濾鏡的使用但是有一點(diǎn)必須要說明的是濾鏡在firefox下不能識(shí)別看不到效果，
下面就開始我們的代碼編寫吧
html是比較簡(jiǎn)單的
代碼

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<html> 
<head> 
<TITLE>myjquerydirection</TITLE> 
<META http-equiv=content-type content="text/html; charset=gb2312"> 
<link rel="stylesheet" type="text/css" href="css/dirction.css"> 
<script language=javascript src="js/jquery.js" type="text/javascript"></script> 
<script type="text/javascript" src="js/drection.js"></script> 
</head> 
<body> 
<div id=nav> 
<ul> 
<li><img src="images/02.jpg" text="美景如畫的海景|天藍(lán)海藍(lán)" pic="2"> 
<div>一個(gè)海島</div></li> 
<li><img src="images/01.jpg" text="Handy Code|春華秋實(shí)" pic="1"> 
<div>一片麥穗</div></li> 
<li><img src="images/03.jpg" text="郁郁蔥蔥的生命|生生不息的生命" pic="3"> 
<div>一樹綠葉</div></li> 
<li><img src="images/04.jpg" text="孤獨(dú)的一棵老樹|等誰(shuí)呢？" pic="4"> 
<div>一棵大樹</div></li> 
<li><img src="images/05.jpg" text="明媚的向日葵花|生生不息的生命" pic="5"> 
<div>一地葵花</div></li></ul> 
<div id=frontTextBack></div> 
<div id=frontText></div> 
<div id=frontTextSub></div> 
<div id=BG></div> 
<div id=mask></div> 
<div id=back><img height="240" src="images/2.jpg" width="760"</div> 
</div> 
</body> 
</html> 

這里有多個(gè)div標(biāo)簽 id=frontTextBack的標(biāo)簽是顯示通過css濾鏡來實(shí)現(xiàn)陰影，其他的代碼就沒有什么好說的了
現(xiàn)在開始我們的css代碼的編寫了
首先從頂層開始編寫
代碼

復(fù)制代碼代碼如下:

 
body { padding:0; 
moz-user-select: none; 
margin:0; 
} 
#nav { background: url("loadsmall.gif") no-repeat scroll 330px 100px #000; 
height:240px; 
overflow:hidden; 
position:relative; 
width:760px; 
display:block; 
} 
#nav ul { bottom:0px; 
left:3px; 
position:absolute; 
text-align:left; 
z-index:999; 
} 
#nav ul li { list-style:none; 
display:block; 
float:left; 
height:50px; 
width:140px; 
font-size:12px; 
position:relative; 
} 
#nav li img{ border:1px solid white; 
cursor:pointer; 
float:left; 
height:35px; 
left:10px; 
top:5px; 
width:52px; 
margin-top:10px; 
} 
#nav li div{ FILTER: alpha(opacity=60); 
margin-left:70px; 
margin-top:5px; 
padding-left:10px; 
color:white; 
} 
#frontTextBack{color:#000; 
font-family:Verdana; 
font-size:30px; 
left:22px; 
position:absolute; 
width:100%; 
top:22px; 
} 
#frontText { color:#fff; 
font-size:30px; 
font-weight:900; 
left:20px; 
position:absolute; 
top:20px; 
width:100%; 
z-index:999; 
} 
#frontTextSub{color:#fff; 
font-size:13px; 
left:25px; 
position:absolute; 
top:60px; 
width:100%; 
} 
#BG { background:none repeat scroll 0 0 #000; 
border-top:1px solid #999; 
bottom:0; 
height:50px; 
position:absolute; 
text-align:right; 
width:100%; 
} 
#mask { background:repeat scroll 0 0 transparent; 
height:100%; 
position:absolute; 
width:100%; 
z-index:990; 
} 
#back { text-align:center; 
} 
.gray {FILTER:gray(); } //濾鏡設(shè)置成灰 

接下來就是js的編寫了js
代碼
首先加載

復(fù)制代碼代碼如下:

 
$(function(){ 
//首先找到需要點(diǎn)擊的img 
$("li img").click(function(){ 
//判斷一下當(dāng)前img是否已經(jīng)被點(diǎn)中 
if(this.className.indexOf("active") !=-1) 
{ 
return; 
} 
//獲取數(shù)據(jù) 
var i=$(this).attr("pic"); 
//獲取要顯示的文本內(nèi)容,并以|把text分割成數(shù)組 
var t=$(this).attr("text").split("|"); 
//改變文本的淡出,通過控制透明度來改變動(dòng)畫的效果 
$("#frontText").fadeOut(); 
$("#frontTextBack").fadeOut(); 
$("#frontTextSub").fadeOut(); 
//處理當(dāng)前active的img恢復(fù)原樣 
$("li img.active").animate({top:5,width:52,left:10},300) 
.removeClass("active") 
.fadeTo(200,0.6) 
//處理當(dāng)前的active的img 
$(this).animate({top:-5,width:40,height:70,left:1},300) 
.addClass("active") 
.fadeTo(200,1) 
//處理顯示的div的大圖 
$("#back").children().addClass("gray").end() 
.fadeIn(500,0.1,function(){ 
$(this).children("img").attr("src","imgaes/"+i+".jpg").removeClass("gray"); 
$(this).fadeTo(500,1,function(){ 
$("#frontText").html(t[0]).fadeIn(200); //更改正文文字 
$("#frontTextBack").html(t[0]).fadeIn(200); //陰影文字 
$("#frontTextSub").html(t[1]).fadeIn(200)} //副標(biāo)題 
); 
}); 
}); 
}); 
//初始化第一張圖 
var i =0; 
show(); 
function show(){ 
if (i==$("li img").size()) i = 0 
$("li img").eq(i).click(); 
i++; 
//setTimeout(show(),1000); 
} 