JavaScript实现京东购物放大镜和选项卡效果的方法分析

本文实例讲述了Javascript实现京东购物放大镜和选项卡效果的方法。分享给大家供大家参考，具体如下：

购物网站点击商品后，都会有一个查看物品图片，并且可以放大仔细观察物品的功能。这个功能看起来复杂，其实实现起来非常简单。下面我们来一起做这个小效果吧！

首先，我们看一下页面的布局：

1.小图片显示区，上面有一个方形遮罩层
2.缩略图横向列表
3.大图显示区域

然后，我们写出开发步骤：

1.编写3个区域的html布局，使他们位于同一个容器内
2.显示区域2的图片列表
3.给区域2的图片添加mouseover事件，使图片显示在区域1内
4.鼠标移入区域1，生成半透明的选择框
5.区域3显示区域2选择框对应的图片位置放大的效果
6.鼠标移除区域2，区域3隐藏

最后，根据需求写出相应代码：

html和css：

    ul{
      list-style: none;
      padding: 0;
    }
    .zoom-box{
      position: relative;
      width: 452px;
    }
    .small-box{
      border: 1px solid #ccc;
      position: relative;
    }
    .small-box .square{
      position: absolute;
      background-color: yellow;
      opacity: 0.5;
      display: none;
    }
    .small-box .mask{
      width: 100%;
      height: 100%;
      opacity: 0;
      position: absolute;
      top:0;
      left:0;
    }
    .img-list ul:after{
      clear: both;
      content: '';
      display: table;
    }
    .img-list ul li{
      float: left;
      padding: 0 8px;
    }
    .img-list img{
      border: 2px solid transparent;
    }
    .img-list img.active{
      border: 2px solid red;
    }
    .big-box{
      position: absolute;
      top:0;
      left: 100%;
      margin-left: 2px;
      width: 500px;
      height: 500px;
      border: 1px solid #ccc;
      display: none;
      overflow: hidden;
    }
    .big-box img{
      position: absolute;
    }
  



  
    
    
    
    
  
  
    

      

      

      

      

      

      

    
  
  
    
  

js代码：

大家可以做一下看看效果：

添加一个mask的div是因为，如果直接在smallBox上添加事件，会受到其中的子元素的影响，导致图片抖动。而对一个空内容的mask操作就不会有影响了。

更多关于Javascript相关内容感兴趣的读者可查看本站专题：《Javascript图片操作技巧大全》、《Javascript运动效果与技巧汇总》、《Javascript切换特效与技巧总结》、《Javascript错误与调试技巧总结》、《Javascript数据结构与算法技巧总结》、《Javascript遍历算法与技巧总结》及《Javascript数学运算用法总结》

希望本文所述对大家Javascript程序设计有所帮助。