jQuery炫酷鼠标滑过图片显示遮罩层特效

分类: 图片相关
时间: 2017-05-23 10:50:43
编辑: 墨倾天下
浏览: 1146

下载次数：4 文件大小：453.81KB 所需积分：0 QQ联系购买积分：3331653644（1元=10积分）

$(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");
        }).mouseleave(function(){
            $(this).removeClass("hover");
        });
    }
});

适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。

标签:

jquery