Html
    Css
    Js

    
                        
html,body,div,img {
	margin:0;
	padding:0;
	-webkit-user-select:none;
}
img {
	border:none;
}
#box1,#box2 {
	position:absolute;
	top:30px;
	width:300px;
	height:300px;
	box-shadow:4px 4px 10px 0 #616161;
}
#box1 {
	left:50px;
}
#box2 {
	display:none;
	left:360px;
	overflow:hidden;
}
#mark {
	display:none;
	position:absolute;
	top:50px;
	left:50px;
	width:100px;
	height:100px;
	opacity:0.4;
	filter:alpha(opacity=40);
	cursor:move;
	background-color:#000;
}
#box1 img {
	width:100%;
	height:100%;
}
#box2 img {
	display:block;
	width:300%;
	height:300%;
}

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

图片放大镜功能

0