经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » JS/JS库/框架 » JavaScript » 查看文章
js详细讲解放大镜的实现
来源：cnblogs　　作者：南风晚来晚相识　　时间：2023/9/10 18:53:45　　对本文有异议

实现放大镜的整体思路

  1. 1.当鼠标放在图片上的时候,出现蒙层。
  2. 2.出现蒙层，让鼠标在蒙层中心
  3. 3.限制蒙层移动的范围
  4. 4.放大镜移动

最终实现的效果

  1. 鼠标放上去的时候,出现一个蒙层。
  2. 蒙层的移动范围只能在图片里，不能超出范围。
  3. 移动蒙层时，右侧会出现图片的放大部分。
  4. 移除图片的范围，放大镜消失。

鼠标放上去时候出现蒙层

  1. <style>
  2.   *{
  3.     padding: 0;
  4.     margin: 0;
  5.   }
  6.   .box{
  7.     margin-left: 400px;
  8.     margin-top: 150px;
  9.     position: relative;
  10.   }
  11.   .small-box{
  12.     position: absolute;
  13.     /* 图片的大小 */
  14.     height: 450px;
  15.     width: 450px;
  16.   }
  17.   .mask {
  18.     position: absolute;
  19.     left: 0;
  20.     top: 0;
  21.     display: none;
  22.     width: 300px;
  23.     height: 300px;
  24.     z-index: 3;
  25.     border: 1px solid #aaa;
  26.     background: 50% top no-repeat #fede4f;
  27.     opacity: .5;
  28.     -moz-opacity: .5;
  29.     -khtml-opacity: .5;
  30.     filter: alpha(Opacity=50);
  31.     cursor: move;
  32.   }
  33.   .big-box{
  34.     position: relative;
  35.     display: none;
  36.     /* 右侧放大镜盒子的大小 */
  37.     width: 500px;
  38.     height: 500px;
  39.     /* 盒子肯定比图片小，然后使用超出裁剪 */
  40.     overflow: hidden;
  41.     /* 定位右侧盒子的位置 */
  42.     top: 0px;
  43.     /* 留了一个单位的像素处来，好区别 */
  44.     left:451px;
  45.   }
  46.   #bigImg{
  47.     position: absolute;
  48.   }
  49.   .small-box:hover .mask{
  50.     display: block;
  51.   }
  52.   .small-box:hover + .big-box{
  53.     display: block;
  54.   }
  55. </style>
  1. <body>
  2.    <div id="box" class="box">
  3.     <!-- 页面上看见的小图 -->
  4.     <div id="smallBox" class="small-box">
  5.       <img src="https://img11.360buyimg.com/n1/s450x450_jfs/t1/125337/25/33944/39827/643cecaaFe632cc8e/b33f7ab378a5c0d3.jpg">
  6.         <div class="mask" id="mask"></div>
  7.       </div>
  8.     </div>
  9.     <!-- 放大的图 -->
  10.     <div class="big-box" id="bigBox">
  11.       <img id="bigImg" src="https://img14.360buyimg.com/n0/jfs/t1/125337/25/33944/39827/643cecaaFe632cc8e/b33f7ab378a5c0d3.jpg.avif" class="">
  12.     </div>
  13.    </div>
  14. </body>

计算蒙层坐标的中心位置

  1. 1.我们首先要计算一个坐标点的位置。
  2. 获取蒙层坐标点的位置
  3. let mask_x= e.pageX - box.offsetLeft
  4. let mask_y= e.pageY - box.offsetTop
  5. 现在我们得到了坐标点的位置。
  8. 如何计算蒙层坐标的中心位置呢？
  9. mask_x= mask_x-mask.offsetWidth/2
  10. mask_y= mask_y-mask.offsetHeight/2
  11. 也就是将 mask_x 向左移动了mask元素宽度的一半。
  13. 特别说明：
  14. offsetLeft 是指当前元素相对其距离自己最近的具有定位属性的父级元素的偏移值。
  15. margin,定位,border也会影响offsetLeft的值。但是padding不会影响。

  1. <body>
  2.    <div id="box" class="box">
  3.     <!-- 页面上看见的小图 -->
  4.     <div id="smallBox" class="small-box">
  5.       <img src="https://img11.360buyimg.com/n1/s450x450_jfs/t1/125337/25/33944/39827/643cecaaFe632cc8e/b33f7ab378a5c0d3.jpg">
  6.       <div class="mask" id="mask"></div>
  7.     </div>
  8.     <!-- 放大的图 -->
  9.     <div class="big-box" id="bigBox">
  10.       <img src="https://img14.360buyimg.com/n0/jfs/t1/125337/25/33944/39827/643cecaaFe632cc8e/b33f7ab378a5c0d3.jpg.avif" class="">
  11.     </div>
  12.    </div>
  13. </body>
  1. <script>
  2.   let smallBox=document.getElementById('smallBox')
  3.   let box=document.getElementById('box')
  4.   let mask=document.getElementById('mask')
  6.   smallBox.onmousemove =function(e){
  7.     // 获取蒙层坐标点的位置
  8.     let mask_x= e.pageX - box.offsetLeft
  9.     let mask_y= e.pageY - box.offsetTop
  10.     // 计算蒙层坐标点的中心位置
  11.     mask_x-= mask.offsetWidth/2
  12.     mask_y-= mask.offsetHeight/2 
  13.     mask.style.left = mask_x+'px'
  14.     mask.style.top = mask_y+'px'
  15.   }
  16. </script>

