* { 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年写的东西。现在突然看到才整理出来。