基于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 相关文章推荐
createElement动态创建HTML对象脚本代码
Nov 24 Javascript
js 刷新页面的代码小结 推荐
Apr 02 Javascript
JS中实现replaceAll的方法(实例代码)
Nov 12 Javascript
完美实现仿QQ空间评论回复特效
May 06 Javascript
jQuery地图map悬停显示省市代码分享
Aug 20 Javascript
JS中JSON对象和String之间的互转及处理技巧
Apr 06 Javascript
解决ng-repeat产生的ng-model中取不到值的问题
Oct 02 Javascript
Vue.js中对css的操作(修改)具体方式详解
Oct 30 Javascript
详解Vue路由自动注入实践
Apr 17 Javascript
分享Angular http interceptors 拦截器使用(推荐)
Nov 10 Javascript
swiper实现异形轮播效果
Nov 28 Javascript
vue 实现图片懒加载功能
Dec 31 Vue.js
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 stristr() 函数(不区分大小写的字符串查找)
2010/06/03 PHP
JoshChen_web格式编码UTF8-无BOM的小细节分析
2013/08/16 PHP
基于yaf框架和uploadify插件,做的一个导入excel文件,查看并保存数据的功能
2017/01/24 PHP
ThinkPHP实现生成和校验验证码功能
2017/04/28 PHP
按给定几率进行随机抽取的js代码
2010/12/28 Javascript
Js实现滚动变色的文字效果
2014/06/16 Javascript
JavaScript阻止事件冒泡示例分享
2014/12/28 Javascript
jQuery实现美观的多级动画效果菜单代码
2015/09/06 Javascript
通过jquery-ui中的sortable来实现拖拽排序的简单实例
2016/05/24 Javascript
vue.js+boostrap项目实践(案例详解)
2016/09/21 Javascript
微信小程序 火车票查询实例讲解
2016/10/17 Javascript
js定时器实例分享
2016/12/20 Javascript
Angular.js与node.js项目里用cookie校验账户登录详解
2017/02/22 Javascript
axios学习教程全攻略
2017/03/26 Javascript
使用jQuery实现鼠标点击左右按钮滑动切换
2017/08/04 jQuery
javascript实现蒙版与禁止页面滚动
2020/01/11 Javascript
js校验开始时间和结束时间
2020/05/26 Javascript
vue-amap根据地址回显地图并mark的操作
2020/11/03 Javascript
基于vue项目设置resolves.alias: '@'路径并适配webstorm
2020/12/02 Vue.js
[02:13] 完美世界DOTA2联赛PWL DAY5集锦
2020/11/03 DOTA
Python学习_几种存取xls/xlsx文件的方法总结
2018/05/03 Python
Python常用字符串替换函数strip、replace及sub用法示例
2018/05/21 Python
Python 实现Windows开机运行某软件的方法
2018/10/14 Python
python 发送json数据操作实例分析
2019/10/15 Python
Python3 shelve对象持久存储原理详解
2020/03/23 Python
Django实现将一个字典传到前端显示出来
2020/04/03 Python
澳大利亚家居用品零售商:Harris Scarfe
2020/10/10 全球购物
挑战杯创业计划书的写作指南
2014/01/07 职场文书
培训主管岗位职责
2014/02/01 职场文书
五型班组建设方案
2014/02/10 职场文书
手机被没收检讨书
2014/02/22 职场文书
运动会广播稿200字
2014/10/18 职场文书
酒店采购员岗位职责
2015/04/03 职场文书
2015重阳节敬老活动总结
2015/07/29 职场文书
60句有关成长的名言
2019/09/04 职场文书
Ajax实现局部刷新的方法实例
2021/03/31 Javascript