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

jQuery鼠标滑过图片显示遮罩背景层代码-精品资源网
jQuery鼠标滑过图片显示遮罩背景层代码
此内容为免费资源,请登录后查看
0
免费资源

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>

© 版权声明
THE END
点赞0 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容