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

3.5k 前端 发表评论

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

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="http://apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script>
<style type="text/css">
    *{margin:0;padding:0;}
    a,img{border:0;}
    body{color:#898989;font:12px/180% Arial;}
    a{color:#898989;text-decoration:none}
    a:hover{cursor:pointer;color:#9f8054;}

   /* 容器样式 */
    .light{float:left;position:relative;overflow:hidden;width:196px;height:126px;float:left;margin-right:3px;display:inline;}

   /* 替换元素样式 */
    .box{ width:100%; height:100%; background:#020000; position:absolute; left:0; line-height:18px; color:#e69714; filter:alpha(Opacity=80); -moz-opacity:0.8; opacity: 0.8; text-align:center; cursor:pointer;}
</style>

<script type="text/javascript">
    $(function(){
    // 容器
    var light = $('.light');
   // 替换元素距离顶部等于容器的高度,也就是默认在容器下方
    $('.box').css('top', light.css('height'));
    light.hover(
       // 鼠标在容器上时,替换元素移动容器上,透明度80%
       function(){
          $(this).children('.box').stop(true, true).delay(0).animate({'top':0, opacity:0.8}, 300);
      // 鼠标移出后,淡出
      },function(){
          $(this).children('.box').stop(true, true).animate({'top':$(this).css('height'), opacity:0}, 300);
       })
    })
</script>
</head>
<body>
   <span class="light">
       <img src="https://www.awaimai.com/wp-content/uploads/2015/12/t2.png" width="196" height="126"/>
       <div class="box">
          <img src="https://www.awaimai.com/wp-content/uploads/2015/12/t3.png" width="196" height="126"/>
       </div>
   </span>
   <span class="light">
       <img src="https://www.awaimai.com/wp-content/uploads/2015/12/t2.png" width="196" height="126"/>
       <div class="box">
          <h3>标题</h3>
          <p>介绍...</p>
          <a href="https://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="http://apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script>
<style type="text/css">
    *{margin:0;padding:0;}
    a,img{border:0;}
    body{color:#898989;font:12px/180% Arial;}
    a{color:#898989;text-decoration:none}
    a:hover{cursor:pointer;color:#9f8054;}

    /* 容器样式 */
    .light{float:left;position:relative;overflow:hidden;width:196px;height:126px;float:left;margin-right:3px;display:inline;}

    /* 替换元素样式 */
    .box{ width:100%; height:100%; background:#020000; position:absolute; left:0; top: 0;
    line-height:18px; color:#e69714; filter:alpha(Opacity=0); -moz-opacity:0; opacity: 0; text-align:center; cursor:pointer;}
 
</style>

<script type="text/javascript">
    $(function(){
    $('.light').hover(
       // 鼠标在容器上时,替换元素移动容器上,透明度80%
       function(){
       $(this).children('.box').stop(true, true).delay(0).animate({opacity:0.8}, 300);

      // 鼠标移出后,淡出
      },function(){
       $(this).children('.box').stop(true, true).animate({opacity:0}, 300);
     })
 })
</script>
</head>
<body>
   <span class="light">
       <img src="https://www.awaimai.com/wp-content/uploads/2015/12/t2.png" width="196" height="126"/>
       <div class="box">
          <img src="https://www.awaimai.com/wp-content/uploads/2015/12/t3.png" width="196" height="126"/>
       </div>
   </span>
   <span class="light">
       <img src="https://www.awaimai.com/wp-content/uploads/2015/12/t2.png" width="196" height="126"/>
       <div class="box">
          <h3>标题</h3>
          <p>介绍...</p>
          <a href="https://www.awaimai.com/">查看详细</a>
       </div>
   </span>
</body>
</html>

这两个功能借鉴站长中国素材:http://sc.chinaz.com/jiaoben/150128505800.htm 。

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

昵称 *