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


Posted in Javascript onMay 14, 2019

本文实例讲述了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 图片上传预览-兼容标准
Jun 01 Javascript
jQuery之Deferred对象详解
Sep 04 Javascript
基于JavaScript实现智能右键菜单
Mar 02 Javascript
bootstrap table复杂操作代码
Nov 01 Javascript
javaScript语法总结
Nov 25 Javascript
Bootstrap fileinput组件封装及使用详解
Mar 10 Javascript
详解JavaScript中的六种错误类型
Sep 21 Javascript
Django中使用jquery的ajax进行数据交互的实例代码
Oct 15 jQuery
vue中axios的封装问题(简易版拦截,get,post)
Jun 15 Javascript
微信小程序 弹窗输入组件的实现解析
Aug 12 Javascript
PHP 502bad gateway原因及解决方案
Nov 13 Javascript
vue使用echarts图表自适应的几种解决方案
Dec 04 Vue.js
JavaScript实现图片的放大缩小及拖拽功能示例
May 14 #Javascript
fastadmin中调用js的方法
May 14 #Javascript
vue+elementUI实现表单和图片上传及验证功能示例
May 14 #Javascript
微信小程序自定义可滑动顶部TabBar选项卡实现页面切换功能示例
May 14 #Javascript
微信小程序开发实现的选项卡(窗口顶部/底部TabBar)页面切换功能图文详解
May 14 #Javascript
详解jenkins自动化部署vue
May 14 #Javascript
基于JS实现前端压缩上传图片的实例代码
May 14 #Javascript
You might like
简单的用PHP编写的导航条程序
2006/10/09 PHP
用PHP和ACCESS写聊天室(三)
2006/10/09 PHP
PHP教程 基本语法
2009/10/23 PHP
PHP5 面向对象(学习记录)
2009/12/02 PHP
PHP错误抑制符(@)导致引用传参失败Bug的分析
2011/05/02 PHP
php配置php-fpm启动参数及配置详解
2013/11/04 PHP
Laravel5.7 Eloquent ORM快速入门详解
2019/04/12 PHP
js下用层来实现select的title提示属性
2010/02/23 Javascript
JavaScript接口实现代码 (Interfaces In JavaScript)
2010/06/11 Javascript
js 绑定键盘鼠标事件示例代码
2014/02/12 Javascript
ExtJS中设置下拉列表框不可编辑的方法
2014/05/07 Javascript
JavaScript fontcolor方法入门实例(按照指定的颜色来显示字符串)
2014/10/17 Javascript
Node.js和MongoDB实现简单日志分析系统
2015/04/25 Javascript
Javascript基于对象三大特性(封装性、继承性、多态性)
2016/01/04 Javascript
Javascript中的arguments对象
2016/06/20 Javascript
JS表格组件神器bootstrap table使用指南详解
2017/04/12 Javascript
微信小程序教程系列之视图层的条件渲染(10)
2017/04/19 Javascript
jQuery滑动到底部加载下一页数据的实例代码
2017/05/22 jQuery
从vue基础开始创建一个简单的增删改查的实例代码(推荐)
2018/02/11 Javascript
vue中$refs的用法及作用详解
2018/04/24 Javascript
AngularJS标签页tab选项卡切换功能经典实例详解
2018/05/16 Javascript
nodejs中request库使用HTTPS代理的方法
2019/04/30 NodeJs
NodeJs实现简易WEB上传下载服务器
2019/08/10 NodeJs
js new Date()实例测试
2019/10/31 Javascript
在vue中对数组值变化的监听与重新响应渲染操作
2020/07/17 Javascript
Python如何读取MySQL数据库表数据
2017/03/11 Python
python opencv圆、椭圆与任意多边形的绘制实例详解
2020/02/06 Python
python GUI库图形界面开发之PyQt5不规则窗口实现与显示GIF动画的详细方法与实例
2020/03/09 Python
Django 实现将图片转为Base64,然后使用json传输
2020/03/27 Python
日本最大的眼镜购物网站:Oh My Glasses
2016/11/13 全球购物
毕业生医学检验求职信
2013/10/16 职场文书
中秋寄语大全
2014/04/11 职场文书
采购部长岗位职责
2014/06/13 职场文书
乡镇综治宣传月活动总结
2014/07/02 职场文书
JavaScript嵌入百度地图API的最详细方法
2021/04/16 Javascript
pandas:get_dummies()与pd.factorize()的用法及区别说明
2021/05/21 Python