快捷導(dǎo)航

JavaScript實(shí)現(xiàn)京東購物放大鏡和選項(xiàng)卡效果的方法分析

更新時間：2018年07月05日 10:05:30 作者：king-w

這篇文章主要介紹了JavaScript實(shí)現(xiàn)京東購物放大鏡和選項(xiàng)卡效果的方法,結(jié)合實(shí)例形式分析了javascript基于事件響應(yīng)、數(shù)值計(jì)算與頁面元素動態(tài)修改實(shí)現(xiàn)圖片放大功能以及tab選項(xiàng)卡切換效果相關(guān)操作技巧,需要的朋友可以參考下

本文實(shí)例講述了JavaScript實(shí)現(xiàn)京東購物放大鏡和選項(xiàng)卡效果的方法。分享給大家供大家參考，具體如下：

購物網(wǎng)站點(diǎn)擊商品后，都會有一個查看物品圖片，并且可以放大仔細(xì)觀察物品的功能。這個功能看起來復(fù)雜，其實(shí)實(shí)現(xiàn)起來非常簡單。下面我們來一起做這個小效果吧！

首先，我們看一下頁面的布局：

1.小圖片顯示區(qū)，上面有一個方形遮罩層
2.縮略圖橫向列表
3.大圖顯示區(qū)域

然后，我們寫出開發(fā)步驟：

1.編寫3個區(qū)域的html布局，使他們位于同一個容器內(nèi)
2.顯示區(qū)域2的圖片列表
3.給區(qū)域2的圖片添加mouseover事件，使圖片顯示在區(qū)域1內(nèi)
4.鼠標(biāo)移入?yún)^(qū)域1，生成半透明的選擇框
5.區(qū)域3顯示區(qū)域2選擇框?qū)?yīng)的圖片位置放大的效果
6.鼠標(biāo)移除區(qū)域2，區(qū)域3隱藏

最后，根據(jù)需求寫出相應(yīng)代碼：

html和css：

<style>
    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;
    }
  </style>
</head>
<body>
<div class="zoom-box">
  <div class="small-box">
    <img src="../../../img/京東放大鏡/m1.jpg" alt="">
    <div class="square">
    </div>
    <div class="mask"></div>
  </div>
  <div class="img-list">
    <ul>
      <li><img class="active" src="../../../img/京東放大鏡/s1.jpg" alt="" data-small="../../../img/京東放大鏡/m1.jpg"
           data-big="../../../img/京東放大鏡/b1.jpg"></li>
      <li><img src="../../../img/京東放大鏡/s2.jpg" alt="" data-small="../../../img/京東放大鏡/m2.jpg"
           data-big="../../../img/京東放大鏡/b2.jpg"></li>
      <li><img src="../../../img/京東放大鏡/s3.jpg" alt="" data-small="../../../img/京東放大鏡/m3.jpg"
           data-big="../../../img/京東放大鏡/b3.jpg"></li>
      <li><img src="../../../img/京東放大鏡/s4.jpg" alt="" data-small="../../../img/京東放大鏡/m4.jpg"
           data-big="../../../img/京東放大鏡/b4.jpg"></li>
      <li><img src="../../../img/京東放大鏡/s5.jpg" alt="" data-small="../../../img/京東放大鏡/m5.jpg"
           data-big="../../../img/京東放大鏡/b5.jpg"></li>
      <li><img src="../../../img/京東放大鏡/s6.jpg" alt="" data-small="../../../img/京東放大鏡/m6.jpg"
           data-big="../../../img/京東放大鏡/b6.jpg"></li>
    </ul>
  </div>
  <div class="big-box">
    <img src="../../../img/京東放大鏡/b1.jpg" alt="">
  </div>
</div>

js代碼：

<script>
  var smallBox=$('.small-box .mask');
  var smallImg=$('.small-box img');
  var square=$('.square');
  var imagesList=$all('.img-list img');
  var bigBox=$('.big-box');
  var bigImg=$('.big-box img');
  //選項(xiàng)卡切換
  for(var i=0;i<imagesList.length;i++){
    imagesList[i].onmouseover=function () {
      for (var j=0;j<imagesList.length;j++){
        imagesList[j].className='';
      }
      this.className='active';
      bigImg.src=this.getAttribute('data-big');
      smallImg.src=this.getAttribute('data-small');
    }
  }
  //鼠標(biāo)移進(jìn)事件
  smallBox.onmouseover=function () {
    square.style.display='block';
    bigBox.style.display='block';
    //利用比例公式計(jì)算square的寬高
    //square的寬/smallImg的寬 = bigBox的寬/bigIma的寬
    square.style.width=smallImg.offsetWidth * bigBox.offsetWidth / bigImg.offsetWidth + 'px';
    square.style.height=smallImg.offsetHeight * bigBox.offsetHeight / bigImg.offsetHeight + 'px';
  };
  //鼠標(biāo)移出事件
  smallBox.onmouseout=function () {
    square.style.display='none';
    bigBox.style.display='none';
  };
  //鼠標(biāo)移動事件
  smallBox.onmousemove=function (e) {
    var e=e||window.event;
    var x,y;
    //x和y的坐標(biāo)
    x=e.offsetX-square.offsetWidth/2;
    y=e.offsetY-square.offsetHeight/2;
    if(x<0){
      x=0;
    }
    if(x>smallBox.offsetWidth-square.offsetWidth){
      x=smallBox.offsetWidth-square.offsetWidth;
    }
    if(y<0){
      y=0;
    }
    if(y>smallBox.offsetHeight-square.offsetHeight){
      y=smallBox.offsetHeight-square.offsetHeight;
    }
    square.style.left=x+'px';
    square.style.top=y+'px';
    //利用公式計(jì)算大圖的坐標(biāo)
    //<!--// x/?=smallimg.w/bigimg.w-->
    //<!--// y/?=smallimg.h/bigimg.h-->
    bigImg.style.left=-x * bigImg.offsetWidth / smallImg.offsetWidth + 'px';
    bigImg.style.top=-y * bigImg.offsetHeight / smallImg.offsetHeight + 'px';
  };
  function $(name) {
    return document.querySelector(name);
  }
  function $all(name) {
    return document.querySelectorAll(name);
  }
</script>

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