文章 专题 AI工具 学习 下载 问答 源码 最近更新
PHP
会员中心 讲师中心 微信公众号
首页 > web前端 > js教程 > 正文

如何用jquery做出放大镜效果

php中世界最好的语言
发布： 2018-03-14 16:50:35
原创
1737人浏览过

这次给大家带来如何用jquery做出放大镜效果，用jquery做出放大镜效果的注意事项有哪些，下面就是实战案例，一起来看一下。

jquery写的两种放大镜效果，没有使用到插件。调理和思路清晰。不是使用面向对象方式写的，初学者较容易看懂。废话不多说，看代码。图片这里就不上传了，大家自己找下。最好是找到比例的，这样效果比较好。

<body> 
  <p id="father"> 
    <p id="container"> 
      @@##@@ 
      @@##@@ 
      <p class="shade"></p> 
    </p> 
    <p class="small first">@@##@@</p> 
    <p class="small second">@@##@@</p> 
  </p>    
  <p class="big"> 
    @@##@@ 
    @@##@@ 
  </p> 
</body>
登录后复制

css代码

*{padding: 0; margin: 0;} 
  #father .small{width: 50px; height: 50px; border: 2px solid #ccc; bottom: 0; position: absolute;} 
  #father .second{left: 70px;} 
  .third{left: 140px;} 
  #father{position: relative; top: 100px; left: 50px; height: 460px;} 
  #container{position: absolute; width: 400px; height: 400px;} 
  #container img{position: absolute; display: none;} 
 
  .shade{width: 200px; height: 200px; position: absolute; background: #000; opacity: 0.4; top: 0; 
    left: 0; display: none;} 
  .big{width: 400px; height: 400px; position: absolute; top: 100px; overflow: hidden; left: 500px; display: none;} 
  .big img{width: 800px; height: 800px; position: absolute; display: none;}
登录后复制

js代码

<script type="text/javascript" src='js/jquery-1.12.4.min.js'></script> 
  <script type="text/javascript"> 
    $(function () {  
      changePic('.first',0); 
      changePic('.second',1);  
      var shadeWidth = $('.shade').width(),//阴影的宽度 
        shadeHeight = $('.shade').height(),//阴影的高度 
        middleWidth = $('#container').width(),//容器的宽度 
        middleHeight = $('#container').height(),//容器的高度 
        bigWidth = $('.big').width(),//放大图片盒子的宽度 
        bigHeight = $('.big').height(),//放大图片盒子的高度 
        rateX = bigWidth / shadeWidth,//放大区和遮罩层的宽度比例 
        rateY = bigHeight / shadeHeight;//放大区和遮罩层的高度比例  
      //当鼠标移入与移出时阴影与放大去显现/消失 
      $('#container').hover(function() { 
        $('.shade').show(); 
        $('.big').show(); 
      }, function() { 
        $('.shade').hide(); 
        $('.big').hide(); 
      }).mousemove(function(e) {//当鼠标移动时，阴影和放大区图片进行移动  
        //记录下光标距离页面的距离 
        var x = e.pageX, 
          y = e.pageY; 
        //设置遮罩层的位置 
        $('.shade').offset({ 
          top: y-shadeHeight/2, 
          left: x-shadeWidth/2 
        });     
        //获取遮罩层相对父元素的位置 
        var cur = $('.shade').position(), 
          _top = cur.top, 
          _left = cur.left, 
          hdiffer = middleHeight - shadeHeight, 
          wdiffer = middleWidth - shadeWidth;  
        if (_top < 0) _top = 0; 
        else if (_top > hdiffer) _top = hdiffer; 
        if (_left < 0) _left = 0; 
        else if (_left > wdiffer) _left =wdiffer;  
        //判断完成后设置遮罩层的范围 
        $('.shade').css({ 
          top: _top, 
          left: _left 
        }); 
        //设置放大区图片移动 
        $('.big img').css({ 
          top: - rateY*_top, 
          left: - rateX*_left 
        });  
      });; 
      //封装的改变图片显示的函数 
      function changePic (element,index) { 
        $(element).click(function() { 
          $('#container img').eq(index).css('display', 'block').siblings().css('display', 'none'); 
          $('.big img').eq(index).css('display', 'block').siblings().css('display', 'none'); 
        }); 
      }        
    });
登录后复制

以上是常用的，下面这个是在原图基础上放大的

htm

<body> 
  <p id="father"> 
    <p id="container"> 
      @@##@@ 
      @@##@@ 
      @@##@@ 
      <p class="shade"> 
        @@##@@ 
        @@##@@ 
        @@##@@ 
      </p> 
    </p> 
    <p class="small first">@@##@@</p> 
    <p class="small second">@@##@@</p> 
    <p class="small third">@@##@@</p> 
  </p> 
</body>
登录后复制

css代码

