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 相关文章推荐
artDialog 4.1.5 Dreamweaver代码提示/补全插件 附下载
Jul 31 Javascript
Javascript中引用示例介绍
Feb 21 Javascript
jquery实现文本框数量加减功能的例子分享
May 10 Javascript
jqGrid读取选择的多行的某个属性代码
May 18 Javascript
jquery+css实现动感的图片切换效果
Nov 25 Javascript
分享12个实用的jQuery代码片段
Mar 09 Javascript
d3.js实现简单的网络拓扑图实例代码
Nov 06 Javascript
js单页hash路由原理与应用实战详解
Aug 14 Javascript
vue中的scope使用详解
Oct 29 Javascript
jquery如何实现点击空白处隐藏元素
Dec 05 jQuery
webpack热模块替换(HMR)/热更新的方法
Apr 05 Javascript
iview form清除校验状态的实现
Sep 19 Javascript
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
德生H-501的评价与改造
2021/03/02 无线电
php操作sqlserver关于时间日期读取的小小见解
2009/11/29 PHP
php 生成唯一id的几种解决方法
2013/03/08 PHP
关于PHP模板Smarty的初级使用方法以及心得分享
2013/06/21 PHP
使用php方法curl抓取AJAX异步内容思路分析及代码分享
2014/08/25 PHP
Java中final关键字详解
2015/08/10 PHP
PHP运行模式汇总
2016/11/06 PHP
PHP无限极分类函数的实现方法详解
2017/04/15 PHP
input禁止键盘及中文输入,但可以点击
2014/02/13 Javascript
jQuery判断元素是否存在的可靠方法
2014/05/06 Javascript
jQuery操作cookie方法实例教程
2014/11/25 Javascript
简介JavaScript中的setTime()方法的使用
2015/06/11 Javascript
使用JQuery FancyBox插件实现图片展示特效
2015/11/16 Javascript
基于JS实现类似支付宝支付密码输入框
2016/09/02 Javascript
jQuery与JS加载事件用法分析
2016/09/04 Javascript
ztree实现权限横向显示功能
2017/05/20 Javascript
vue中el-upload上传图片到七牛的示例代码
2018/10/19 Javascript
[01:14:12]2018DOTA2亚洲邀请赛4.7 总决赛 LGD vs Mineski 第二场
2018/04/09 DOTA
python有证书的加密解密实现方法
2014/11/19 Python
Python字典简介以及用法详解
2016/11/15 Python
使用sklearn进行对数据标准化、归一化以及将数据还原的方法
2018/07/11 Python
TensorFlow学习之分布式的TensorFlow运行环境
2020/02/05 Python
Python 在函数上添加包装器
2020/07/28 Python
python爬取天气数据的实例详解
2020/11/20 Python
英国No.1文具和办公用品在线:Euroffice
2016/09/21 全球购物
爱他美官方海外旗舰店:Aptamil奶粉
2017/12/22 全球购物
小米旗下精品生活电商平台:小米有品
2018/12/18 全球购物
英国百年闻名的优质健康产品连锁店:Holland & Barrett
2019/12/19 全球购物
应届硕士毕业生自荐信
2014/05/26 职场文书
学习党代会心得体会
2014/09/05 职场文书
交通事故委托书范本精选
2014/10/04 职场文书
婚前协议书范本两则
2014/10/16 职场文书
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
2021/03/31 jQuery
如何用JavaScript检测当前浏览器是无头浏览器
2021/04/27 Javascript
一次MySQL启动导致的事故实战记录
2021/09/15 MySQL
Android Studio 计算器开发
2022/05/20 Java/Android