基于javascript实现放大镜特效


Posted in Javascript onDecember 03, 2020

本文实例为大家分享了javascript实现放大镜特效的具体代码,供大家参考,具体内容如下

我们在逛pc端商城时,鼠标放到商品上经常会看到一个类似放大镜效果的蒙层,

<!DOCTYPE html>
<html>

<head>
 <meta charset="UTF-8">
 <title></title>
 <style type="text/css">
  * {
   margin: 0px;
   padding: 0px;
  }
  
  #min {
   width: 350px;
   height: 350px;
   border: 1px solid #ccc;
   position: absolute;
   left: 50px;
   top: 50px;
  }
  
  #min img {
   width: 350px;
   height: 350px;
  }
  
  #max {
   width: 500px;
   height: 500px;
   position: absolute;
   left: 500px;
   top: 50px;
   border: 1px solid #ccc;
   overflow: hidden;
   display: none;
  }
  
  #max img {
   position: absolute;
   left: 0;
   top: 0;
  }
  
  #mask {
   width: 200px;
   height: 200px;
   background: rgba(255, 0, 0, 0.5);
   position: absolute;
   left: 0px;
   top: 0px;
   cursor: pointer;
   display: none;
  }
 </style>
</head>

<body>
 <div id="min">
  <img src="img/min.jpg" alt="" />
  <div id="mask"></div>
 </div>
 <div id="max">
  <img src="img/max.jpg" id="maxImg" />
 </div>
 <script type="text/javascript">
  // 1.鼠标经过小盒子,遮罩层出现,大盒子出现
  // 2.遮罩层跟随鼠标移动
  // 3.遮罩层移动,大盒子里的图片反方向移动
  var oMin = document.getElementById('min');
  var oMax = document.getElementById('max');
  var oMask = document.getElementById('mask');
  var oMaxImg = document.getElementById('maxImg');
  oMin.onmousemove = function(e) {
   // 1.鼠标经过小盒子,遮罩层和大盒子出现
   oMask.style.display = 'block';
   oMax.style.display = 'block';
   // 2.拿到鼠标在小盒子上的坐标
   var minX = e.clientX - oMin.offsetLeft;
   var minY = e.clientY - oMin.offsetTop;
   // 3.将鼠标放置在遮罩层的中间
   minX = minX - oMask.offsetWidth / 2;
   minY = minY - oMask.offsetHeight / 2;
   // 4.遮罩层可以移动的最大距离
   var maxWidth = oMin.offsetWidth - oMask.offsetWidth;
   var maxHeight = oMin.offsetHeight - oMask.offsetHeight;
   // 限定遮罩层的位置
   if (minX > maxWidth) {
    minX = maxWidth;
   } else if (minX <= 0) {
    minX = 0;
   }
   if (minY > maxHeight) {
    minY = maxHeight;
   } else if (minY <= 0) {
    minY = 0;
   }
   // 设定遮罩层的偏移
   oMask.style.left = minX + 'px';
   oMask.style.top = minY + 'px';
   // 大图片移动的距离=遮罩层移动的距离/遮罩层可以移动的最大距离*大图片最大移动距离
   var ratioX = minX / maxWidth;
   var ratioY = minY / maxHeight;
   // 计算出大图片的移动距离
   oMaxImg.style.left = -ratioX * (oMaxImg.offsetWidth - oMax.offsetWidth) + 'px';
   oMaxImg.style.top = -ratioY * (oMaxImg.offsetHeight - oMax.offsetHeight) + 'px';
  };
  // 鼠标移开,遮罩层和大盒子消失
  oMin.onmouseout = function() {
   oMask.style.display = 'none';
   oMax.style.display = 'none';
  }
 </script>
</body>

</html>

效果图:

