1 <!DOCTYPE HTML Public "-//W3C//DTD XHTML 1.0 transitional//en" "http://www.w3.org/TR/xhtml1/DTD/ Xhtml1-transitional.dtd ">2 <HTMLxmlns= "http://www.w3.org/1999/xhtml">3 <Head>4 <Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" />5 <Scripttype= "Text/javascript"src= "Jquery.js"mce_src= "Jquery.js"></Script> 6 <Scripttype= "Text/javascript"> 7 $ (document). Ready (function(){ 8 $("#sub"). CSS (" Left",$("#super"). Offset (). left); 9 $("#sub"). CSS ("Top", $("#super"). Offset (). top); Ten One $("#super"). CSS ("Background-image","URL (banner1.jpg)"); A $("#sub"). CSS ("Background-image","URL (banner2.jpg)"); - $('#sub'). CSS ('Opacity', 0); - the $("#sub"). Hover ( - function() { - $("#super"). Stop (). Animate ({opacity:'0'}, -); - $("#sub"). Stop (). Animate ({opacity:'1'}, -); + }, - function() { + $("#sub"). Stop (). Animate ({opacity:'0'}, -); A $("#super"). Stop (). Animate ({opacity:'1'}, -); at }); - } - ); - </Script> - <style> - *{margin:0;padding:0;} in #super{ - width:1440px; to Height:100px; + position:relative; - margin:Auto; the } * #sub{ $ width:1440px; Panax Notoginseng Height:100px; - position:Absolute; the margin:Auto; + } A </style> the </Head> + - <Body> $ <DivID= "Super"></Div> $ <DivID= "Sub"></Div> - </Body> - </HTML>
jquery implements mouse move to remove background picture toggle