jquery隐藏动画教程(jquery插件实现鼠标隐藏)
类别:编程学习 浏览量:2204
时间:2022-04-01 01:46:06 jquery隐藏动画教程
jquery插件实现鼠标隐藏本文实例为大家分享了jquery插件实现鼠标隐藏的具体代码,供大家参考,具体内容如下
鼠标悬浮在某个dom上的时候,自动给你隐藏,效果图因为录屏软件的问题,作用不出来
效果如下
代码部分
<!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还原默认样式了
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- jquery deferred对象
- jquery on绑定hover
- MVC中使用jQuery加载分部视图(PartialView)
- jquery抛物线动画加入购物车
- jquery导航栏动画(jQuery实现带展开动画的导航栏效果)
- jQuery如何跳出each循环
- Jquery对数组的操作
- jquery遍历json字符串
- jquery中index()
- JQuery中extend的用法
- jquery的each的用法
- 如何用jquery进行表单验证(jQuery实现发送验证码控制按钮禁用功能)
- jquery留言板代码(JavaScript实现留言板添加删除留言)
- jQuery on()方法
- jQuery中noConflict()的用法
- jQuery end()
- 14岁丧父 20岁丧母,从苦难走向辉煌的银泰创始人沈国军(14岁丧父20岁丧母从苦难走向辉煌的银泰创始人沈国军)
- 银泰集团董事长沈国军获评 北京影响力 十大企业家(银泰集团董事长沈国军获评)
- 15帅气男士发型,清爽时尚很有型,喜欢就试试(清爽时尚很有型)
- 哪几个历史人物被影协主席李雪健演的活灵活现(哪几个历史人物被影协主席李雪健演的活灵活现)
- 王伦狭隘,晁盖霸道,宋江奸诈骨头软,只有鲁智深才适合当寨主(王伦狭隘晁盖霸道)
- 他是梁山最早的头目,江湖人称 旱地忽律 ,宋江几乎将其遗忘(他是梁山最早的头目)
热门推荐
- ASP.NET中Server对象的用法
- sql语句实现分页(SQL 窗口函数实现高效分页查询的案例分析)
- css 最高层级(浅谈CSS 权值 层叠 重要性!important)
- 最简单python的100个代码(20条非常实用的Python代码实例)
- django 获取请求参数(深入理解Django-Signals信号量)
- dedecms提示怎么去除(DEDECMS网站被挂马的解决办法)
- mybatis为什么还用mysql(关于MyBatis连接MySql8.0版本的配置问题)
- 微信小程序js 抽奖概率(小程序实现筛子抽奖)
- css3loading教程(详解纯CSS3制作的20种loading动效)
- 护卫神主机大师教程(护卫神主机大师Linux版安装及卸载图文教程)