基于javascript实现放大镜特效

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript之对系统的toFixed()方法的修正
May 08 Javascript
一个js的tab切换效果代码[代码分离]
Apr 11 Javascript
js图片翻书效果代码分享
Aug 20 Javascript
jQuery实现仿QQ在线客服效果的滚动层代码
Oct 15 Javascript
温习Javascript基础语法之词法结构
May 31 Javascript
深入学习jQuery中的data()
Dec 22 Javascript
深入理解Angularjs中的$resource服务
Dec 31 Javascript
详解swipe使用及竖屏页面滚动方法
Jun 28 Javascript
微信小程序生成二维码的示例代码
Mar 29 Javascript
浅谈layui里的上传控件问题
Sep 26 Javascript
vue-cli3访问public文件夹静态资源报错的解决方式
Sep 02 Javascript
JavaScript实现一键复制内容剪贴板
Jul 23 Javascript
javascript实现时钟动画
Dec 03 #Javascript
javascript中导出与导入实现模块化管理教程
Dec 03 #Javascript
JS如何实现在弹出窗口中加载页面
Dec 03 #Javascript
对vue生命周期的深入理解
Dec 03 #Vue.js
在实例中重学JavaScript事件循环
Dec 03 #Javascript
js 数据类型判断的方法
Dec 03 #Javascript
用vue设计一个日历表
Dec 03 #Vue.js
You might like
PHP HTML代码串 截取实现代码
2009/06/29 PHP
PHP文章按日期(月日)SQL归档语句
2012/11/29 PHP
php使用curl打开https网站的方法
2015/06/17 PHP
php实现往pdf中加数字签名操作示例【附源码下载】
2018/08/07 PHP
php弹出提示框的是实例写法
2019/09/26 PHP
PHP时间类完整代码实例
2021/02/26 PHP
JS小功能(checkbox实现全选和全取消)实例代码
2013/11/28 Javascript
关于img的href和src取变量及赋值的方法
2014/04/28 Javascript
node.js中的fs.renameSync方法使用说明
2014/12/16 Javascript
关于安卓手机微信浏览器中使用XMLHttpRequest 2上传图片显示字节数为0的解决办法
2016/05/17 Javascript
js的各种排序算法实现(总结)
2016/07/23 Javascript
AngularJS中的包含详细介绍及实现示例
2016/07/28 Javascript
轻松掌握JavaScript状态模式
2016/09/07 Javascript
微信小程序 开发MAP(地图)实例详解
2017/06/27 Javascript
在Js页面通过POST传递参数跳转到新页面详解
2017/08/25 Javascript
详解webpack编译多页面vue项目的配置问题
2017/12/11 Javascript
Node.js readline 逐行读取、写入文件内容的示例
2018/03/01 Javascript
JavaScript 截取字符串代码实例
2019/09/05 Javascript
微信小程序加载机制及运行机制图解
2019/11/27 Javascript
SpringBoot+Vue开发之Login校验规则、实现登录和重置事件
2020/10/19 Javascript
[01:08:17]2018DOTA2亚洲邀请赛3月29日 小组赛B组 EG VS VGJ.T
2018/03/30 DOTA
用Python的SimPy库简化复杂的编程模型的介绍
2015/04/13 Python
Python采用Django制作简易的知乎日报API
2016/08/03 Python
在python3环境下的Django中使用MySQL数据库的实例
2017/08/29 Python
Python加载带有注释的Json文件实例
2018/05/23 Python
详解Python3迁移接口变化采坑记
2019/10/11 Python
详解HTML5中的Communication API基本使用方法
2016/01/29 HTML / CSS
LocalStorage记住用户和密码功能
2017/07/24 HTML / CSS
HTML5 Blob对象的具体使用
2020/05/22 HTML / CSS
什么是索引指示器
2012/08/20 面试题
校园摄影活动策划方案
2014/02/05 职场文书
数控专业大学毕业生职业规划范文
2014/02/06 职场文书
桥梁工程专业求职信
2014/04/21 职场文书
英语导游欢迎词
2015/09/30 职场文书
2016年寒假家长评语
2015/10/10 职场文书
如何利用python实现列表嵌套字典取值
2022/06/10 Python