*{padding: 0; margin: 0;} 
    #father .small{width: 50px; height: 50px; border: 2px solid #ccc; bottom: 0; position: absolute;} 
    #father .second{left: 70px;} 
    .third{left: 140px;} 
    #father{position: relative; top: 100px; left: 50px; height: 460px;} 
    #container{position: absolute; width: 400px; height: 400px;} 
    #container img{position: absolute; display: none;} 
    .shade{width: 200px; height: 200px; position: absolute; top: 0;left: 0; display: none; border-radius: 50%; overflow: hidden; background: #000;} 
    .shade img{display: none; width: 800px; height: 800px; position: absolute;}
登录后复制

js代码

<span style="white-space:pre">  </span><script type="text/javascript" src='js/jquery-1.12.4.min.js'></script> 
  <script type="text/javascript"> 
    $(function () { 
      changePic('.first',0); 
      changePic('.second',1); 
      changePic('.third',2); 
      var shadeWidth = $('.shade').width(),//阴影的宽度 
        shadeHeight = $('.shade').height(),//阴影的高度 
        middleWidth = $('#container').width(),//容器的宽度 
        middleHeight = $('#container').height(),//容器的高度 
        bigImgWidth = $('.shade img').width(),//放大图片盒子的宽度 
        bigImgHeight = $('.shade img').height(),//放大图片盒子的高度 
        rateX = bigImgWidth / middleWidth,//放大区和遮罩层的宽度比例2 
        rateY = bigImgHeight / middleHeight;//放大区和遮罩层的高度比例2  
      //当鼠标移入与移出时阴影与放大去显现/消失 
      $('#container').hover(function() { 
        $('.shade').show(); 
        $('.big').show(); 
      }, function() { 
        $('.shade').hide(); 
        $('.big').hide(); 
      }).mousemove(function(e) {//当鼠标移动时，阴影和放大区图片进行移动         
        //记录下光标距离页面的距离 
        var x = e.pageX, 
          y = e.pageY;  
        //设置遮罩层的位置 
        $('.shade').offset({ 
          top: y-shadeHeight/2, 
          left: x-shadeWidth/2 
        });     
        //获取遮罩层相对父元素的位置 
        var cur = $('.shade').position(), 
          _top = cur.top, 
          _left = cur.left, 
          hdiffer = middleHeight - shadeHeight, 
          wdiffer = middleWidth - shadeWidth;  
        if (_top < 0) _top = 0; 
        else if (_top > hdiffer) _top = hdiffer; 
        if (_left < 0) _left = 0; 
        else if (_left > wdiffer) _left =wdiffer;  
        //判断完成后设置遮罩层的范围 
        $('.shade').css({ 
          top: _top, 
          left: _left 
        });           
        //设置放大区图片移动 
        $('.shade img').css({ 
          top: - _top*rateY*3/2, 
          left: - _left*rateX*3/2 
        });  
      });;  
      //封装的改变图片显示的函数 
      function changePic (element,index) { 
        $(element).click(function() { 
          $('#container img').eq(index).css('display', 'block').siblings().css('display', 'none'); 
          $('.shade img').eq(index).css('display', 'block').siblings().css('display', 'none'); 
        }); 
      }        
    }); 
<span style="white-space:pre">  </span></script>
登录后复制

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

jquery添加带有样式的HTML标签

jquery怎样给动态生成的标签绑定事件

jQuery怎样获取标签子元素的值

jQuery怎样获取并且修改P标签内的值

如何用jquery做出放大镜效果如何用jquery做出放大镜效果如何用jquery做出放大镜效果如何用jquery做出放大镜效果如何用jquery做出放大镜效果如何用jquery做出放大镜效果如何用jquery做出放大镜效果如何用jquery做出放大镜效果如何用jquery做出放大镜效果如何用jquery做出放大镜效果如何用jquery做出放大镜效果如何用jquery做出放大镜效果如何用jquery做出放大镜效果如何用jquery做出放大镜效果如何用jquery做出放大镜效果

以上就是如何用jquery做出放大镜效果的详细内容，更多请关注php中文网其它相关文章！

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。

下载
来源：php中文网
收藏 点赞
上一篇：可变参数css函数获取非行间样式的方法 下一篇：js中arguments详解
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
js怎样实现密码强度检测 密码强度实时检测的完整实现方案 密码强度检测通过定义评分规则并计算得分实现，核心步骤包括：1.设定长度、字符类型、常见密码等规则；2.编写JavaScript代码进行评分；3.结合HTML实现实时反馈。为防止弱密码，可采取强制策略、黑名单、提示、可视化和双重验证。金融类应用需最严格规则，社交类和内部系统可适度调整。密码找回应通过邮箱、安全问题或客服实现，兼顾安全与体验。
2025-06-21 20:24:02
512
js如何实现简单的拖拽排序 列表排序的3种交互实现方法！ 实现拖拽排序需监听dragstart、dragover、drop事件并动态调整DOM位置，具体步骤为：1.为列表项添加draggable属性；2.在dragstart中记录拖拽元素；3.在dragover中阻止默认行为；4.在drop中根据鼠标位置交换元素位置。性能优化方面可通过requestAnimationFrame延迟更新、限制拖拽频率等方式减少重绘重排。交互方式除原生拖拽外还包括上下箭头按钮、拖拽手柄和数字输入框。持久化排序结果可通过获取排序后的ID数组并发送至后端保存，后端更新数据库中
2025-06-21 18:39:02
306
js如何检测蓝牙设备 Web蓝牙API使用实战教程 要检测蓝牙设备在JavaScript中主要通过Web蓝牙API实现，其核心是navigator.bluetooth对象。首先检查浏览器是否支持该API，若不支持则提示用户更换或升级浏览器；接着使用requestDevice()方法请求用户选择设备，并连接到所选设备的GATT服务器；然后获取指定服务和特征值并读取数据。为处理权限问题，需捕获requestDevice()调用时的错误，若用户拒绝授权则提供友好提示说明原因及启用方式。优化连接体验方面，可显示加载状态、设置超时机制以及监听gattser
2025-06-21 18:36:02
400
js怎样实现平滑滚动 js实现平滑滚动的4种优化方案 实现平滑滚动的核心在于控制滚动速度和动画时长，1.使用window.scrollTo或element.scrollTo配合requestAnimationFrame模拟动画效果；2.通过缓动函数使滚动更自然；3.优化性能时减少重排重绘，优先使用CSStransform；4.处理兼容性可使用polyfill或兼容性前缀；5.实现滚动劫持需监听wheel事件并自定义滚动逻辑，但需注意用户体验与可访问性。
2025-06-21 18:27:02
811
js怎样实现文件拖拽上传 js文件拖拽上传的4步完整实现 文件拖拽上传的核心步骤是监听拖拽事件、获取文件信息和发送文件到服务器。具体为：1.监听dragover和drop事件；2.通过event.dataTransfer.files获取文件列表；3.使用FormData结合XMLHttpRequest或FetchAPI上传文件。优化用户体验需注意：提供视觉反馈、显示上传进度条、清晰的错误处理、客户端验证文件类型和大小、支持多文件上传。大文件上传可通过分片上传、断点续传、使用专业库、优化服务器与客户端性能实现。安全措施包括：服务器端验证文件类型、扫描文件
2025-06-21 16:57:01
220
js怎样实现颜色选择器 颜色选择器的3种交互设计方案 颜色选择器可通过滑动条式、色盘式、输入框式三种方案实现，各有优劣。1.滑动条式使用RGB三个滑块实时更新颜色预览，简单直观但需多次调整；2.色盘式通过点击位置计算HSV值再转RGB，直观但实现较复杂；3.输入框式适合熟悉颜色代码的用户，需验证输入并反馈颜色。为提升用户体验，应提供多种颜色格式、历史记录、预设颜色、对比度检测功能。色盘式核心在于将点击坐标转换为HSV，进而转RGB。性能优化可采用节流、requestAnimationFrame、减少DOM操作、使用Canvas等方法，确保流畅体验。
2025-06-21 15:21:01
110
js如何实现语音合成功能 js语音合成的4种调用方式 JavaScript实现语音合成的核心方法是使用WebSpeechAPI中的SpeechSynthesis接口。要检查浏览器是否支持语音合成，可使用if('speechSynthesis'inwindow)进行判断；创建并配置语音实例需通过SpeechSynthesisUtterance对象设置文本、语言、语速、音调和音量等参数；可通过speechSynthesis.getVoices()获取可用语音并动态生成选择列表；控制播放使用speak()、pause()、resume()和cancel(
2025-06-21 10:57:01
291
js如何获取当前时间戳 获取时间戳的4种实现方式解析 获取JavaScript当前时间戳的方法有：1.Date.now()，2.newDate().getTime()，3.newDate().valueOf()，4.+newDate()。其中Date.now()最推荐，兼容性好且简洁高效；其他方法虽语法不同但结果一致。时间戳转换为可读日期需借助Date对象，通过getFullYear、getMonth等方法获取年月日时分秒，或使用toLocaleDateString等格式化方法，也可借助第三方库如Day.js。时间戳用途广泛，包括生成唯一ID、缓存
2025-06-21 10:39:02
1003
js如何生成随机数 随机数生成的5种常用方法详解 JavaScript生成随机数的核心方法是Math.random()，但需根据需求进行扩展。生成指定范围整数用Math.floor(Math.random()(max-min+1))+min；生成浮点数则直接缩放偏移；正态分布可用Box-Muller变换；安全场景应使用WebCryptoAPI；从数组选元素则用Math.floor(Math.random()array.length)索引；提升质量可引入外部熵源或复杂算法，避免用时间戳作为种子。
2025-06-21 10:21:02
523
js怎么实现轮播图效果 js实现轮播图的5个关键步骤讲解 轮播图的实现主要包括HTML结构搭建、CSS样式设置、JS控制切换等步骤。1.HTML结构需要包含容器、图片列表、指示器和控制按钮；2.CSS需设置容器尺寸、隐藏溢出内容并使用flex布局排列图片，同时添加过渡动画；3.JS通过修改transform属性实现图片切换，并控制指示器状态同步更新；4.可添加自动轮播功能，使用setInterval定时切换图片；5.为提升交互体验，可添加触摸滑动支持，通过监听touchstart、touchmove、touchend事件实现滑动手势识别；6.性能优化方
2025-06-20 22:33:02
590
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
app下载
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部