Write code below
HTML structure:
The code is as follows |
Copy Code |
<a id= "logo" href= "" ><span> Web Tutorial Network </span></a> |
CSS code:
The code is as follows |
Copy Code |
#logo { margin:0 Auto; position:relative;/* relative positioning, for the following hover absolute positioning * * Background:url (fatkun.png) left top no-repeat;/* Set Background map * * width:150px; height:40px;/* Notice the height here. Display:block; text-indent:-9999px; } #logo. hover{/* for JQ preparation for * * Background:url (fatkun.png) left bottom no-repeat;/*background-position and above different * * position:absolute;/* to make the two pictures overlap together. top:0; left:0; height:40px; width:150px; } |
Finally, the most important jquery code appears.
code is as follows |
copy code |
<script type=" Text/javascript "src=" http:// Ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js "></script> <script type=" Text/javascript "" $ ("#logo"). Append ("<span class= ' hover ' ></span>"); Add a label to overlap the gray chart $ (". Hover"). CSS (' opacity ', 0);//Do not display $ (". Hover") first. Parent (). Hover ( function () { $ (". Hover"). Stop (). Animate ({opacity: ' 1 '},1000) ; }, function () { $ (". Hover"). Stop (). Animate ({opacity: ' 0 '}, 1000); }); </script> |
Full instance
The code is as follows |
Copy Code |
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/> <title>jquery Background Map Fade </title> <style type= "Text/css" > body{ padding-top:100px; Text-align:center; } #logo { margin:0 Auto; position:relative;/* relative positioning, for the following hover absolute positioning * * Background:url (fatkun.png) left top no-repeat;/* Set Background map * * width:150px; height:40px;/* Notice the height here. Display:block; text-indent:-9999px; } #logo. hover{/* for JQ preparation for * * Background:url (fatkun.png) left bottom no-repeat;/*background-position and above different * * position:absolute;/* to make the two pictures overlap together. top:0; left:0; height:40px; width:150px; } </style> <body> <a id= "logo" href= "http://111cn.net" ><span>111cn.net</span></a> 111cn.net <script type= "Text/javascript" src= "Http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" ></ Script> <script type= "Text/javascript" > $ ("#logo"). Append ("<span class= ' hover ' ></span>");//Add a label to overlap with the gray graph $ (". Hover"). CSS (' opacity ', 0);//Not shown first $ (". Hover"). Parent (). Hover ( function () { $ (". Hover"). Stop (). Animate ({opacity: ' 1 '},1000); }, function () { $ (". Hover"). Stop (). Animate ({opacity: ' 0 '},1000); }); </script> </body>
|