长按放大全屏图片js

/**
 * @author zhengzhen
 * @version v1.2
 * 2018-4-27
 * 长按全屏放大图片js
 * 使用方法在文档最后引用该js,不需要放大的图片请添加上not-big样式
 * 例如:<img src="xxxxxx" class="not-big"/>
 */

var viewportSize = getViewportSize();
//动态获取屏幕大小
function getViewportSize() {
	return {
		width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
		height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
	};
}
/**
 * 设置图片放大层的宽度和高度
 */
$("#big-img-box").height(viewportSize.height + "px");
$("#big-img-box").width(viewportSize.width + "px");

$(document.head).append("<style type='text/css'>"
	+"#big-img-box{"
		+"position: fixed;"
		+"z-index: 1002;"
		+"top: 0;"
		+"left: 0;"
		+"opacity: 0.9;"
		+"-moz-opacity: 0.9;"
		+"background: #353535;}"
	+"#big-img-box img{"
		+"opacity: 1;"
		+"width: auto;"
		+"height: auto;"
		+"max-width: 90%;"
		+"max-height: 90%;"
		+"border: 1px solid #888888;"
		+"position: absolute;"
		+"margin: auto;"
		+"top: 0;"
		+"left: 0;"
		+"right: 0;"
		+"bottom: 0;"
		+"background: #F2F2F2;"
		+"z-index: 1003;}"
	+"</style>");
$(document.body).prepend("<div id='big-img-box'></div>")
//长按放大图片
var longTouchBigImg = {
	touchstart: function(e) {
		timeOutEvent = setTimeout("longPress()", 500);
		e.preventDefault();
	},
	touchmove: function() {
		clearTimeout(timeOutEvent);
		timeOutEvent = 0;
	},
	touchend: function() {
		clearTimeout(timeOutEvent);
		//console.log(timeOutEvent);
		if(timeOutEvent != 0) { //单击事件
			$(this).parents("#big-img-box").click();
			ableScroll();
		} else {
			if($("#big-img-box img").length ==0){
				disableScroll();
				var divBox = document.getElementById("big-img-box");
				divBox.style.height = viewportSize.height + "px";
				divBox.style.width = viewportSize.width + "px";
				var img = this.cloneNode();
				$(divBox).slideDown(500).append($(img));//.addClass("img-responsive center-block")
			}

		}
		return false;
	}
}

function longPress() {
	timeOutEvent = 0;
	console.log("长按事件触发发");
}

/**
 * 图片放大以后禁止 滚动禁止屏幕滚动
 */
function disableScroll() {
	//禁止滚动条
	$(document.body).css({
		"overflow-x": "hidden",
		"overflow-y": "hidden"
	});
}
/**
 * 允许屏幕滚动
 */
function ableScroll() {
	//启用滚动条
	$(document.body).css({
		"overflow-x": "auto",
		"overflow-y": "auto"
	});
}

$(function() {
	//设置所有图片长按放大事件
	$("img:not(.not-big)").on(longTouchBigImg);
	//点击隐藏放大以后的图片
	$("#big-img-box").click(function() {
		$(this).slideUp(500, function() {
			$(this).empty();
		});
	});
	document.addEventListener("DOMSubtreeModified", function() {

		//设置所有图片长按放大事件
		$("img:not(.not-big)").unbind(longTouchBigImg);
		$("img:not(.not-big)").on(longTouchBigImg);
		//点击隐藏放大以后的图片
		$("#big-img-box").unbind("click");
		$("#big-img-box").click(function() {
			$(this).slideUp(500, function() {
				$(this).empty();
			});
		});
	});
});

/**
 * 监听屏幕变化
 */
window.addEventListener("orientationchange", function() {
	//延时执行,否则会获取翻转前的高度
	setTimeout(function() {
		viewportSize = getViewportSize();
		
		/**
		 * 设置图片放大层的宽度和高度
		 */
		$("#big-img-box").height(viewportSize.height + "px");
		$("#big-img-box").width(viewportSize.width + "px");

	}, 200);

});