这是一款使用jQuery和CSS3制作的炫酷的鼠标滑过图片显示遮罩层特效。该图片制作层特效共6种不同的效果，使用一些简单的jQuery代码和CSS3过渡效果来完成，简单实用，可以为网站图片添加非常不错的效果。
制作方法
HTML结构
该图片遮罩效果的基本HTML结构如下：
<div id="effect-1" class="effects clearfix"> <div class="img"> <img src="img/jpg/1.jpg" alt=""> <div class="overlay"> <a href="#" class="expand">+</a> <a class="close-overlay hidden">x</a> </div> </div> ...</div> |
在上面的.close-overlay标签是一个关闭按钮，它用于在移动触摸设备中关闭遮罩层，在大屏幕显示器中你不会看到它。
CSS样式
该图片遮罩层效果的通用CSS样式如下：
.effects { padding-left: 15px;}.effects .img { position: relative; float: left; margin-bottom: 5px; width: 25%; overflow: hidden;}.effects .img:nth-child(n) { margin-right: 5px;}.effects .img:first-child { margin-left: -15px;}.effects .img:last-child { margin-right: 0;}.effects .img img { display: block; margin: 0; padding: 0; max-width: 100%; height: auto;}.overlay { display: block; position: absolute; z-index: 20; background: rgba(0, 0, 0, 0.8); overflow: hidden; transition: all 0.5s;}a.close-overlay { display: block; position: absolute; top: 0; right: 0; z-index: 100; width: 45px; height: 45px; font-size: 20px; font-weight: 700; color: #fff; line-height: 45px; text-align: center; background-color: #000; cursor: pointer;}a.close-overlay.hidden { display: none;}a.expand { display: block; position: absolute; z-index: 100; width: 60px; height: 60px; border: solid 5px #fff; text-align: center; color: #fff; line-height: 50px; font-weight: 700; font-size: 30px; border-radius: 30px;} |
通过上面的通用CSS样式，已经为遮罩层，链接按钮和关闭按钮提供了必要的样式。下面是效果1的图片遮罩层样式：
/* ============================================================ EFFECT 1 - SLIDE IN BOTTOM============================================================ */#effect-1 .overlay { bottom: 0; left: 0; right: 0; width: 100%; height: 0;}#effect-1 .overlay a.expand { left: 0; right: 0; bottom: 50%; margin: 0 auto -30px auto;}#effect-1 .img.hover .overlay { height: 100%;} |
JAVASCRIPT
该图片遮罩层特效使用Modernizr来检测浏览器，并在相应的事件中为图片添加和移除相应的CLASS。
$(document).ready(function(){ if (Modernizr.touch) { // show the close overlay button $(".close-overlay").removeClass("hidden"); // handle the adding of hover class when clicked $(".img").click(function(e){ if (!$(this).hasClass("hover")) { $(this).addClass("hover"); } }); // handle the closing of the overlay $(".close-overlay").click(function(e){ e.preventDefault(); e.stopPropagation(); if ($(this).closest(".img").hasClass("hover")) { $(this).closest(".img").removeClass("hover"); } }); } else { // handle the mouseenter functionality $(".img").mouseenter(function(){ $(this).addClass("hover"); }) // handle the mouseleave functionality .mouseleave(function(){ $(this).removeClass("hover"); }); }}); |
