<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/reset.css">
</head>
<style>
.box {
overflow: hidden;
width: 100%;
}
.pictrue {
width:150px;
height:150px;
float: left;
}
.pictrue img{
width:100%;
}
.du-mask{
background: rgba(0,0,0,.5);
width:100%;
height:100%;
z-index:99;
position: absolute;
top:0;
left: 0;
}
.du-contain{
position: absolute;
left:0;
top:0;
right: 0;
bottom: 0;
}
.du-main{
position: absolute;
top:0;
width:auto;
height:96%;
}
.du-tool{
position: fixed;
top:20px;
right:50px;
z-index: 999;
}
.du-tool button{
width:70px;
height:30px;
text-align: center;
margin: 0 10px;
line-height: 30px;
font-size: 16px;
color: #fff;
border: 1px solid #00A1CB;
background: #05a8eb;
}
.du-tool button:hover{
color: #fff;
background: #0586bf;
}
</style>
<body>
<div class="box">
<div class="pictrue">
<img src="1111.JPG" alt="点击放大">
</div>
<div class="pictrue">
<img src="newcar.jpg" alt="点击放大">
</div>
<div class="pictrue">
<img src="close.png" alt="点击放大">
</div>
<div class="pictrue">
<img src="close1.png" alt="点击放大">
</div>
<div class="pictrue">
<img src="201802051306060953.jpg" alt="点击放大">
</div>
<div class="pictrue">
<img src="201802051306065046.jpg" alt="点击放大">
</div>
</div>
<div style="margin-top: 1000px"></div>
</body>
<script src="js/jquery-2.1.4.min.js"></script>
<script>
var pictrue=$('.pictrue');
pictrue.click(function(){
$('body').css('overflow','hidden');
var index= pictrue.index(this);
var num=pictrue.length;
var n=1;
$("<div class='du-mask'><div class='du-tool'><button class='du-prev'>上一张</button><button class='du-next'>下一张</button><button class='du-large'>放大</button><button class='du-small'>缩小</button><button class='du-close'>关闭</button></div><div class='du-contain'><img class='du-main'></div></div>").appendTo('body');
var src=$(this).find('img').attr('src');
var main= $(".du-main");
main.attr('src',src);
var width=main.width();
main.css("left",($(window).width()-width)/2);
//鼠标拖拽
drag(main.get(0));
function drag(aa){
aa.onmousedown=function(e){
ev=e||window.event;
ox=ev.offsetX;
oy=ev.offsetY;
document.onmousemove=function(e){
ev=e||window.event;
aa.style.left=ev.clientX-ox+"px";
aa.style.top=ev.clientY-oy+"px";
ev.preventDefault();
}
};
aa.onmouseup=function(){
document.onmousemove=null
};
}
// 上一页
$(".du-prev").click(function(){
to_left()
});
// 向上一页
function to_left(){
if(index==0){
console.log("已经是第一张");
}else{
index=index-1;
var psrc=pictrue.eq(index).find('img').attr('src');
main.attr('src',psrc).css("transform","scale(1,1)");
var width=main.width();
main.css({left:($(window).width()-width)/2,top:0});
n=1;
}
}
// 下一页
$(".du-next").click(function(){
to_right();
});
// 向下一页
function to_right(){
if(num==(index+1)){
console.log("已经是最后一张"); }else{ index=index+1; var nsrc=pictrue.eq(index).find('img').attr('src'); main.attr('src',nsrc).css("transform","scale(1,1)"); var width=main.width(); main.css({left:($(window).width()-width)/2,top:0}); n=1; } }// 放大 $(".du-large").click(function(){ n=n+0.2; main.css("transform","scale("+n,n+")"); drag(main.get(0)); });// 缩小 $(".du-small").click(function(){ if(n>0.6){ n=n-0.2; main.css("transform","scale("+n,n+")"); drag(main.get(0)) } });// 关闭 $(".du-close").click(function(){ $('.du-mask').remove(); $('body').css('overflow','auto'); })// 键盘绑定 $(document).keydown(function(event){ if((event.keyCode == 37)||(event.keyCode == 38)){ to_left(); }else if ((event.keyCode == 39)||(event.keyCode == 40)){ to_right(); } }); });</script></html>