限制移动的范围

  1. 在移动蒙层的的时候，是有范围限制的。
  2. X轴最大的范围是： smallBox.offsetWidth-mask.offsetWidth，最小范围是0；
  3. Y轴的最大范围是： smallBox.offsetHeight-mask.offsetHeight，最小范围是0；

  1. <script>
  2.   let smallBox=document.getElementById('smallBox')
  3.   let box=document.getElementById('box')
  4.   let mask=document.getElementById('mask')
  6.   smallBox.onmousemove =function(e){
  7.     // 获取蒙层坐标点的位置
  8.     let mask_x= e.pageX - box.offsetLeft
  9.     let mask_y= e.pageY - box.offsetTop
  10.     // 计算蒙层坐标点的中心位置
  11.     mask_x-= mask.offsetWidth/2
  12.     // mask_x-= mask.offsetWidth - mask_x /2
  13.     mask_y-= mask.offsetHeight/2 
  16.     // 获取X可以移动的最大值
  17.     let moveMaxX= smallBox.offsetWidth-mask.offsetWidth
  18.     // 获取y可以移动的最大值
  19.     let moveMaxY= smallBox.offsetHeight-mask.offsetHeight
  21.     // X轴最小值和最大值
  22.     if(mask_x<0){
  23.       mask_x=0
  24.     }
  25.     if(mask_x>moveMaxX){
  26.       mask_x=moveMaxX
  27.     }
  28.     // Y轴最小值和最大值
  29.     if(mask_y<0){
  30.       mask_y=0
  31.     }
  32.     if(mask_y>moveMaxY){
  33.       mask_y=moveMaxY
  34.     }
  35.     
  36.     mask.style.left = mask_x+'px'
  37.     mask.style.top = mask_y+'px'
  38.   }
  39. </script>

大图的移动

  1. 当我们的蒙层向右移动的时候，
  2. 我们的大图实际上是向左移动的。
  3. 移动的公式：
  4. bigImg.style.left= -mask_x *(bigBox.offsetWidth/mask.offsetWidth) + 'px'
  5. bigImg.style.top= -mask_y *(bigBox.offsetHeight/mask.offsetHeight) + 'px'
  1. <script>
  2. let smallBox=document.getElementById('smallBox')
  3. let box=document.getElementById('box')
  4. let mask=document.getElementById('mask')
  5. let bigBox = document.getElementById('bigBox')
  7. smallBox.onmousemove =function(e){
  8.   // 获取蒙层坐标点的位置
  9.   let mask_x= e.pageX - box.offsetLeft
  10.   let mask_y= e.pageY - box.offsetTop
  11.   // 计算蒙层坐标点的中心位置
  12.   mask_x-= mask.offsetWidth/2
  13.   mask_y-= mask.offsetHeight/2
  15.   // 获取X可以移动的最大值
  16.   let moveMaxX= smallBox.offsetWidth-mask.offsetWidth
  17.   // 获取y可以移动的最大值
  18.   let moveMaxY= smallBox.offsetHeight-mask.offsetHeight
  20.   // X轴最小值和最大值
  21.   if(mask_x<0){
  22.     mask_x=0
  23.   }
  24.   if(mask_x>moveMaxX){
  25.     mask_x=moveMaxX
  26.   }
  27.   // Y轴最小值和最大值
  28.   if(mask_y<0){
  29.     mask_y=0
  30.   }
  31.   if(mask_y>moveMaxY){
  32.     mask_y=moveMaxY
  33.   }
  34.   
  35.   mask.style.left = mask_x+'px'
  36.   mask.style.top = mask_y+'px'
  38.   // 右侧的放大图
  39.   bigImg.style.left= -mask_x *(bigBox.offsetWidth/mask.offsetWidth) + 'px'
  40.   bigImg.style.top= -mask_y *(bigBox.offsetHeight/mask.offsetHeight) + 'px'
  41. }
  42. </script>

原文链接：https://www.cnblogs.com/IwishIcould/p/17674318.html

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

JavaScript热门文章

  • echarts 饼图 + 全屏显示
  • js正则匹配以{开头,以}结尾的表达式怎么写？-附源码
  • echarts 实现数据(tooltip)自动轮播插件
  • Js设置博客园主题色(theme-color)
  • elementUI 设置input的只读或禁用的方法
  • 超级好用的流程图js框架 值得收藏
  • layui table+复杂表头+合并单元格
  • 获取地理位置
  • 如何使用JavaScript导入和导出Excel文件
  • WebStorm eslint插件报错解决 - TypeError: this.CliEngine is not a constructor

    • JavaScript推荐文章

  • 一些八股：1.fetch 的理解。2.let、const、var
  • 电子表格转身购物车：三步轻松实现
  • Canvas简历编辑器-图形绘制与状态管理(轻量级DOM)
  • IntersectionObserver + scrollIntoView 实现电梯导航 - xingba-coder
  • 可视化—gojs 超多超实用经验分享(三)
  • PixiJS源码分析系列： 第一章 从最简单的例子入手
  • WebRTC入门
  • 前端 Array.sort() 源码学习
  • 【技巧】JS代码这么写，前端小姐姐都会爱上你
  • 【JS】await异常捕获，这样做才完美

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号