jq imgview.js

(function($){
$.fn.imgview = function(){
	var that = $(this);
	if($("body>div.imgview").length == 0) creatBox();
	function creatBox(){
		var str = '<style type="text/css">body>div.imgview{position:fixed;top:0px;left:0px;width:100%;height:100%;text-align:center;background:rgba(0, 0, 0, 0.8) !important;z-index:60;overflow-y:scroll;-webkit-overflow-scrolling:touch;display:none;}body>div.imgview>img{max-width:100%;max-height:100%;display:inline-block;text-align:center;}</style>'+
			'<div class="cover imgview">'+
				'<img src="" />'+
			'</div>';
		$(str).appendTo("body");
		$(".imgview").click(function(){$(this).hide()});
	}
	
	that.click(function(){
		$("body>div.imgview").show();
		var img = $("body>div.imgview img");
		img.attr("src",$(this).attr("src"));
		if((img.height())/(img.width()) > 2) img.css({"margin-top":"0px","max-height":"100000000px"});
		else img.css({"margin-top":((img.parent().height()-img.height())/2)+"px","max-height":"100%"});
	});
};
})(jQuery);

使用方法:js引用后
//图片放大
$(".workerend .workerendT img").imgview();
$(".soscomplete .img img").imgview();
$(".soscomment .pinglunimg img").imgview();
posted @ 2022-06-23 18:11  ·一库  阅读(56)  评论(0)    收藏  举报