请选择 进入手机版 | 继续访问电脑版
切换皮肤
JS/jquery实现鼠标控制页面元素显隐
最近因为公司网站要上一个活动广告横幅,当用户鼠标划过时显隐二维码。像这种鼠标事件控制页面元素显隐的情况,码农们经常会遇到,可以通过javascript或jquery代码实现,下面就几种常见需求一起归纳一下。
mouseout和mouseleave
对于鼠标指针的移入和移出,就涉及到了mouseover、mouseout和mouseleave事件。
mouseover:当鼠标指针移到目标元素时触发该事件;
mouseout:当鼠标指针移出目标元素或其子元素时,都会触发该事件;
mouseleave:只有当鼠标指针移出目标元素时,才会触发该事件;
这里需要特别注意mouseout与mouseleave的区别。我们通过下面代码示例来看一下:
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>鼠标控制页面元素显隐</title>
  6. <script src="http://apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script>
  7. <style>
  8.   #boxout,#boxleave{
  9.   width:250px;
  10.   height:100px;
  11.   padding-top:20px;
  12.   background-color:#cccccc;
  13.   float:left;
  14.   margin-left:30px;
  15.   }
  16.    
  17.   #boxoutson,#boxleaveson{
  18.   width:200px;
  19.   height:50px;
  20.   background-color:yellow;
  21.   padding:0px auto;
  22.   margin:0px auto;
  23.   }
  24. </style>
  25. </head>
  26. <body>
  27.   <div id="boxout">
  28.     <div id="boxoutson">
  29.       第<span></span>此触发mouseout事件
  30.     </div>
  31.   </div>
  32.   <div id="boxleave">
  33.     <div id="boxleaveson">
  34.       第<span></span>此触发mouseleave事件
  35.     </div>
  36.   </div>
  37.   <script>
  38. x=0;
  39. y=0;
  40.   $("#boxout").mouseout(function() {  
  41.         $("#boxout span").text(x+=1);  
  42.     });  
  43.   $("#boxleave").mouseleave(function() {  
  44.   $("#boxleave span").text(y+=1);  
  45.   });  
  46. </script>
  47. </body>
  48. </html>
复制代码
效果如下:
1526543613654160.gif
show/hide VS fadeIn/fadeOut
show()和hide()方法在前台显隐效果瞬间完成,为了提高实际用户体验,这里我们介绍两位更友好的“朋友”,即fadeIn和fadeOut。
fadeIn:方法使用淡入效果来显示目标元素。
fadeOut:方法使用淡出效果来隐藏目标元素
这两个方法可以配置参数来控制速度,比如slow、normal、fast或指定毫秒数。
下面我们就show()、hide()与fadeIn()、fadeOut()的效果坐下对比,代码如下:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>鼠标控制页面元素显隐</title>
  6. <script src="http://apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script>
  7. <style>
  8.   #box1,#box2{
  9.   width:250px;
  10.   height:100px;
  11.   padding-top:20px;
  12.   background-color:#cccccc;
  13.   float:left;
  14.   margin-left:30px;
  15.   }
  16.    
  17.   #box1son,#box2son{
  18.   width:200px;
  19.   height:50px;
  20.   background-color:yellow;
  21.   padding:0px auto;
  22.   margin:0px auto;
  23.   }
  24. </style>
  25. </head>
  26. <body>
  27.   <div id="box1">
  28.     <div id="box1son">
  29.       <span>hide和show</span>
  30.     </div>
  31.   </div>
  32.   <div id="box2">
  33.     <div id="box2son">
  34.       <span>fadeIn和fadeOut</span>
  35.     </div>
  36.   </div>
  37.   <script>
  38.     $("#box1 span").hide();
  39.   $("#box1").mouseover(function() {
  40.         $("#box1 span").show();
  41.     }).mouseleave(function() {
  42.         $("#box1 span").hide();
  43.     });
  44.   $("#box2 span").hide();
  45.   $("#box2").mouseover(function() {  
  46.         $("#box2 span").fadeIn("slow");  
  47.     }).mouseleave(function() {  
  48.         $("#box2 span").fadeOut("slow");  
  49.     });  
  50. </script>
  51. </body>
  52. </html>
复制代码
效果如下:
1526543690706319.gif
小结
本文我们一起了解学习了通过js或jq实现鼠标事件控制页面元素显隐效果,方法十分简单。如果大家还有更好的其他解决方案,欢迎一起讨论交流。
作者:蝉知企业门户,QQ/微信:753391279,专注网站建设、运维及企业web应用开发技术。更多技术干货分享,欢迎关注公众号。 1Q8Fk5DiC8iKFF.gif



回复

使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则


    Archiver|手机版|小黑屋|齐聚无忧 |网站地图

    Powered by Discuz! X3.4  © 2001-2013 Comsenz Inc.