一个Jquery导航DEMO

xiaojue 1月 28th, 2010

先看下效果图：

地址为：

http://www.designsor.com/demo/flash.html

废话不多说，说下实现思路和具体的一些知识点，代码写的比较仓促，是个效果DEMO。

具体的JS代码，首先当然这个是基于JQUERY的,先加载Google的代码：

(function(){
/*$(".index_muen>li").hover(function(){
$(this).fadeTo("slow",1.0)
},function(){
$(this).fadeTo("slow",0.5)
}); 
*/
//DOMO里没有明确出颜色渐变，但是我做了，后期正式做的时候处理
$(".index_main").fadeIn("slow",function(){
$(".muen2")
.animate({left:"80px",width:"370px",height:"93px"},
150,
function(){
$(this).css("background-position","0px 0px");
$(".main_text2").slideDown(200);
});
});
//初始化
//点击的依次绑定，这里写的有点乱，因为着急出效果。
$(".index_muen>li").click(function(){
$(this)
.animate({left:"80px",width:"370px",height:"93px"},
150,
function(){
$(this).css("background-position","0px 0px")
});
$(".index_muen>li").not($(this))
.animate({left:"0px",width:"95",height:"23"},
150,
function(){
$(this).css("background-position","0px -105px")
})
$(".main_text2").hide("fast");
});
 
$(".muen2").click(function(){
$(".main_text2").slideDown(200);
});
//单独的第2个有文字的导航。
});