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>