<!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>
