jQuery悬浮遮罩显示图片或文字效果jquery

/ / 2016-09-22 阅读：2495

一直在寻找一款能够实现鼠标悬浮遮罩的效果，找了好久硬是没有找到合适的，好不容易找到一个，又实际需求不一样，必须要自己修改。如下是修改后的两个效果。一个是鼠标悬浮后从下往上遮罩，一个是在当前图片上逐渐显...

一直在寻找一款能够实现鼠标悬浮遮罩的效果，找了好久硬是没有找到合适的，好不容易找到一个，又实际需求不一样，必须要自己修改。如下是修改后的两个效果。一个是鼠标悬浮后从下往上遮罩，一个是在当前图片上逐渐显示。

1、从下往上遮罩
代码如下，为方便测试，将一下代买直接复制成HTML文件就可以看到效果了：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery遮罩显示图片文字效果</title>

<script type="text/javascript" src="/uploads/image/20161206//20161206234309_738140.png" width="196" height="126"/>
       <div class="box">
          <img src="/uploads/image/20161206//20161206234309_738141.png" width="196" height="126"/>
       </div>
   </span>
   <span class="light">
       <img src="/uploads/image/20161206//20161206234309_738142.png" width="196" height="126"/>
       <div class="box">
          <h3>标题</h3>
          <p>介绍...</p>
          <a href="http://www.awaimai.com/">查看详细</a>
       </div>
   </span>
</body>
</html>

2 渐渐显示遮罩
逐渐显示遮罩的方式代码更为简单，如下，不需要JQuery获取容器的高度，同样复制保存成html代码可以预览到效果：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery遮罩显示图片文字效果</title>

<script type="text/javascript" src="/uploads/image/20161206//20161206234136_536983.png" width="196" height="126"/>
<div class="box">
<img src="/uploads/image/20161206//20161206233921_828471.png" width="196" height="126"/>
</div>
</span>
<span class="light">
<img src="/uploads/image/20161206//20161206233921_828472.png" width="196" height="126"/>
<div class="box">
<h3>标题</h3>
<p>介绍...</p>
<a href="http://www.awaimai.com/">查看详细</a>
</div>
</span>
</body>
</html>

上一篇：JQuery的checkbox、radio、select方法

下一篇：JQuery实现轻量级滑动悬浮固定功能

阅读延展

jQuery悬浮遮罩显示图片或文字效果jquery

我要评论

最新评论