1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>隐藏图片</title> 6 <style> 7 .style1 8 { 9 width:150px; 10 height:200px; 11 margin:0; 12 padding:0; 13 } 14 .style2 15 { 16 position:absolute; 17 } 18 div 19 { 20 position:absolute; 21 top:200px; 22 left:200px; 23 } 24 </style> 25 <script type="text/javascript" src="jquery-1.7.2.min.js"></script> 26 <script type="text/javascript"> 27 $(function(){ 28 29 $('#img1').mouseover(function(){ 30 id= "img1"; 31 var img = $('#' + id); 32 var h = img.height(); 33 34 var orignTop = $(img).position().top; 35 var pos = img.position(); 36 var half = h / 2 + orignTop; 37 38 img.css({top:orignTop}); 39 img.toggleClass("style2"); 40 41 img.animate({ 42 top:half,//pos.top < half ? pos.top + step : half , 43 height:0//$(this).height() - step 44 },3000,function(){ 45 img.toggleClass("style2"); 46 }); 47 48 }); 49 //$('#btnTest1').mouseover(function(){$('#btnTest2').click();}); 50 51 }); 52 </script> 53 </head> 54 55 <body> 56 <!--<input type="button" value="按钮1" id="btnTest1" /> 57 <input type="button" value="按钮2" id="btnTest2" />--> 58 <div> 59 <img src="img1.JPG" class="style1" id="img1" /> 60 </div> 61 </body> 62 </html>