JS实现电商商品展示放大镜特效

本文实例为大家分享了JS实现电商商品展示放大镜的具体代码，供大家参考，具体内容如下

知识点

1.使用children获取字标签组
2.求当前鼠标坐标
3.碰撞检测
4.大小盒子通过比例同步

运行效果

代码

 
 
 
 * {
  margin: 0;
  padding: 0;
  list-style: none;
  border: none;
 }

 #box {
  width: 350px;
  height: 350px;
  margin: 100px 0 0 100px;
  position: relative;
 }

 #box > #small_box {
  height: 100%;
  width: 100%;
  border: 1px solid #cccccc;
  box-sizing: border-box;
  position: relative;
 }

 #box > #small_box > img {
  height: 100%;
  width: 100%;
 }

 #box > #small_box > #mask {
  width: 100px;
  height: 100px;
  background-color: rgba(255, 255, 0, .4);
  position: absolute;
  left: 0;
  top: 0;
  cursor: move;
  
  display: none;
 }

 #box > #big_box {
  height: 600px;
  width: 600px;
  border: 1px solid #cccccc;
  position: absolute;
  left: 360px;
  top: 0;
  overflow: hidden;
  display: none;
 }
 #box > #big_box > img{
  position: absolute;
  left: 0;
  top: 0;
 }
 #list {
  margin: 20px 0 0 100px;
 }

 #list ul li {
  float: left;
  margin: 5px;
  cursor: pointer;
 }
 



 
 
 
 
 
 
 


 

 

 

 

 

 

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。