素材网 素材网

jQuery图片相册点击图片弹出放大显示并带有左右摆动动画效果

下载资源()次

阅读次数()次

发布时间:2017-01-05

jQuery图片相册点击图片弹出放大显示并带有左右摆动动画效果
分享到:

用法简介:

来源:xw素材网

jQuery图片相册点击图片弹出放大显示并带有左右摆动动画效果。
文件引用:

<script src="js/jquery.min.js"></script>
<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>


   

相关标签:

上一篇:jquery插件web网页全屏Banner图片切换带有动画效果 下一篇:已经是最后一篇数据

网友评论:

评论

发表 剩余字数:20

一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!

二、互相尊重,对自己的言论和行为负责。

@ 2013 xwcms.net . All Rights Reserved. xw素材网 | 备案号:晋ICP备13005902号 联系管理员
×

邮箱订阅

什么是邮箱订阅?

邮箱订阅是xw素材网为jquery爱好者与web程序员提供一项以邮箱的方式发送最新jquery资源与素材资源的模式,用户只需在左侧填写正确的邮箱用户名与邮箱地址我们将每天推荐最新优质资源到用户邮箱。当然每份邮箱都会有一个取消订阅按钮,当用户点击取消按钮时我们将会停止对用户发送邮箱资源推送。再次感谢大家对xw素材网的支持与关注。