Html
    Css
    Js

    
                        
@charset "utf-8";
	/* CSS Document */
* {
	margin:0px;
	padding:0px;
}
#left {
	width:350px;
	height:350px;
	float:left;
	border:1px solid #cccccc;
	margin-top:10px;
	margin-left:10px;
	position:relative;
}
#right {
	border:1px solid #cccccc;
	float:left;
	position:relative;
	width:350px;
	height:350px;
	display:none;
	overflow:hidden;
	margin-top:10px;
}
#right img {
	position:absolute;
}
#small {
	width:150px;
	height:150px;
	background-color:#F90;
	border:1px solid #cccccc;
	opacity:0.3;
	top:0px;
	position:absolute;
	cursor:move;
	display:none;
}
#left img {
	width:100%;
	height:100%;
}

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

html图片放大镜

实现商城商品高清大图的放大镜效果

0