首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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实现多张图片放大镜效果示例【不限定图片尺寸，rem单位】

- Author -

辣姐什么鬼

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript 操作select下拉列表框的一点小经验
Mar 20 Javascript
AJAX异步从优酷专辑中采集所有视频及信息（JavaScript代码）
Nov 20 Javascript
myeclipse安装jQuery插件的方法
Mar 29 Javascript
兼容IE、FireFox、Chrome等浏览器的xml处理函数js代码
Nov 30 Javascript
ExtJS4 Grid改变单元格背景颜色及Column render学习
Feb 06 Javascript
Jquery代码实现图片轮播效果（一）
Aug 12 Javascript
跟我学习javascript的浮点数精度
Nov 16 Javascript
炫酷的js手风琴效果
Oct 13 Javascript
javascript history对象详解
Feb 09 Javascript
jQuery自定义元素右键点击事件(实现案例)
Apr 28 jQuery
javaScript强制保留两位小数的输入数校验和小数保留问题
May 09 Javascript
解决vue2.0路由跳转未匹配相应用路由避免出现空白页面的问题
Aug 24 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
tkFileDialog(1) Odoo(1) 面向接口(1) tfx(1) ftpserver(1) NFS(1) OpenAI baselines(1) ElementTree(1) SeaTunnel(1) BeautifulSoup4(2)
You might like
PHP实现将textarea的值根据回车换行拆分至数组
2015/06/10 PHP
php中关于长度计算容易混淆的问题分析
2016/05/27 PHP
Ajax提交表单时验证码自动验证 php后端验证码检测
2016/07/20 PHP
jquery 日期分离成年月日的代码
2010/05/14 Javascript
前端开发的开始---基于面向对象的Ajax类
2010/09/17 Javascript
兼容IE、FireFox、Chrome等浏览器的xml处理函数js代码
2011/11/30 Javascript
JQuery实现表格中相同单元格合并示例代码
2013/06/26 Javascript
JavaScript对内存分配及管理机制详细解析
2013/11/11 Javascript
jQuery实现友好的轮播图片特效
2015/01/12 Javascript
异步JavaScript编程中的Promise使用方法
2015/07/28 Javascript
JS库 Highlightjs 添加代码行号的实现代码
2017/09/13 Javascript
vue实现a标签点击高亮方法
2018/03/17 Javascript
npm 下载指定版本的组件方法
2018/05/17 Javascript
小程序指纹验证的实现代码
2018/12/04 Javascript
Element Input输入框的使用方法
2020/07/26 Javascript
Python中的魔法方法深入理解
2014/07/09 Python
Python使用CMD模块更优雅的运行脚本
2015/05/11 Python
使用Python下载歌词并嵌入歌曲文件中的实现代码
2015/11/13 Python
Python的Django REST框架中的序列化及请求和返回
2016/04/11 Python
谈谈python中GUI的选择
2018/03/01 Python
python批量赋值操作实例
2018/10/22 Python
Python 学习教程之networkx
2019/04/15 Python
Python利用matplotlib做图中图及次坐标轴的实例
2019/07/08 Python
python实现文字版扫雷
2020/04/24 Python
如何在keras中添加自己的优化器(如adam等)
2020/06/19 Python
Python 操作 MySQL数据库
2020/09/18 Python
Python调用系统命令os.system()和os.popen()的实现
2020/12/31 Python
教师个人自我评价范文
2014/04/13 职场文书
2014党员民主评议个人总结
2014/09/10 职场文书
2014年政务公开工作总结
2014/12/09 职场文书
个人催款函范文
2015/06/23 职场文书
演讲开头怎么书写？
2019/08/06 职场文书
golang 实现两个结构体复制字段
2021/04/28 Golang
浅析Python中的随机采样和概率分布
2021/12/06 Python
MySQL表锁、行锁、排它锁及共享锁的使用详解
2022/04/02 MySQL
python处理json数据文件
2022/04/11 Python