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

JavaScript實(shí)現(xiàn)多張圖片放大鏡效果示例【不限定圖片尺寸，rem單位】

 更新時(shí)間：2019年05月14日 12:04:28   作者：辣姐什么鬼  
這篇文章主要介紹了JavaScript實(shí)現(xiàn)多張圖片放大鏡效果,結(jié)合實(shí)例形式分析了javascript實(shí)現(xiàn)不限定圖片尺寸,采用rem單位的多張圖片縮放功能相關(guān)操作技巧,需要的朋友可以參考下

本文實(shí)例講述了JavaScript實(shí)現(xiàn)多張圖片放大鏡效果。分享給大家供大家參考，具體如下：

效果如下：可以展示圖片列表的放大鏡效果，圖片尺寸沒(méi)有要求會(huì)自動(dòng)調(diào)整至水平垂直居中效果

代碼如下，除了圖片要替換一下，其它的可直接運(yùn)行查看效果，enlarge是圖片要放大查看的倍數(shù)，注意：.bigBox的寬高與.tool的寬高比值要與enlarge保持一致，比如本例中這個(gè)比值是4

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script>
    function fontAuto() {
      document.documentElement.style.fontSize = document.documentElement.clientWidth / 19.2 + 'px';
    }
    fontAuto();
    window.onresize = function () {
      fontAuto();
    }
  </script>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }
    /*圖片放大鏡*/
    .result-list li {
      float: left;
      width: 3rem;
      margin: 0.15rem;
      border: 1px solid #ddd;
      padding: 0.08rem;
      border-radius: 0.05rem;
      list-style-type: none;
    }
    .result-list li:hover {
      box-shadow: 0 0 10px 5px #ddd;
    }
    .img-to-big {
      width: 100%;
      height: 1.5rem;
      margin: 0 auto;
    }
    .small-box {
      width: 100%;
      height: 1.5rem;
      border: 1px #ccc solid;
      cursor: move;
      position: relative;
      vertical-align: middle;
      display: block;
    }
    .small-box img {
      max-width: 100%;
      max-height: 100%;
      margin: auto;
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }
    .tool {
      width: 1rem;
      height: 1rem;
      background-color: lightgray;
      opacity: 0.6;
      filter: alpha(opacity=60);
      position: absolute;
      left: 0;
      top: 0;
      display: none;
    }
    .tool.active {
      display: block;
    }
    .big-box {
      width: 4rem;
      height: 4rem;
      overflow: hidden;
      border: 2px solid lightgray;
      position: absolute;
      background: #fff;
      display: none;
      left: 3rem;
      z-index: 100;
    }
    .big-box.active {
      display: table-cell;
      vertical-align: middle;
    }
    .big-box img {
      position: absolute;
      display: block;
    }
    /*圖片放大鏡*/
  </style>
</head>
<body>
<div class="result-list">
  <ul>
    <li>
      <div class="img-to-big">
        <div class="small-box">
          <img class="small-img" src="img/zs2.jpg"/>
          <div class="tool"></div>
        </div>
        <div class="big-box">
          <img src="img/zs2.jpg" class="big-img"/>
        </div>
      </div>
    </li>
    <li>
      <div class="img-to-big">
        <div class="small-box">
          <img class="small-img" src="img/zs2.jpg"/>
          <div class="tool"></div>
        </div>
        <div class="big-box">
          <img src="img/zs2.jpg" class="big-img"/>
        </div>
      </div>
    </li>
    <li>
      <div class="img-to-big">
        <div class="small-box">
          <img class="small-img" src="img/zs2.jpg"/>
          <div class="tool"></div>
        </div>
        <div class="big-box">
          <img src="img/zs2.jpg" class="big-img"/>
        </div>
      </div>
    </li>
    <li>
      <div class="img-to-big">
        <div class="small-box">
          <img class="small-img" src="img/zs2.jpg"/>
          <div class="tool"></div>
        </div>
        <div class="big-box">
          <img src="img/zs2.jpg" class="big-img"/>
        </div>
      </div>
    </li>
  </ul>
