Html
    Css
    Js

    
                        
* {
	margin:0;
	padding:0;
}
.big {
	width:700px;
	height:500px;
	margin:40px auto;
	position:relative;
}
.sm {
	width:310px;
	height:310px;
	border:1px solid #000;
	background:url('http://www.jq22.com/img/cs/500x500-2.png');
	float:left;
	background-size: 100% 100%; 
}
.xa {
	width:120px;
	height:120px;
	border:1px solid red;
	position:absolute;
}
.da {
	width:310px;
	height:310px;
	border:1px solid #000;
	float:left;
	overflow:hidden;
	position:relative;
}
img {
	position:absolute;
	top:0;
	left:0;
}

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

原生js仿淘宝商品放大

没有复杂的判断,主要是根据鼠标的坐标来获取图片的位置信息。原生js的写法。这是16年写的东西。现在突然看到才整理出来。

0