<!DOCTYPE html>
<html>
<head>
<title>弹出层</title>
<meta charset="utf-8">
<script src="js/jquery-1.10.2.min.js" ></script>
<style>
*{margin:0;padding: 0}
.article{width:700px;min-height: 1500px;margin: 0 auto;padding:10px;border: 1px solid #3C3F41;box-sizing: border-box;}
.article img{width: 100;height:200px;}
/*弹层样式*/
.big-image-window{display:none;width: 100%;height: 100%;background-color:rgba(0,0,0,.4);position:fixed;top:0;left: 0;z-index: 99999;}
.big-image-image-warp{height:auto;width:auto;background: rgba(255,255,255,.8);padding:10px;position:fixed;border-radius: 10px;}
.big-image-button{width: 40px;height: 40px;position:absolute;top:-25px;right:-25px;background-color: #fff;border-radius: 20px;text-align: center;font-size:12px;color:#FF7C00;line-height: 40px;cursor: pointer;-webkit-transition:-webkit-transform .5s,background .5s,color .5s;-moz-transition:-moz-transform .5s,background .5s,color .5s;transition:transform .5s,background .5s,color .5s;}
.big-image-button:hover{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);transform:rotate(360deg);background: #FF7C00;color: #fff;}
.big-image-window img{height:auto;width:auto;}
</style>
<script>
$(function(){
var $imgs = $(".article img").not($(".article a img")); //待显示图片集合
/*
弹层部分
*/
var $bigWindow = $(".big-image-window");//弹出层
var $showDiv = $(".big-image-image-warp");//显示图层
var $closeBtn = $(".big-image-button");//关闭按钮
var $winImage = $("#big-image-window-image");//图片元素
var curIndex = 0;//元素索引
//图片点击
$imgs.click(function(){
var $cur,src;
$cur = $(this);
src = $cur.attr("src");
setSize(src,$showDiv,$winImage);
$winImage.attr("src",src);
curIndex = $imgs.index($cur);
$bigWindow.show();
});
//切换图片
$winImage.click(function(){
var src;
curIndex++;
if(curIndex==$imgs.length) curIndex=0;
src = $imgs.eq(curIndex).attr("src");
$winImage.attr("src",src);
setSize(src,$showDiv,$winImage);
});
//关闭弹层
$closeBtn.click(function(){
$bigWindow.hide();
});
});
//根据图片大小修改DIV大小
function setSize(src,resizeA,resizeB){
var img,imgWidth,imgHeight,maxWidth,maxHeight;
if(document.documentElement && document.documentElement.clientHeight &&document.documentElement.clientWidth)
{
maxWidth = document.documentElement.clientWidth;//最大宽度
maxHeight = document.documentElement.clientHeight;//最大高度
}else{
maxWidth = 1000;
maxHeight = 1000;
}
img = new Image();
img.src = src;
imgWidth = parseInt(img.width)*1.1;//放大至原始宽度1.1倍
imgHeight =parseInt(img.height)*1.1;//放大至原始高度1.1倍
if(imgWidth>maxWidth) imgWidth = maxWidth*0.8;
if(imgHeight>maxHeight) imgHeight = maxHeight*0.8;
resizeA.width(imgWidth);
resizeA.height(imgHeight);
resizeA.css({"top":maxHeight/2-(imgHeight/2+20),"left":maxWidth/2-(imgWidth/2+20)});
resizeB.width(imgWidth);
resizeB.height(imgHeight);
}
</script>
</head>
<body>
<div class="article">
<img src="images/1.jpg">
<img src="images/2.jpg">
<a href="http://www.baidu.com" ><img src="images/3.jpg"></a>
<img src="images/4.jpg">
<img src="images/5.jpg">
<hr />
<b>备注：不经过服务器环境打开时，Chrom等浏览器弹层图片不会显示</b>
</div>
<!--图片弹出层begin-->
<div class="big-image-window">
<div class="big-image-image-warp">
<div class="big-image-button">关闭</div>
<img src="images/1.jpg" id="big-image-window-image">
</div>
<span id="xy" style="position: absolute;right:0;bottom:0;">dd</span>
</div>
<!--图片弹出层end-->
</body>
</html>