zoukankan      html  css  js  c++  java
  • jQuery 隐藏图片

     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>
  • 相关阅读:
    pyinstaller相关用法
    yield 与 yield from
    async /await相关知识理解
    调试程序方法pdb
    任务22-4
    任务22-2
    跳台阶
    计算三维空间某点距离原点的欧式距离
    质数判断
    罗马数字转换
  • 原文地址:https://www.cnblogs.com/changweihua/p/2601621.html
Copyright © 2011-2022 走看看