Html
    Css
    Js

    
                        
* {
	margin:0;
	padding:0;
}
.box {
	width:350px;
	height:262px;
	margin:10px;
	border:1px solid #ccc;
	position:relative;
}
.big {
	width:400px;
	height:400px;
	position:absolute;
	top:0;
	left:360px;
	border:1px solid #ccc;
	overflow:hidden;
	display:none;
}
.mask {
	width:175px;
	height:175px;
	background:rgba(255,255,0,0.4);
	position:absolute;
	top:0;
	left:0;
	cursor:move;
	display:none;
}
.small {
	position:relative;
}
.box img {
	vertical-align:top;
}
#bigBox img {
	position:absolute;
}

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

鼠标悬停,图片局部放大

1
      zy05250
      2017/4/28 10:14:58

      这个效果非常好!

      回复