懒人之家--可能是JS网页特效代码收集最全的懒站!

jQuery图片相册点击缩略图弹出大图预览特效

作者/代码整理:  (转载请附加本文地址,带有“懒人原生”字样的谢绝转载) 发布日期:2017-04-03
jQuery图片相册点击缩略图弹出大图预览特效是一款缩略图排列,鼠标点击小图的时候弹出层显示大图,带切换按钮与关闭按钮的js特效代码。


js代码

<script>
	var img_index = 0;
	var img_src = "";

	$(function() {
		//计算居中位置
		var mg_top = ((parseInt($(window).height()) - parseInt($(".photo-div").height())) / 2);

		$(".photo-div").css({
			"margin-top": "" + mg_top + "px"
		});
		//关闭
		$(".photo-close").click(function() {
			$(".photo-mask").hide();
			$(".photo-panel").hide();
		});
		//下一张
		$(".photo-panel .photo-div .arrow-next").click(function() {
			img_index++;
			if(img_index >= $(".demo li img").length) {
				img_index = 0;
			}
			img_src = $(".demo li img").eq(img_index).attr("src");
			photoView($(".demo li img"));
		});
		//上一张
		$(".photo-panel .photo-div .arrow-prv").click(function() {
			img_index--;
			if(img_index < 0) {
				img_index = $(".demo li img").length - 1;
			}
			img_src = $(".demo li img").eq(img_index).attr("src");
			photoView($(".demo li img"));
		});
		//如何调用?
		$(".demo li img").click(function() {
			$(".photo-mask").show();
			$(".photo-panel").show();
			img_src = $(this).attr("src");
			img_index = $(this).index();
			photoView($(this));
		});

	});
	//自适应预览
	function photoView(obj) {
		if($(obj).width() >= $(obj).height()) {
			$(".photo-panel .photo-div .photo-img .photo-view-h").attr("class", "photo-view-w");
			$(".photo-panel .photo-div .photo-img .photo-view-w img").attr("src", img_src);
		} else {
			$(".photo-panel .photo-div .photo-img .photo-view-w").attr("class", "photo-view-h");
			$(".photo-panel .photo-div .photo-img .photo-view-h img").attr("src", img_src);
		}
		//此处写调试日志
		console.log(img_index);
	}
</script>