JS/jquery实现鼠标控制页面元素显隐

最近因为公司网站要上一个活动广告横幅,当用户鼠标划过时显隐二维码。像这种鼠标事件控制页面元素显隐的情况,码农们会经常遇到,可以通过javascript或jquery代码实现,下面就几种常见需求一起归纳一下。

专注于为中小企业提供成都网站建设、成都做网站服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业垦利免费做网站提供优质的服务。我们立足成都,凝聚了一批互联网行业人才,有力地推动了上千企业的稳健成长,帮助中小企业通过网站建设实现规模扩充和转变。

mouseout和mouseleave

这里需要特别注意mouseout与mouseleave的区别。我们通过下面代码示例来看一下:






鼠标控制页面元素显隐




  
    
      第此触发mouseout事件
    
  
              第此触发mouseleave事件     
  
  

效果如下:

JS/jquery实现鼠标控制页面元素显隐

fadeIn和fadeOut

前文实例中用的是show()和hide()方法,前台显隐效果瞬间完成,为了提高实际用户体验,这里我们介绍两位更友好的“朋友”,即fadeIn和fadeOut。

fadeIn:方法使用淡入效果来显示目标元素。

fadeOut:方法使用淡出效果来隐藏目标元素

这两个方法可以配置参数来控制速度,比如slow、normal、fast或指定毫秒数。

下面我们就show()、hide()与fadeIn()、fadeOut()的效果坐下对比,代码如下:





鼠标控制页面元素显隐




  
    
      hide和show
    
  
  
    
      fadeIn和fadeOut
    
  
  

效果如下:

JS/jquery实现鼠标控制页面元素显隐

小结

本文我们一起了解学习了通过js或jq实现鼠标事件控制页面元素显隐效果,方法十分简单。如果大家还有更好的其他解决方案,欢迎一起讨论交流。

JS/jquery实现鼠标控制页面元素显隐
分享题目:JS/jquery实现鼠标控制页面元素显隐
分享链接:http://myzitong.com/article/peoijh.html

其他资讯