这是一款使用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"); }); } });
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!