查看大图功能代码

最新推荐文章于 2024-06-29 20:42:30 发布

真熙_cc

最新推荐文章于 2024-06-29 20:42:30 发布

阅读量968

点赞数

分类专栏： CSS 文章标签： JavaScript 查看大图

本文链接：https://blog.csdn.net/innodyz/article/details/14169637

版权

CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

/*查看大图*/
	var screenheight = $(window).height();
	var screenwidth = $(window).width();
	var loadCSS = function(){
		var screenwidth = $(window).width();
		var screenheight = $(window).height();
		$("div.lookBigPicture").css({"left":screenwidth*0.2,"top":screenheight*0.15+$(document).scrollTop(),
			 "width":screenwidth*0.6,"height":screenheight*0.7});
		$("img.bigImg").css({"max-width":(screenwidth*0.6 - 30),"max-height":screenheight*0.7-40});
		$("img.bigImg").load(function(){
			$("img.bigImg").css("top",(screenheight*0.7 - 30 - $("img.bigImg").height())*0.5 + 30);
		});
		$("img.bigImg").css("top",(screenheight*0.7 - 30 - $("img.bigImg").height())*0.5 + 30);
		$.log("$(document).height():"+$(document).height());
	};
	$("a#bigPic").click(function(){
		$.log("screenheight:"+screenheight+"screenwidth:"+screenwidth);
		str = $("img[img-size]").attr("src");
		$("body").append("<div class='grey'></div>");//灰色底层
		$("body").append("<div class='lookBigPicture'><span class='protoPic'><a z-index='20001' target='_blank' href='"+str+"'>查看原图</a></span><a href='javascript:;' class='bigpicclose' title='关闭'>×</a><img class='bigImg' src='"+str+"'/></div>");
        $("div.grey").css( "height",$(document).height());
        loadCSS();
        $("body").css({overflow:"hidden"});    //禁用滚动条
	});
	$("body").delegate("div.grey,a.bigpicclose","click",function(){
		$("body").css({overflow:"visible"});    //恢复滚动条
		$("div.lookBigPicture").remove();
		$("div.grey").remove();
	});
	//当浏览器窗口大小改变时
	$(window).resize(function () {
		loadCSS();
	});

/***遮罩层****/
.grey {
	background: #000;
	display: block;
	z-index: 1000;
	width: 100%;
	position: absolute;
	filter: alpha(opacity :         50);
	opacity: 0.5;
	top: 0;
	left: 0;
	top: 0;
}

.lookBigPicture {
	border: #000 solid 1px;
	position: absolute;
	z-index: 2000;
	text-align: center;
	background: black;
}

.bigImg {
	margin-left: auto;
	margin-right: auto;
	position: relative;
}

.bigpicclose {
	position: absolute;
	width: 36px;
	height: 36px;
	font-size: 0;
	z-index: 20001;
	top: -18px;
	right: -18px;
	background:
		url("http://img.t.sinajs.cn/t5/style/images/layer/multipic_ico.png?id=20131018174500")
		0 0 no-repeat;
}

.lookbigicn {
	display: inline-block;
	width: 12px;
	height: 12px;
	background:
		url("http://img.t.sinajs.cn/t5/style/images/common/icon.png?id=1383027536816")
		-175px -25px no-repeat;
	vertical-align: -2px;
	margin-left: 20px;
}

.W_ico12 {
	display: inline-block;
	width: 12px;
	height: 12px;
	background:
		url("http://img.t.sinajs.cn/t5/style/images/common/icon.png?id=1383027536816")
		-175px 0px no-repeat;
	vertical-align: -2px;
}

.protoPic {
	position: absolute;
	display: inline-block;
	height: 30px;
	top: 10px;
	right: 50px;
	overflow: hidden;
	cursor: pointer;
	color: #F8F8F8;
	text-shadow: 0 1px 0 rgba(0, 0, 0, .5);
}

<p pic-choice style="display: none;">
			    	<em class="W_ico12"></em><a href="javascript:;" id="hidePic">收起</a>
			    	<em class="lookbigicn"></em><a href="javascript:;" id="bigPic">查看大图</a>
			    </p>