jQuery實(shí)戰(zhàn)之仿Flash跳動(dòng)的按鈕效果
作者：Mr.mac
運(yùn)用jQuery在配合漂亮的UI，就可以做出讓用戶賞心悅目的體驗(yàn)。
下面這個(gè)小例子，靈感來(lái)源于百度有啊的應(yīng)用(現(xiàn)在好像沒(méi)有了)，就是當(dāng)鼠標(biāo)移上去和移除，圖標(biāo)會(huì)有緩動(dòng)的效果。效果不比f(wàn)lash的差。
51CTO推薦專(zhuān)題：jQuery從入門(mén)到精通 jQuery給力插件大閱兵
下面是的效果圖：圖標(biāo)很好設(shè)計(jì)，在這里就不教大家怎么設(shè)計(jì)了。
下面是JQ的代碼部分：
- $(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(){//回調(diào)函數(shù)控制
- $($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);
- }
- )
- })
分析：
首先增加倒影：
- $("#nav-shadow li").append('<img class="shadow" src="images/reflaction_pic.jpg"
- width="60" height="32" alt="" />')
然后注冊(cè)，hover事件，用回調(diào)函數(shù)控制彈回去時(shí)候的效果。陰影的距離感是通過(guò)透明度控制的。
下面是HTML代碼：
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <title>button_effect</title>
- <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
- <script type="text/javascript" src="action.js"></script>
- <style type="text/css">
- *{ margin:0; padding:0;}
- div{ width:500px; height:500px; margin:100px 0 auto;}
- ul,ol{ list-style:none; list-style-type:none;}
- a,a:visited,a:hover{ display:block; text-decoration:none; color:#ccc; text-indent:-9999px;
- outline: 0 none; width:61px; height:60px; z-index:2; overflow:hidden; position:relative;}
- li{ float:left; width:61px; height:92px; margin-left:10px; position:relative;}
- #nav-shadow li.chang-one a{ background:url(images/button_pic.jpg) no-repeat left top;}
- #nav-shadow li.chang-two a{background:url(images/button_pic.jpg) no-repeat -60px top;}
- #nav-shadow li.chang-three a{background:url(images/button_pic.jpg) no-repeat -120px top;}
- #nav-shadow li.chang-four a{background:url(images/button_pic.jpg) no-repeat -180px top;}
- #nav-shadow li.chang-five a{background:url(images/button_pic.jpg) no-repeat -240px top;}
- #nav-shadow li img.shadow{margin:0 auto; position:absolute; bottom:0px; left:0px; z-index:1;}
- </style>
- </head>
- <body>
- <div id="content">
- <ul id="nav-shadow">
- <li class="chang-one"><a href="#" title="reflaction_one">click me</a></li>
- <li class="chang-two"><a href="#" title="reflaction_two">click me</a></li>
- <li class="chang-three"><a href="#" title="reflaction_three">click me</a></li>
- <li class="chang-four"><a href="#" title="reflaction_four">click me</a></li>
- <li class="chang-five"><a href="#" title="reflaction_five">click me</a></li>
- </ul>
- </div>
- </body>
- </html>
大家在用的時(shí)候，只需要設(shè)計(jì)出好看的圖標(biāo)就可以了。
新加了源碼下載：下載
原文鏈接：http://www.cnblogs.com/blacksheep/archive/2011/04/13/2014416.html
【編輯推薦】
責(zé)任編輯：陳貽新
來(lái)源：
博客園
