首页
所有分类
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 相关文章推荐
JS 自定义函数缺省值的设置方法
May 05 Javascript
js打印纸函数代码（递归）
Jun 18 Javascript
解析JSON对象与字符串之间的相互转换
Dec 18 Javascript
Javascript实现网络监测的方法
Jul 31 Javascript
简单三步实现报表页面集成天气
Dec 15 Javascript
Bootstrap常用组件学习(整理)
Mar 24 Javascript
Vue v2.4中新增的$attrs及$listeners属性使用教程
Jan 08 Javascript
基于vue 添加axios组件,解决post传参数为null的问题
Mar 05 Javascript
在vue中,v-for的索引index在html中的使用方法
Mar 06 Javascript
微信小程序第三方框架对比 之 wepy / mpvue / taro
Apr 10 Javascript
Vue中实现权限控制的方法示例
Jun 07 Javascript
一篇文章了解正则表达式的替换技巧
Feb 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
ICF-SW07(1) Grundig(1) 山进(2) SANGEAN(1) S500(1) H-501(1) PL990(2) S400(1) ATS-909X(1) S700(1)
You might like
PHP图片加水印实现方法
2016/05/06 PHP
常用简易JavaScript函数
2009/04/09 Javascript
jQuery select控制插件
2009/08/17 Javascript
ASP.NET jQuery 实例12 通过使用jQuery validation插件简单实现用户注册页面验证功能
2012/02/03 Javascript
javascript实现div的显示和隐藏的小例子
2013/06/25 Javascript
jQuery 动态云标签插件
2014/11/11 Javascript
JS实现网页背景颜色与select框中颜色同时变化的方法
2015/02/27 Javascript
在其他地方你学不到的jQuery小贴士和技巧(欢迎收藏)
2016/01/20 Javascript
如何消除inline-block属性带来的标签间间隙
2016/03/31 Javascript
AngularJS基础 ng-mousemove 指令简单示例
2016/08/02 Javascript
基于JavaScript实现在新的tab页打开url
2016/08/04 Javascript
JavaScript中绑定事件的三种方式及去除绑定
2016/11/05 Javascript
详解nodeJS之二进制buffer对象
2017/06/03 NodeJs
利用百度地图API获取当前位置信息的实例
2017/11/06 Javascript
vue的全局提示框组件实例代码
2018/02/26 Javascript
使用layui日期控件laydate对开始和结束时间进行联动控制的方法
2019/09/06 Javascript
jstree中的checkbox默认选中和隐藏示例代码
2019/12/29 Javascript
JavaScript实现简单日历效果
2020/09/11 Javascript
[02:19]DOTA2女子战队FOX视频专访：希望更多美眉一起加入
2013/10/15 DOTA
关于python的list相关知识(推荐)
2017/08/30 Python
pycharm中显示CSS提示的知识点总结
2019/07/29 Python
Python实现把类当做字典来访问
2019/12/16 Python
pycharm设置python文件模板信息过程图解
2020/03/10 Python
python在一个范围内取随机数的简单实例
2020/08/16 Python
python SOCKET编程基础入门
2021/02/27 Python
CSS3中background-clip和background-origin的区别示例介绍
2014/03/10 HTML / CSS
GAP美国官网：美国休闲时尚品牌
2016/08/26 全球购物
2014春晚主持词
2014/03/25 职场文书
银行行长竞聘演讲稿
2014/04/23 职场文书
小学爱国卫生月活动总结
2014/06/30 职场文书
大学生实习证明范文（5篇）
2014/09/18 职场文书
2014年企业员工工作总结
2014/12/09 职场文书
六年级语文教学反思
2016/03/03 职场文书
导游词之丽江普济寺
2019/10/22 职场文书
Python源码解析之List
2021/05/21 Python
Vue如何清空对象
2022/03/03 Vue.js