基于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 相关文章推荐
通过jquery实现tab标签浏览效果
Feb 20 Javascript
JavaScript 函数式编程的原理
Oct 16 Javascript
输入密码检测大写是否锁定js实现代码
Dec 03 Javascript
使用mouse事件实现简单的鼠标经过特效
Jan 30 Javascript
浅谈JavaScript中指针和地址
Jul 26 Javascript
运用js教你轻松制作html音乐播放器
Apr 17 Javascript
JavaScript递归操作实例浅析
Oct 31 Javascript
vue-router:嵌套路由的使用方法
Feb 21 Javascript
js实现一键复制功能
Mar 16 Javascript
jquery实现异步加载图片(懒加载图片一种方式)
Apr 24 jQuery
深入理解node.js之path模块
May 03 Javascript
layui前段框架日期控件使用方法详解
May 19 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编写大型网站问题集
2007/03/06 PHP
7个超级实用的PHP代码片段
2011/07/11 PHP
php数组函数序列之in_array() - 查找数组中是否存在指定值
2011/11/07 PHP
php实现的支持imagemagick及gd库两种处理的缩略图生成类
2014/09/23 PHP
PHP使用Memcache时模拟命名空间及缓存失效问题的解决
2016/02/27 PHP
PHP正则表达式匹配替换与分割功能实例浅析
2017/02/04 PHP
PHP中使用OpenSSL生成证书及加密解密
2017/02/05 PHP
Laravel框架控制器的middleware中间件用法分析
2019/09/30 PHP
Javascript 自定义类型方法小结
2010/03/02 Javascript
Jquery 滑入滑出效果实现代码
2010/03/27 Javascript
JS 实现Json查询的方法实例
2013/04/12 Javascript
Javascript中的for in循环和hasOwnProperty结合使用
2013/06/05 Javascript
node.js中的fs.exists方法使用说明
2014/12/17 Javascript
jquery增加和删除元素的方法
2015/01/14 Javascript
jQuery选择器源码解读(一):Sizzle方法
2015/03/31 Javascript
jQuery实现简单二级下拉菜单
2015/04/12 Javascript
js判断手机访问或者PC的几个例子(常用于手机跳转)
2015/12/15 Javascript
jquery使用EasyUI Tree异步加载JSON数据(生成树)
2017/02/11 Javascript
ES6与CommonJS中的模块处理的区别
2018/06/13 Javascript
layui 优化button按钮和弹出框的方法
2018/08/15 Javascript
Javascript中绑定click事件的四种方式介绍
2018/10/26 Javascript
jQuery 图片查看器插件 Viewer.js用法简单示例
2020/04/04 jQuery
解决vue的touchStart事件及click事件冲突问题
2020/07/21 Javascript
js制作提示框插件
2020/12/24 Javascript
跟老齐学Python之重回函数
2014/10/10 Python
python实现下载文件的三种方法
2017/02/09 Python
利用python 更新ssh 远程代码 操作远程服务器的实现代码
2018/02/08 Python
使用pandas中的DataFrame数据绘制柱状图的方法
2018/04/10 Python
Python PyAutoGUI模块控制鼠标和键盘实现自动化任务详解
2018/09/04 Python
对python文件读写的缓冲行为详解
2019/02/13 Python
在django中实现choices字段获取对应字段值
2020/07/12 Python
python使用smtplib模块发送邮件
2020/12/17 Python
Marmot土拨鼠官网:美国专业户外运动品牌
2018/01/11 全球购物
泰国综合购物网站:Lazada泰国
2018/04/09 全球购物
课程设计心得体会
2013/12/28 职场文书
运动会班级口号霸气押韵
2015/12/24 职场文书