首页 > 代码库 > jquery实现鼠标移入移除背景图片切换
jquery实现鼠标移入移除背景图片切换
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>
jquery实现鼠标移入移除背景图片切换
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。