您的位置:首页 > 编程学习 > > 正文

jquery隐藏动画教程(jquery插件实现鼠标隐藏)

更多 时间:2022-04-01 01:46:06 类别:编程学习 浏览量:2204

jquery隐藏动画教程

jquery插件实现鼠标隐藏

本文实例为大家分享了jquery插件实现鼠标隐藏的具体代码,供大家参考,具体内容如下

鼠标悬浮在某个dom上的时候,自动给你隐藏,效果图因为录屏软件的问题,作用不出来

效果如下

jquery隐藏动画教程(jquery插件实现鼠标隐藏)

代码部分

  • <!DOCTYPE html>
    <html>
     <head>
      <meta charset="utf-8">
      <title>做久置隐藏</title>
      <script src="js/jquery-3.4.1.min.js"></script>
      <style>
       *{
        margin: 0;
        padding: 0;
       }
       .box{
        border: 1px solid lightgray;
        width: 100px;
        height: 100px;
        margin: 10px;
        float: left;
       }
      </style>
     </head>
     <body>
      <li class="box" id="box1" style="background-color: #1abc9c;"></li>
      <li class="box" id="box2" style="background-color: #3498db;"></li>
      <li class="box" id="box3" style="background-color: #f1c40f;"></li>
      <li class="box" id="box4" style="background-color: #e74c3c;"></li>
      <li class="box" id="box5" style="background-color: #9b59b6;"></li>
     </body>
    </html>
    <script>
     $(function(){
      $.mh(["#box1","#box3","#box5"]);
      
      
      
     })
     $.extend({
      mh:function(op,time){
       op=op==undefined?[]:op;//对象
       time = time==undefined?500:time;//多久隐藏
       var str = op.join(',');
       var t = null;
       var f = false;
       $(str).mouseenter(function(){
        f = true;
        $(str).css('cursor','default');
       }).mouseleave(function(){
        f = false;
        clearTimeout(t);
        $(str).css('cursor','default');
       }).mousemove(function(){
        if(f){
         $(str).css('cursor','default');
         clearTimeout(t);
         hid();
        }else{
         clearTimeout(t);
        }
       })
       function hid(){
        t =setTimeout(function(){
         $(str).css('cursor','none');
         console.log('隐藏了');
        },time)
       }
      }
     })
    </script>
    
  • 思路解释

    • 把所有动作考虑进去,只要鼠标符合我们的判断,给一个样式cursor:none就完事
    • 此外就是给上cursor:default还原默认样式了

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。