1、先准备好html和css样式 案例效果图如下
html和css样式
用定位才能设置left值
<style>
.preview_img {
position: relative;
width: 400px;
height: 400px;
border: 1px solid #ccc;
margin-bottom: 30px;
}
.mask {
position: absolute;
display: none;
top: 0;
width: 300px;
height: 300px;
cursor: move;
background-color: orange;
opacity: 0.3;
border: 1px solid #ccc;
}
.big {
position: absolute;
display: none;
top: 0;
left: 420px;
width: 500px;
height: 500px;
border: 1px solid #ccc;
overflow: hidden;
}
//设置大图片定位才能设置偏移量
.big img {
position: absolute;
top: 0;
left: 0;
}
</style>
<div class="preview_img">
<img src="uploads/s3.png" alt="" />
//遮盖