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 相关文章推荐
利用js跨页面保存变量做菜单的方法
Jan 17 Javascript
js中的push和join方法使用介绍
Oct 08 Javascript
js实现带有介绍的Select列表菜单实例
Aug 18 Javascript
关于JSON与JSONP简单总结
Aug 16 Javascript
BootStrap框架个人总结(bootstrap框架、导航条、下拉菜单、轮播广告carousel、栅格系统布局、标签页tabs、模态框、菜单定位)
Dec 01 Javascript
JavaScript 数据类型详解
Mar 13 Javascript
Vue之Vue.set动态新增对象属性方法
Feb 23 Javascript
浅析JS中回调函数及用法
Jul 25 Javascript
vue 录制视频并压缩视频文件的方法
Jul 27 Javascript
vuex如何重置所有state(可定制)
Jan 17 Javascript
浅谈JavaScript面向对象--继承
Mar 20 Javascript
js实现三角形粒子运动
Sep 22 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
PHP出错界面
2006/10/09 PHP
PHP读取数据库并按照中文名称进行排序实现代码
2013/01/29 PHP
Destoon旺旺无法正常显示,点击提示“会员名不存在”的解决办法
2014/06/21 PHP
ThinkPHP让分页保持搜索状态的方法
2014/07/02 PHP
Yii编程开发常见调用技巧集锦
2016/07/15 PHP
求解开jscript.encode代码的asp函数
2007/02/28 Javascript
关于jquery中全局函数each使用介绍
2013/12/10 Javascript
深入理解JavaScript系列(17):面向对象编程之概论详细介绍
2015/03/04 Javascript
Labelauty?jQuery单选框/复选框美化插件分享
2015/09/26 Javascript
使用vue.js开发时一些注意事项
2016/04/27 Javascript
JS结合bootstrap实现基本的增删改查功能
2016/07/22 Javascript
Angular移动端页面input无法输入的解决方法
2017/11/14 Javascript
js事件on动态绑定数据,绑定多个事件的方法
2018/09/15 Javascript
微信小程序五子棋游戏AI实现方法【附demo源码下载】
2019/02/20 Javascript
js前端面试之同步与异步问题详解
2019/04/03 Javascript
如何使用JavaScript实现栈与队列
2019/06/24 Javascript
layui动态渲染生成左侧3级菜单的方法(根据后台返回数据)
2019/09/23 Javascript
[07:57]DOTA2热力大趴狂欢夜 广州站活动回顾
2013/11/27 DOTA
[06:09]辉夜杯主赛事开幕式
2015/12/25 DOTA
[01:10:48]完美世界DOTA2联赛PWL S2 GXR vs PXG 第一场 11.18
2020/11/18 DOTA
使用virtualenv创建Python环境及PyQT5环境配置的方法
2019/09/10 Python
使用opencv中匹配点对的坐标提取方式
2020/06/04 Python
Python 求向量的余弦值操作
2021/03/04 Python
html5 application cache遇到的严重问题
2012/12/26 HTML / CSS
移动HTML5前端框架—MUI的使用
2017/12/18 HTML / CSS
Notino希腊:购买香水和美容产品
2019/07/25 全球购物
普天C++笔试题
2016/03/20 面试题
会计毕业自我鉴定
2014/02/05 职场文书
感恩节红领巾广播稿
2014/02/11 职场文书
主题实践活动总结
2014/05/08 职场文书
2014迎国庆演讲稿
2014/09/19 职场文书
共产党员批评与自我批评
2014/10/15 职场文书
党的群众路线教育实践活动制度建设计划方案
2014/10/31 职场文书
试用期自我评价范文
2015/03/10 职场文书
班主任班级管理心得体会
2016/01/07 职场文书
nginx 防盗链防爬虫配置详解
2021/03/31 Servers