首页
前端开发
Javascript
jQuery鼠标悬停滑出遮罩效果

jQuery鼠标悬停滑出遮罩效果

0 次浏览 0 条评论
rar
rar

鼠标悬停时遮罩从上滑出的效果，挺常见的，不管是做图片展示还是导航提示，视觉上都挺吸睛的。这个用jQuery来搞其实还蛮顺手，代码简单，响应也快，适合刚上手或者想快速出效果的你。

HTML 结构这块，目标元素上包个div，加个.overlay遮罩层，初始display: none就好。遮罩内容你可以写点提示语、按钮啥的，完全看场景来。

引入jQuery，CDN 或者本地都行，没啥区别。放在</body>前就稳了。

核心逻辑用hover函数搞定，鼠标一进就fadeIn，一出就fadeOut。加个stop()是为了防止动画卡顿，体验会更顺畅：

$(document).ready(function() {
  $('.target-element').hover(function() {
    $('.overlay').stop().fadeIn('slow');
  }, function() {
    $('.overlay').stop().fadeOut('fast');
  });
});

CSS 这块，主要靠position: fixed定位到全屏，z-index拉高，background-color设成半透明那种，就有那味了：

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
  z-index: 999;
}

这个效果在展示商品图、做提示弹层时还挺实用的。如果你想搞更复杂的动画，比如从上滑下来那种，slideDown也能派上用场，或者配合animate自定义高度变化。

如果你用的是Vue或React，逻辑类似，只是事件绑定方式不一样。想快速上手，还是 jQuery 这种方式最直接。

rar 文件大小：136.64KB