达州做网站

咨询热线：

028-86922220

关于我们

服务项目

小程序开发

案例展示

建站动态

联系我们

地址：成都市太升南路288号锦天国际A幢1002号

电话：028-86922220

028-86922220

大橙子网站建设，新征程启航

为企业提供网站建设、域名注册、服务器等服务

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实现鼠标控制页面元素显隐
分享网址：http://dzwzjz.com/article/peoijh.html

其他资讯