The following small example is inspired by Baidu's application (which does not seem to have been available now), that is, when the mouse is moved up and removed, the icon will be slowed down. The effect is no worse than that of flash.
Recommended topics for BKJIA: jQuery from getting started to proficient in jQuery powerful plug-in Parade
Below is: the icons are well designed, so we will not teach you how to design them here.
The following is the JQ code:
- $ (Function (){
- // Append img to LI
- $ ("# Nav-shadow li"). append ('
- Width = "60" height = "32" alt = ""/> '); // This is a shadow image.
- // Append hover event
- $ ("# Nav-shadow li"). hover (function (){
- // Define e for tihs
- Var $ e = this;
- $ ($ E). find ("a"). stop (). animate ({marginTop: '-14px'}, 250, function () {// callback function control
- $ ($ 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 );
- }
- )
- })
Analysis:
First, add reflection:
- $("#nav-shadow li").append('
- width="60" height="32" alt="" />')
Then register the hover event and use the callback function to control the effect of the event. The Shadow distance is controlled by transparency.
The following is the HTML code:
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
-
-
- <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>
-
- <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>
-
When using it, you only need to design a nice icon.
New Source Code download: Download
Link: http://www.cnblogs.com/blacksheep/archive/2011/04/13/2014416.html