jQuery实战之仿Flash跳动的按钮效果
作者：licqi 时间：2011-04-16阅读数：人阅读
- 下面这个小例子，灵感来源于百度有啊的应用(现在好像没有了)，就是当鼠标移上去和移除，图标会有缓动的效果。效果不比flash的差。
下面是的效果图：图标很好设计，在这里就不教大家怎么设计了。
下面是JQ的代码部分：
[js]$(function(){
//append img to LI
$("#nav-shadow li").append('<img class="shadow" src="images/reflaction_pic.jpg"
width="60" height="32" alt="" />');//这是阴影的图片
//append hover event
$("#nav-shadow li").hover(function(){
//define e for tihs
var $e = this;
$($e).find("a").stop().animate({marginTop:'-14px'},250,function(){//回调函数控制
$($e).find("a").animate({marginTop:'-10px'},250);
});
$($e).find("img.shadow").stop().animate({width:"80%",opacity:"0.3",marginLeft:"8px"},250);
},function(){
var $e = this;
$($e).find("a").stop().animate({marginTop:"4px"},250,function(){
$($e).find("a").animate({marginTop:"0px"},250);
});
$($e).find("img.shadow").stop().animate({width:"100%",opacity:"1",marginLeft:"0px"},250);
}
)
}) [/js]
分析：
首先增加倒影：
[html]
<ol>
<li>$("#nav-shadow li").append('<img class="shadow" src="images/reflaction_pic.jpg"</li>
<li>width="60" height="32" alt="" />')</li>
</ol>[/html]
然后注册，hover事件，用回调函数控制弹回去时候的效果。阴影的距离感是通过透明度控制的。
下面是HTML代码：
[html]
<ol>
<li><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"></li>
<li> <html></li>
<li> <head></li>
<li> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"></li>
<li> <title>button_effect</title></li>
<li> <script type="text/javascript" src="jquery-1.4.2.min.js"></script></li>
<li> <script type="text/javascript" src="action.js"></script></li>
<li> <style type="text/css"></li>
<li> *{ margin:0; padding:0;}</li>
<li> div{ width:500px; height:500px; margin:100px 0 auto;}</li>
<li> ul,ol{ list-style:none; list-style-type:none;}</li>
<li> a,a:visited,a:hover{ display:block; text-decoration:none; color:#ccc; text-indent:-9999px;</li>
<li>outline: 0 none; width:61px; height:60px; z-index:2; overflow:hidden; position:relative;}</li>
<li> li{ float:left; width:61px; height:92px; margin-left:10px; position:relative;}</li>
<li> #nav-shadow li.chang-one a{ background:url(images/button_pic.jpg) no-repeat left top;}</li>
<li> #nav-shadow li.chang-two a{background:url(images/button_pic.jpg) no-repeat -60px top;}</li>
<li> #nav-shadow li.chang-three a{background:url(images/button_pic.jpg) no-repeat -120px top;}</li>
<li> #nav-shadow li.chang-four a{background:url(images/button_pic.jpg) no-repeat -180px top;}</li>
<li> #nav-shadow li.chang-five a{background:url(images/button_pic.jpg) no-repeat -240px top;}</li>
<li> #nav-shadow li img.shadow{margin:0 auto; position:absolute; bottom:0px; left:0px; z-index:1;}</li>
<li> </style></li>
<li> </head></li>
<li> <body></li>
<li> <div id="content"></li>
<li> <ul id="nav-shadow"></li>
<li> <li class="chang-one"><a href="#" title="reflaction_one">click me</a></li></li>
<li> <li class="chang-two"><a href="#" title="reflaction_two">click me</a></li></li>
<li> <li class="chang-three"><a href="#" title="reflaction_three">click me</a></li></li>
<li> <li class="chang-four"><a href="#" title="reflaction_four">click me</a></li></li>
<li> <li class="chang-five"><a href="#" title="reflaction_five">click me</a></li></li>
<li> </ul></li>
<li> </div></li>
<li> </body></li>
<li> </html></li>
</ol>[/html]
大家在用的时候，只需要设计出好看的图标就可以了。
新加了源码下载：下载
原文链接：http://www.cnblogs.com/blacksheep/archive/2011/04/13/2014416.html本站所有文章、数据、图片均来自互联网,一切版权均归源网站或源作者所有。
如果侵犯了你的权益请来信告知我们删除。邮箱：licqi@yunshuaiweb.com