</div>
<script>
  window.onload = function () {
    forImg();
    window.onresize = function () {
      forImg();
    };
  }
  function forImg() {
    var enlarge = 4;
    var imgToBig = document.getElementsByClassName("img-to-big");
    var list = document.getElementsByClassName("result-list")[0];
    for (var i = 0; i < imgToBig.length; i++) {
      var smallBox = imgToBig[i].getElementsByClassName("small-box")[0];//小盒子
      var smallImg = smallBox.getElementsByClassName("small-img")[0];
      var tool = imgToBig[i].getElementsByClassName("tool")[0];//小盒子中的灰色區(qū)域
      var bigBox = imgToBig[i].getElementsByClassName("big-box")[0];//大盒子
      bigBox.style.left = smallBox.offsetLeft + smallBox.offsetWidth + "px";
      bigBox.style.top = smallBox.offsetTop + "px";
      var bigImg = imgToBig[i].getElementsByClassName("big-img")[0];//放大的圖片
      var leftNum = smallBox.offsetParent;
      var num = leftNum.offsetLeft;
      imgSize(smallBox, smallImg, smallImg.getAttribute("src"), bigImg, enlarge);
      toBigImg(smallBox, tool, bigBox, bigImg, num, smallImg, list, enlarge);
    }
    function imgSize(smallBox, thisImg, src, bigImg, enlarge) {
      var img = new Image();
      img.src = src;
      img.onload = function () {
        var realWidth = img.width;
        var realHeight = img.height;
        if ((realWidth / smallBox.offsetWidth) >= (realHeight / smallBox.offsetHeight)) {//當(dāng)展示的圖片尺寸并不統(tǒng)一時(shí)，根據(jù)圖片長(zhǎng)寬比例確定圖片以高度還是寬度為準(zhǔn)進(jìn)行縮放展示
          thisImg.style.width = smallBox.offsetWidth + "px";
          thisImg.style.height = "auto";
          bigImg.style.width = smallBox.offsetWidth * enlarge + "px";
          bigImg.style.height = "auto";
        } else {
          thisImg.style.height = smallBox.offsetHeight + "px";
          thisImg.style.width = "auto";
          bigImg.style.height = smallBox.offsetHeight * enlarge + "px";
          bigImg.style.width = "auto";
        }
      }
    }
    function toBigImg(smallBox, tool, bigBox, bigImg, num, smallImg, list, enlarge) {
      smallBox.onmouseenter = function () {
        tool.className = "tool active";
        bigBox.className = "big-box active";
      };
      //鼠標(biāo)離開(kāi)小盒子區(qū)域，不顯示黃色區(qū)域和大盒子
      smallBox.onmouseleave = function () {
        tool.className = "tool";
        bigBox.className = "big-box";
      };
      //鼠標(biāo)在小盒子內(nèi)移動(dòng)
      smallBox.onmousemove = function (e) {
        var _e = window.event || e;//事件對(duì)象
        var x = _e.clientX - this.offsetLeft - tool.offsetWidth / 2 - num;//事件對(duì)象在小盒子內(nèi)的橫向偏移量
        var y = _e.clientY - this.offsetTop - list.offsetTop - tool.offsetHeight / 2;//豎向偏移量
        if (x < 0) {
          x = 0;//當(dāng)左偏移出小盒子時(shí)，設(shè)為0
        }
        if (y < 0) {
          y = 0;//當(dāng)上偏移出小盒子時(shí)，設(shè)為0
        }
        if (x > this.offsetWidth - tool.offsetWidth) {
          x = this.offsetWidth - tool.offsetWidth;//當(dāng)右偏移出小盒子時(shí)，設(shè)為小盒子的寬度-黃色放大區(qū)域?qū)挾?
        }
        if (y > this.offsetHeight - tool.offsetHeight) {
          y = this.offsetHeight - tool.offsetHeight;//當(dāng)下偏移出小盒子時(shí)，設(shè)為小盒子的高度-黃色放大區(qū)域高度
        }
        tool.style.left = x + "px";//灰色放大區(qū)域距離小盒子左偏距
        tool.style.top = y + "px";//灰色放大區(qū)域距離小盒子上偏距
        bigImg.style.left = (-x + smallImg.offsetLeft) * enlarge + "px";//放大圖片移動(dòng)方向相反，偏移距離加倍
        bigImg.style.top = (-y + smallImg.offsetTop) * enlarge + "px";
      }
    }
  }
</script>
</body>
</html>

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

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

相關(guān)文章

最新評(píng)論