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>