{
    分享网正式开通,我们为大家提供免费资源,欢迎大家踊跃投稿!

jQuery鼠标滑过图片显示遮罩背景层代码

个人觉得比较好看的一款jQuery鼠标滑过图片显示遮罩背景层代码特效,基于jQuery和CSS3制作。


JS代码:

<script src="http://libs.useso.com/js/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
<script>window.jQuery || document.write('<script src="js/jquery-2.1.1.min.js"><\/script>')</script>
<script src="js/modernizr.js"></script>
<script>
	$(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");
			});
		}
	});
</script>


在线预览
资源均来自第三方,谨慎下载,前往第三方网站下载


爱资源分享网 , 版权所有丨本站资源仅限于学习研究,严禁从事商业或者非法活动!丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:jQuery鼠标滑过图片显示遮罩背景层代码
喜欢 ()分享 (0)