欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JavaScript实现多张图片放大镜效果示例【不限定图片尺寸,rem单位】

程序员文章站 2022-10-14 14:50:56
本文实例讲述了javascript实现多张图片放大镜效果。分享给大家供大家参考,具体如下: 效果如下:可以展示图片列表的放大镜效果,图片尺寸没有要求会自动调整至水平垂直居...

本文实例讲述了javascript实现多张图片放大镜效果。分享给大家供大家参考,具体如下:

效果如下:可以展示图片列表的放大镜效果,图片尺寸没有要求会自动调整至水平垂直居中效果

JavaScript实现多张图片放大镜效果示例【不限定图片尺寸,rem单位】

代码如下,除了图片要替换一下,其它的可直接运行查看效果,enlarge是图片要放大查看的倍数,注意:.bigbox的宽高与.tool的宽高比值要与enlarge保持一致,比如本例中这个比值是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];//小盒子中的灰色区域
      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)) {//当展示的图片尺寸并不统一时,根据图片长宽比例确定图片以高度还是宽度为准进行缩放展示
          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";
      };
      //鼠标离开小盒子区域,不显示黄色区域和大盒子
      smallbox.onmouseleave = function () {
        tool.classname = "tool";
        bigbox.classname = "big-box";
      };
      //鼠标在小盒子内移动
      smallbox.onmousemove = function (e) {
        var _e = window.event || e;//事件对象
        var x = _e.clientx - this.offsetleft - tool.offsetwidth / 2 - num;//事件对象在小盒子内的横向偏移量
        var y = _e.clienty - this.offsettop - list.offsettop - tool.offsetheight / 2;//竖向偏移量
        if (x < 0) {
          x = 0;//当左偏移出小盒子时,设为0
        }
        if (y < 0) {
          y = 0;//当上偏移出小盒子时,设为0
        }
        if (x > this.offsetwidth - tool.offsetwidth) {
          x = this.offsetwidth - tool.offsetwidth;//当右偏移出小盒子时,设为小盒子的宽度-黄色放大区域宽度
        }
        if (y > this.offsetheight - tool.offsetheight) {
          y = this.offsetheight - tool.offsetheight;//当下偏移出小盒子时,设为小盒子的高度-黄色放大区域高度
        }
        tool.style.left = x + "px";//灰色放大区域距离小盒子左偏距
        tool.style.top = y + "px";//灰色放大区域距离小盒子上偏距
        bigimg.style.left = (-x + smallimg.offsetleft) * enlarge + "px";//放大图片移动方向相反,偏移距离加倍
        bigimg.style.top = (-y + smallimg.offsettop) * enlarge + "px";
      }
    }
  }
</script>
</body>
</html>

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

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