* {
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;
}
没有复杂的判断,主要是根据鼠标的坐标来获取图片的位置信息。原生js的写法。这是16年写的东西。现在突然看到才整理出来。