jquery实现鼠标移入移除背景图片切换

浏览数：170 / 时间：2015年06月09日

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <script type="text/javascript" src="jquery.js" mce_src="jquery.js"></script>  
 6 <script type="text/javascript">  
 7     $(document).ready(function(){  
 8         $("#sub").css("left",$("#super").offset().left);  
 9         $("#sub").css("top", $("#super").offset().top);  
10           
11         $("#super").css("background-image","url(banner1.jpg)");  
12         $("#sub").css("background-image","url(banner2.jpg)");  
13         $(‘#sub‘).css(‘opacity‘, 0);   
14           
15         $("#sub").hover(  
16             function() {  
17                 $("#super").stop().animate({opacity: ‘0‘},500);  
18                 $("#sub").stop().animate({opacity: ‘1‘},500);  
19             },   
20             function() {  
21                 $("#sub").stop().animate({opacity: ‘0‘},500);  
22                 $("#super").stop().animate({opacity: ‘1‘},500);  
23             });  
24         }  
25     );   
26 </script> 
27 <style>  
28     *{margin:0;padding:0;}
29     #super{  
30         width:1440px;  
31         height:100px;
32         position:relative;
33         margin:auto;  
34     }  
35     #sub {  
36         width:1440px;  
37         height:100px;  
38         position:absolute; 
39         margin:auto;  
40     }  
41 </style>
42 </head> 
43   
44 <body>  
45 <div id="super"></div>
46 <div id="sub"></div>  
47 </body>  
48 </html>