基于jQuery的仿FLASH 菜单
主要是备忘一下animate的参数设置方法
核心代码如下：
$(function(){
$("#flash2lia").hover(
function(){
$(this).animate(
{paddingLeft:"40px"},
{duration:400,
easing:"easeOutQuint",
complete:function(){$(this).addClass("yel")}
}
)},
function(){
$(this).animate(
{paddingLeft:"10px"},
{duration:400,
easing:"easeOutQuint",
complete:function(){$(this).removeClass("yel")}
}
)}
)
})
$("#flash2lia").hover(
function(){
$(this).animate(
{paddingLeft:"40px"},
{duration:400,
easing:"easeOutQuint",
complete:function(){$(this).addClass("yel")}
}
)},
function(){
$(this).animate(
{paddingLeft:"10px"},
{duration:400,
easing:"easeOutQuint",
complete:function(){$(this).removeClass("yel")}
}
)}
)
})
样式表：
代码
a{font-weight:900;padding:4px6px;}
a:hover{color:#fff;}
script{display:block;}
.flash{width:400px;padding:10px;list-style:none;clear:both;}
.flashli{font-family:Arial,Helvetica,sans-serif;font-size:14px;border-bottom:1pxsolid#ddd;clear:both;margin:0;}
.flashlia{padding-left:10px;background:#f0f0f0;display:block;padding-right:10px;line-height:26px;height:26px;}
.flashlia:hover{color:#fff;background:#f0c;}
.flashlia.yel{color:#ff0;}
a:hover{color:#fff;}
script{display:block;}
.flash{width:400px;padding:10px;list-style:none;clear:both;}
.flashli{font-family:Arial,Helvetica,sans-serif;font-size:14px;border-bottom:1pxsolid#ddd;clear:both;margin:0;}
.flashlia{padding-left:10px;background:#f0f0f0;display:block;padding-right:10px;line-height:26px;height:26px;}
.flashlia:hover{color:#fff;background:#f0c;}
.flashlia.yel{color:#ff0;}
结构 就是一个 ul 列表
代码
<ulid="flash2"class="flash">
<li><ahref="#nogo">F.A.Q</a></li>
<li><ahref="#nogo">CountactUs</a></li>
<li><ahref="#nogo">AboutUs</a></li>
<li><ahref="#nogo">CountactUs</a></li>
<li><ahref="#nogo">OurSeverse</a></li>
</ul>
<li><ahref="#nogo">F.A.Q</a></li>
<li><ahref="#nogo">CountactUs</a></li>
<li><ahref="#nogo">AboutUs</a></li>
<li><ahref="#nogo">CountactUs</a></li>
<li><ahref="#nogo">OurSeverse</a></li>
</ul>
另： 将 script 包含在 pre标签中 并设置 script display:block 在 firefox等浏览器中既可以方便的显示代码 但是IE 不支持 如下：
<pre>
<scripttype="text/javascript">
$(function(){
$("#flashlia").hover(
function(){$(this).animate({paddingLeft:"40px"},400)},
function(){$(this).animate({paddingLeft:"10px"},400)}
)
})
</script>
</pre>
1、接口，抽象类与内部类
2、ASP.NET2.0_执行页面发送的强类型方法与弱类型方法
3、CentOS 安装jira 6.3.6
4、华为t8100刷机之后出现illegal version 不久开始关机，提示非法版本
5、有序的并行任务！
<scripttype="text/javascript">
$(function(){
$("#flashlia").hover(
function(){$(this).animate({paddingLeft:"40px"},400)},
function(){$(this).animate({paddingLeft:"10px"},400)}
)
})
</script>
</pre>
DEMO:点此浏览
优质内容筛选与推荐>>1、接口，抽象类与内部类
2、ASP.NET2.0_执行页面发送的强类型方法与弱类型方法
3、CentOS 安装jira 6.3.6
4、华为t8100刷机之后出现illegal version 不久开始关机，提示非法版本
5、有序的并行任务！