欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

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

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

購物網(wǎng)站點擊商品后，都會有一個查看物品圖片，并且可以放大仔細觀察物品的功能。這個功能看起來復雜，其實實現(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.鼠標移入?yún)^(qū)域1，生成半透明的選擇框
5.區(qū)域3顯示區(qū)域2選擇框?qū)?yīng)的圖片位置放大的效果
6.鼠標移除區(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');
  //選項卡切換
  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');
    }
  }
  //鼠標移進事件
  smallBox.onmouseover=function () {
    square.style.display='block';
    bigBox.style.display='block';
    //利用比例公式計算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';
  };
  //鼠標移出事件
  smallBox.onmouseout=function () {
    square.style.display='none';
    bigBox.style.display='none';
  };
  //鼠標移動事件
  smallBox.onmousemove=function (e) {
    var e=e||window.event;
    var x,y;
    //x和y的坐標
    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';
    //利用公式計算大圖的坐標
    //<!--// 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>

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

添加一個mask的div是因為，如果直接在smallBox上添加事件，會受到其中的子元素的影響，導致圖片抖動。而對一個空內(nèi)容的mask操作就不會有影響了。

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript圖片操作技巧大全》、《JavaScript運動效果與技巧匯總》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學運算用法總結(jié)》

希望本文所述對大家JavaScript程序設(shè)計有所幫助。

相關(guān)文章

最新評論