蒙板进入离开效果的制作

浅浅的花香味﹌ 2023-08-17 17:20 64阅读 0赞

1 <!DOCTYPE html>
     2 <html>
     3 <head lang="en">
     4     <meta charset="UTF-8">
     5     <title></title>
     6     <script src="js/jquery-2.0.1.min.js"></script>
     7     <style>
     8         .nav {
     9             width: 200px;
    10             height: 200px;
    11             position: relative;
    12         }
    13         .beijing {
    14             width: 200px;
    15             height: 200px;
    16         }
    17         .top {
    18             top: -100px;
    19             left: -100px;
    20             background-color: aquamarine;
    21             opacity: 0.5;
    22             position: absolute;
    23 
    24         }
    25         .bottom {
    26             bottom: 0px;
    27             right: 0px;
    28             background-color: aquamarine;
    29             opacity: 0.5;
    30             position: absolute;
    31         }
    32         .wenzi {
    33             width: 150px;
    34             height: 180px;
    35             position: absolute;
    36             top: 5px;
    37             left: 5px;
    38             display: none;
    39         }
    40     </style>
    41     <script>
    42         $(function(){
    43             $("div.nav").hover(function(){
    44                 $("div.top").stop(false,true).animate({
        "top":"0","left":"0"},200);
    45 
    46                 $("div.top").stop(false,true).animate({
        "height":"100","width":"200"},500);
    47                 $("div.bottom").stop(false,true).animate({
        "height":"100","width":"200"},500);
    48                 $("div.wenzi").stop(false,true).fadeIn(500);
    49             });
    50             $("div.nav").mouseleave(function(){
    51                 $("div.top").stop(false,true).animate({
        "height":"0","width":"0","top":"0","left":"0"},500);
    52                 $("div.bottom").stop(false,true).animate({
        "height":"0","width":"0","bottom":"0","right":"0"},500);
    53                 $("div.wenzi").stop(false,true).fadeOut(500);
    54 
    55             });
    56         });
    57     </script>
    58 </head>
    59 <body>
    60 <div class="nav">
    61     <img src="images/c.png" class="beijing"/>
    62     <div class="top"></div>
    63     <div class="bottom"></div>
    64     <div class="wenzi">做个温文尔雅的女孩子<br>~安安静静 静听花开</div>
    65 </div>
    66 </body>
    67 </html>

在做这个效果时首先遇到的的问题是如何让蒙板飞入飞出，因为开始的时候把蒙板的div定位在了nav里，所以他一直在盒子里无法出去再进来。问题的解决方案是：开始把蒙板定位到盒子外面。这样就有了进入出去的空间。  
第二个问题是连续鼠标滑入滑出出现的bug~即鼠标已经离开，但是那些函数还在执行，这种问题的解决方案是在滑入函数中加入stop()方法，清除没有来得及执行的动画。

转载于:https://www.cnblogs.com/s-z-y/p/4585888.html