效果:
可对图片进行放大,可以自己随意放大倍数,无限制。
**
兄弟们都懂可以用来干什么把!
**
自己复制代码时,记得改成自己的图片路径和js路径。
完整代码如下:
enlarge.html 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Enlarge</title>
<style>
*{
margin: 0;padding: 0;}
.box{
width: 402px;
margin: 50px;
position: relative;
}
.middleBox{
width: 400px;
height: 400px;
border: 1px solid #000;
position: relative;
}
.middleBox>img{
width: 400px;
height: 400px;
}
.middleBox>.shade{
width: 200px;
height: 200px;
background-color: green;
opacity: .5;
position: absolute;
top: 0;
left: 0;
display: none;
}
.middleBox>.shade{
cursor: none;
}
.smallBox{
margin-top: 15px;
}
.smallBox>img{
width: 50px;
height: 50px;
border: 1px solid #000;
margin-left: 5px;
}
.smallBox>img.active{
border-color: red;
}
.bigBox{
width: 400px;
height: 400px;
border: 1px solid #000;
position: absolute;
top: 0;
left: 105%;
background-image: url(./images/big1.jpg);
background-repeat: no-repeat;
background-position: 0 0;
background-size: 800px 800px;
display: none;
}
input{
width: 100px;
height: 20px;
}
</style>
</head>
<body>
<div class="box">
<div <