【图片插件】6种炫酷的鼠标滑过图片显示遮罩层特效

来源:互联网 时间:1970-01-01

插件介绍

这是一款使用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");});}});

【本文来自jQuery之家】


相关阅读:
Top