— Designsor

先看下效果图：

地址为：

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个有文字的导航。
});

说一下，主要是animate这个JQUERY内置的自定义动画函数，他的功能和用法，大概的思路应该很明了的看出来。
jQueryanimate(params, [duration], [easing], [callback])

paramsOptions一组包含作为动画属性和终值的样式属性和及其值的集合

duration (可选)
String,Number三种预定速度之一的字符串(“slow”, “normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)

easing (可选)
String要使用的擦除效果的名称(需要插件支持).默认jQuery提供”linear” 和 “swing”.

callback (可选)
Function在动画完成时执行的函数

其中还有个关键点就是HTML和CSS部分的组合，这里就不发代码了，可以自己查看页面的源代码，因为HTML部分和CSS部分的合理性，致使动画很容易上手，建议好好分拆我写的CSS部分，其中的图片为了让动画更流畅，也使用了css sprites技术。但是本文重点不在这里，不做过多说明。

恩，等全部修改完之后再发布更稳定的，现在只是个DEMO，其实用JS做特效导航真是个不错的选择。