基于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 隔行换色函数代码
Oct 24 Javascript
chrome原生方法之数组
Nov 30 Javascript
JavaScript之自定义类型
May 04 Javascript
让alert不出现弹窗的两种方法
May 18 Javascript
JavaScript基本语法讲解
Jun 03 Javascript
JavaScript的Date()方法使用详解
Jun 09 Javascript
jQuery+ajax+asp.net获取Json值的方法
Jun 08 Javascript
AngularJS表单提交实例详解
Feb 18 Javascript
node.js中cluster的使用教程
Jun 09 Javascript
vue.js整合vux中的上拉加载下拉刷新实例教程
Jan 09 Javascript
详解JS取出两个数组中的不同或相同元素
Mar 20 Javascript
Vue CLI4 Vue.config.js标准配置(最全注释)
Jun 05 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
杏林同学录(九)
2006/10/09 PHP
php针对cookie操作的队列操作类实例
2014/12/10 PHP
使用Thinkphp框架开发移动端接口
2015/08/05 PHP
100行PHP代码实现socks5代理服务器
2016/04/28 PHP
php原生数据库分页的代码实例
2019/02/18 PHP
js 实现css风格选择器(压缩后2KB)
2012/01/12 Javascript
纯js实现遮罩层效果原理分析
2014/05/27 Javascript
jQuery页面加载初始化常用的三种方法
2014/06/04 Javascript
探寻Javascript执行效率问题
2014/11/12 Javascript
JavaScript里实用的原生API汇总
2015/05/14 Javascript
js支持键盘控制的左右切换立体式图片轮播效果代码分享
2015/08/26 Javascript
利用jQuery实现漂亮的圆形进度条倒计时插件
2015/09/30 Javascript
快速解决jquery.touchSwipe左右滑动和垂直滚动条冲突
2016/04/15 Javascript
jQuery限制图片大小的方法
2016/05/25 Javascript
js获取新浪天气接口的实现代码
2016/06/06 Javascript
ES6入门教程之let和const命令详解
2017/05/17 Javascript
redux-saga 初识和使用
2018/03/10 Javascript
jQuery实现的电子时钟效果完整示例
2018/04/28 jQuery
原生js实现的观察者和订阅者模式简单示例
2020/04/18 Javascript
Vue实现移动端拖拽交换位置
2020/07/29 Javascript
用Python操作字符串之rindex()方法的使用
2015/05/19 Python
Python自动化部署工具Fabric的简单上手指南
2016/04/19 Python
python生成器与迭代器详解
2019/01/01 Python
windows下numpy下载与安装图文教程
2019/04/02 Python
在tensorflow下利用plt画论文中loss,acc等曲线图实例
2020/06/15 Python
使用tensorflow根据输入更改tensor shape
2020/06/23 Python
Python配置pip国内镜像源的实现
2020/08/20 Python
HTML5新增的8类INPUT输入类型介绍
2015/07/06 HTML / CSS
NIHAOMARKET官方海外旗舰店:意大利你好华人超市
2018/01/27 全球购物
声明struct x1 { . . . }; 和typedef struct { . . . }x2;有什么不同
2012/06/02 面试题
《爱的教育》读书心得
2014/11/08 职场文书
会计试用期工作总结2015
2015/05/28 职场文书
30岁前绝不能错过的10本书
2019/08/08 职场文书
JS中一些高效的魔法运算符总结
2021/05/06 Javascript
CSS实现九宫格布局(自适应)的示例代码
2022/02/12 HTML / CSS
win10电脑双屏显示一个黑屏怎么办?win10电脑双屏显示一个黑屏解决方法
2022/07/15 数码科技