Html
    Css
    Js

    
                        
.box {
	margin-top:20px;
	margin-left:20px;
	position:relative;
}
.box>.small {
	width:300px;
	height:300px;
	border:1px solid black;
}
.box>.small>img {
	width:300px;
	width:300px;
}
.box>.big {
	width:400px;
	height:400px;
	position:absolute;
	border:1px solid black;
	left:320px;
	top:0;
	overflow:hidden;
	display:none;
}
.box>.big>img {
	width:600px;
	height:600px;
	position:absolute;
	left:0;
	top:0;
}
.box>.small>.mask {
	position:absolute;
	left:0;
	top:0;
	cursor:move;
	width:100px;
	height:100px;
	background-color:rgba(255,255,0,0.4);
	display:none;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

原生js放大镜

更新时间:2021-09-01 01:04:18

插入自己的图片就可以用

0