响应式图片透明遮罩层效果

效果：初始时遮罩层露出一小部分                                                                   

 

鼠标悬停时透明遮罩层遮住整个图片：                                                               

思路：                                                                                                            

因为是响应式布局~图片的大小会随着页面的变化而变化~在实现时遮罩层遮罩层和图片的宽高相同~同时遮罩层和图片作为同级元素~在这两个元素外套一个div父元素~设置父元素的相对定位和遮罩层的绝对定位~设置top和left~当鼠标悬停时设置transform实现遮罩层逐渐上升遮住图片的动画效果

问题：                                                                                                                              1、top值如果根据图片高度的百分比来设置会因为图片大小的变化而导致遮罩层初始露出高度不定~有时过高有时过低~如果用一个固定的值来做处置也会因为图片大小变化时导致未悬停时高度不合适~

2、当窗口发生变化时~hover伪类中设置top的渐变效果不起作用

解决：                                                                                                            

1、使用js获取图片的高度~并设置鼠标未悬停在遮罩层上时期其初始高度始终为45px~（masks[i].style.top=(masks[i].offsetHeight - 45)+"px";）~并将此操作封装到函数mask中~在resize事件中调用（$(window).resize(mask)）~同时因为不确定页面在什么设备上被加载~需要在load事件中动态设置top的初始值（$(window).load(mask)）

2、使用上述方法可以使得图片在不同设备中显示时~鼠标未悬停在遮罩层上时其初始高度都是一个合适的定值~但是又带来了另一个问题~当浏览器窗口大小被手动调整时~设置的transform动画不起作用~测试后发现只要调用了mask方法后transform动画效果就不再起作用~原因是top值被覆盖~导致鼠标悬停时transform的终止top值和鼠标未悬停时的初始top值相同~故动画看起来没有效果~这是需要在hover伪类中设置top值时加上！important以保证hover时top值不会因调用了mask而被重设覆盖

代码：                                                                                                            

html：                                                                                                                                         

 

1 <div class="mask-container"><!--mask-container为css样式类-->
2 　　<img src="imgs/intel.web.368.207.1.jpg" alt="大图1旁边的小图1" />
3　　<div class="mask">
　　　　<h4>解密2合1电脑</h4>
5   </div><!--mask为css样式类-->
6 </div>

 

js代码：                                                                                                                                       

1 function mask() {
2     var masks = $(".mask");
3     for(var i = 0; i < masks.length; i++){
4         masks[i].style.top=(masks[i].offsetHeight - 45)+"px";
5     }
6     console.log("hehe");
7 }
8 $(window).resize(mask);
9 $(window).load(mask);

 

css（less）代码：

 

.mask-container {
  position: relative;
  overflow: hidden;
  .mask {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    color: #fff;
    padding: 5px;
    background-color: rgba(0,0,0,0.6);//这里不能用opacity来设置遮罩层的透明~这样会使得上面的字也变得透明~于是设置背景色的透明
    &:hover {
      top: 0 !important;//此处!important是关键~
      -webkit-transform: top @transform-time;
         -moz-transform: top @transform-time;
          -ms-transform: top @transform-time;
           -o-transform: top @transform-time;
              transform: top @transform-time;
    }
  }
}

 

转载于:https://www.cnblogs.com/Liujunyan/p/4924414.html