<style type="text/css">
a {
color: #c60;
background-color: transparent;
font-weight: bold;
text-decoration: none;
}
ul {
padding: 0;
}
li {
float: left;
list-style: none;
}
h4 {
margin: 10px 20px 20px 20px;
line-height: 30px;
color: #666666;
border-bottom: 1px solid #cccccc;
}
.imagegallery{
margin-top: 20px;
border: 1px solid #e1e1e1;
background-color: #f1f1f1;
display: block;
height: 168px;
560px;
border-radius: 0 4px 4px 0;
}
.imagegallery li {
background-color: #fff;
margin: 0px 0px 0px 20px;
cursor: pointer;
border-radius: 4px;
border: 1px solid #d7d7d7;
}
.imagegallery li a {
position: relative;
display: block;
80px;
height: 80px;
margin: 3px;
overflow: hidden;
border-radius: 4px;
}
.imgw {
80px;
position: absolute;
left: 0;
top: 50%;
}
.imgh {
height: 80px;
position: absolute;
left: 50%;
top: 0;
}
.imge {
height: 80px;
80px;
position: absolute;
left: 0;
top: 0;
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
/* Modal Content (image) */
/*.modal-content {
margin: auto;
display: block;
/* 30%;
max- 100%;*/
}*/
/* Caption of Modal Image */
#caption {
margin: auto;
display: block;
80%;
max- 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
/* Add Animation */
/*.modal-content,*/ #caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}
@-webkit-keyframes zoom {
from {-webkit-transform: scale(0)}
to {-webkit-transform: scale(1)}
}
@keyframes zoom {
from {transform: scale(0.1)}
to {transform: scale(1)}
}
/* 100% Image Width on Smaller Screens
@media only screen and (max- 700px){
.modal-content {
100%;
}
}*/
.but{40px;height:80px;position:absolute;top:266px;}
#but1{left:62px;background:url(images/photo/prev.png);}
#but2{right:62px;background:url(images/photo/next.png);}
</style>
</head>
<body>
<ul class="imagegallery">
<h4>图片标题</h4>
<li><a href="#"><img src="images/1.jpg" alt="图片" title="标题" class="001 " value="0"/></a></li>
<li><a href="#"><img src="images/1-small.jpg" alt="图片" title="标题" class="001 " value="1"/></a></li>
<li><a href="#"><img src="images/2-small.jpg" alt="图片" title="标题" class="001 " value="2"/></a></li>
<li><a href="#"><img src="images/2.png" alt="图片" title="标题" class="001 " value="3"/></a></li>
<li><a href="#"><img src="images/timge.png" alt="图片" title="标题" class="001 " value="4"/></a></li>
</ul>
<ul class="imagegallery">
<h4>图片标题</h4>
<li><a href="#"><img src="images/1.jpg" alt="图片" title="标题" class="002" value="0"/></a></li>
<li><a href="#"><img src="images/8.jpg" alt="图片" title="标题" class="002" value="1"/></a></li>
<li><a href="#"><img src="images/3.jpg" alt="图片" title="标题" class="002" value="2"/></a></li>
<li><a href="#"><img src="images/2.png" alt="图片" title="标题" class="002" value="3"/></a></li>
<li><a href="#"><img src="images/timge.png" alt="图片" title="标题" class="002" value="4"/></a></li>
</ul>
<ul class="imagegallery">
<h4>图片标题</h4>
<li><a href="#"><img src="images/1.jpg" alt="图片" title="标题"/></a></li>
<li><a href="#"><img src="images/1-small.jpg" alt="图片" title="标题"/></a></li>
<li><a href="#"><img src="images/2-small.jpg" alt="图片" title="标题"/></a></li>
<li><a href="#"><img src="images/2.png" alt="图片" title="标题"/></a></li>
<li><a href="#"><img src="images/timge.png" alt="图片" title="标题"/></a></li>
</ul>
<div id="myModal" class="modal" style="z-index: 1;">
<div id="innerdiv" style="position:absolute;">
<img class="modal-content" id="img01" src="">
</div>
<div class="but" id="but1" style="40px;height:80px" style="z-index: 1;"></div>
<div class="but" id="but2" style="40px;height:80px" style="z-index: 1;"></div>
<div id="caption"></div>
</div>
<script src="jquery.js"></script>
<script>
var modal = document.getElementById('myModal');
$(function () {
//图片的缩略图
var $img = $(".imagegallery li img");
$($img).each(function () {
var imgWidth = $(this).width();
var imgHeigth = $(this).height();
if (imgWidth > imgHeigth) {
$(this).css({
marginLeft:'-'+parseInt((imgWidth/2)*(80/imgHeigth))+'px'
}).addClass("imgh");
}else if (imgWidth == imgHeigth||imgHeigth<=80||imgWidth<=80) {
$(this).addClass("imge")
}else if (imgWidth < imgHeigth) {
$(this).css(
"marginTop",'-'+parseInt((imgHeigth/2)*(80/imgWidth))+'px'
).addClass("imgw");
}
});
$("body").on('click','img',function(){
modal.style.display = "block";
var s = $(this).attr("src");
var _this = $(this);
f_show(s);
f_move(_this);
});
$("body").on('click','.but',function(){
modal.style.display = "block";
});
});
$("#myModal").click(function(){
modal.style.display = "none";
});
function f_show(s){
$("<img/>").attr("src", s).load(function(){
var windowW = $(window).width();//获取当前窗口宽度
var windowH = $(window).height();//获取当前窗口高度
var realWidth = this.width;//获取图片真实宽度
var realHeight = this.height;//获取图片真实高度
var imgWidth, imgHeight;
var scale = 0.8;//缩放尺寸，当图片真实宽度和高度大于窗口宽度和高度时进行缩放
//alert(realHeight>windowH*scale)
if(realHeight>windowH*scale) {//判断图片高度
imgHeight = windowH*scale;//如大于窗口高度，图片高度进行缩放
imgWidth = imgHeight/realHeight*realWidth;//等比例缩放宽度
// alert(imgWidth>windowW*scale)
if(imgWidth>windowW*scale) {//如宽度扔大于窗口宽度
imgWidth = windowW*scale;//再对宽度进行缩放
}
} else if(realWidth>windowW*scale) {//如图片高度合适，判断图片宽度
imgWidth = windowW*scale;//如大于窗口宽度，图片宽度进行缩放
imgHeight = imgWidth/realWidth*realHeight;//等比例缩放高度
} else {//如果图片真实高度和宽度都符合要求，高宽不变
imgWidth = realWidth;
imgHeight = realHeight;
}
var w = (windowW-imgWidth)/2;//计算图片与窗口左边距
//alert(w)
var h = (windowH-imgHeight)/2;//计算图片与窗口上边距
$("#img01").attr("width",imgWidth)
var innerdiv = $("#innerdiv")
$(innerdiv).css({"top":h, "left":w});
$("#img01").attr("src",s)
});
var outterdiv = $("#myModal");
/*$(outerdiv).click(function(){//再次点击淡出消失弹出层
modal.style.display = "none";
});*/
}
function f_move(_this){
var cclass = _this.attr("class");
//alert(cclass)
var _class = cclass.split(" ")
var _value = _this.attr("value");
imgs = document.getElementsByClassName(_class[0]);//图片元素
var tab = _value;
var max = imgs.length-1;
//绑定左右键键盘，切换图片
$(window).keydown(function(e){
switch ((e||event).keyCode) {
case 37:
if(tab > 0){
tab -- ;
var _src = imgs[tab].src;
f_show(_src)
}else{
tab = max;
var _src = imgs[tab].src;
f_show(_src)
}
break;
case 39:
if(tab < max){
tab ++ ;
var _src = imgs[tab].src;
f_show(_src)
}else{
tab = 0;
var _src = imgs[tab].src;
f_show(_src)
}
break;
case 27://esc退出模态框
modal.style.display = "none";
break;
}
});
//按钮切换图片
$("#but1").click(function(){
if(tab > 0){
tab -- ;
var _src = imgs[tab].src;
f_show(_src)
}else{
tab = max;
var _src = imgs[tab].src;
f_show(_src)
}
});
$("#but2").click(function(){
if(tab < max){
tab ++ ;
var _src = imgs[tab].src;
f_show(_src)
}else{
tab = 0;
var _src = imgs[tab].src;
f_show(_src)
}
});
}
// 获取 <span> 元素，设置关闭模态框按钮
var span = document.getElementsByClassName("close")[0];
// 点击 <span> 元素上的 (x), 关闭模态框
span.onclick = function() {
modal.style.display = "none";
}
</script>
</body>
</html>
