JaveScript 之 浏览商品

模仿淘宝网网页中商品浏览模式,
即当鼠标放在图片上时,旁边会出现当前区域放大的图片
代码如下:(下面有福利哦)

    
 
 
 
     #small{
  width: 478px;
  height: 665px;
  position: relative;
     }
     #small>img{
  width: 100%;
  height: 100%;
  border:5px solid black;
  
     }
     #area{
  width: 80px;
  height: 110px;
  background: rgba(80,100,120,0.6);
  position: absolute;
  top: 0;
  left: 0;
  display: none;
     }
     #smaller{
  width: 470px;
  height: 110px;
  margin-top: 20px;
  margin-left: 12px;
     }
     #smaller>img{
  width: 70px;
  height: 98px;
  margin: 0 6px;
  border:2px solid white;
     }
     #big{
  width: 478px;
  height: 665px;
  overflow: hidden;
  position: absolute;
  top: 8px;
  left: 500px;
  display: none;
     }
     #big>img{
  width: 2856px;
  height: 3973px;
  position: absolute;
     }