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 @   ·一库  阅读(50)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通
点击右上角即可分享
微信分享提示