javascript实现放大镜功能


Posted in Javascript onDecember 09, 2020

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

描述:当鼠标在小图片上移动时,通过捕捉鼠标在小图片上的位置, 使放大镜的移动方向与大图的水平和垂直方向相反

javascript实现放大镜功能

如何设计

  • 页面元素
  • 技术要点:事件捕捉和定位
  • 难点:计算

涉及技术

  • onmouseover:当鼠标指针移动到指定的对象上时发生
  • onmouseout:鼠标指针移出指定对象时发生
  • onmousemove:鼠标指针移动时发生
  • offsetLeft | offsetTop | offsetWidth | offsetHeight
  • event.clientX | event.clientY

偏移量与style.left

  • style.left返回字符串,例如30px,而offsetLeft返回数字30。
  • style.left可以读和写,offsetLeft是只读的。如果我们想改变div的位置,我们可以修改style.left.
  • style.left应事先定义,否则值为空。

需要考虑

  • 如何使小画面上的放大镜与大图同步移动
  • IE兼容性问题

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Magnifier Effect</title>
 <style>
 *{
  margin: 0;
  padding: 0;
 }
 #wrap{
  width: 400px;
  height: 255px;
  margin: 50px;
  border: 1px solid #ccc;
  display: block;
  position: relative;
 }
 #small-box{
  position: relative;
  z-index: 1;
 }
 #float-box{
  width: 160px;
  height: 120px;
  position: absolute;
  background-color: #ffffcc;
  border:1px solid #ccc;
  filter: alpha(opacity = 50);
  opacity: .5;
  display: none;
 }
 #mask{
  position: absolute;
  display: block;
  width: 400px;
  height: 255px;
  z-index: 10;
  background-color: #ffffff;
  filter: alpha(opacity = 0);
  opacity: 0;
  cursor: move;
 }
 #big-box{
  position: absolute;
  top: 0;
  left: 460px;
  width: 400px;
  height: 300px;
  overflow: hidden;
  border: 1px solid #ccc;
  z-index: 1;
  display: none;
 }
 #big-box img{
  position: absolute;
  z-index: 5; 
 }
 </style>
</head>
<script>
 // 页面加载完毕之后执行
 window.onload = function(){
 // 获取父元素wrap, 小盒子,遮罩层, 放大镜, 大盒子, 大图片
 var wrap = document.getElementById('wrap');
 var smallBox = document.getElementById('small-box');
 var mask = document.getElementById('mask');
 var floatBox = document.getElementById('float-box');
 var bigBox = document.getElementById('big-box');
 var bigImg = bigBox.getElementsByTagName('img')[0];
 console.log(wrap, smallBox, mask, floatBox, bigBox, bigImg); 

 // 鼠标移动到小盒子上时, 放大镜显示, 大盒子显示
 mask.onmouseover = function(){
  floatBox.style.display = 'block';
  bigBox.style.display = 'block';
 }

 // 鼠标移出小盒子时, 放大镜隐藏, 大盒子隐藏
 mask.onmouseout = function(){
  floatBox.style.display = 'none';
  bigBox.style.display = 'none';
 }

 // 添加鼠标移动事件
 mask.onmousemove = function(ev){
  // 获取当前鼠标移动的位置并考虑IE兼容性
  var _event = ev || window.event;

  // 获取放大镜向左移动的距离
  var left = _event.clientX - wrap.offsetLeft - smallBox.offsetLeft - floatBox.offsetWidth / 2;
  var top = _event.clientY - wrap.offsetTop - smallBox.offsetTop - floatBox.offsetHeight / 2;

  // console.log(left, top);

  // 考虑边界情况
  if(left < 0){
  left = 0;
  }else if(left > (mask.offsetWidth - floatBox.offsetWidth)){
  left = mask.offsetWidth - floatBox.offsetWidth;
  }

  if(top < 0){
  top = 0;
  }else if(top > (mask.offsetHeight - floatBox.offsetHeight)){
  top = mask.offsetHeight - floatBox.offsetHeight;
  }

  floatBox.style.left = left + 'px';
  floatBox.style.top = top + 'px';

  // calculate percentage
  var percentX = left / (mask.offsetWidth - floatBox.offsetWidth);
  var percentY = top / (mask.offsetHeight - floatBox.offsetHeight);

  // calculate displacement of big image, big image has opposite direction of magnifying glass
  bigImg.style.left = -percentX * (bigImg.offsetWidth - bigBox.offsetWidth) + 'px';
  bigImg.style.top = -percentY * (bigImg.offsetHeight - bigBox.offsetHeight) + 'px';

 }
 }
</script>
<body>
 <div id="wrap">
 <div id="small-box">
  <div id="mask"></div>
  <div id="float-box"></div>
  <img src="./img/macbook-small.jpg" alt="smallMac">
 </div>
 <div id="big-box">
  <img src="./img/macbook-big.jpg" alt="bigMac">
 </div>
 </div>
</body>
</html>

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

Javascript 相关文章推荐
Jquery+asp.net后台数据传到前台js进行解析的方法
May 11 Javascript
由简入繁实现Jquery树状结构的方法(推荐)
Jun 10 Javascript
JS使用正则表达式实现关键字替换加粗功能示例
Aug 03 Javascript
jQuery中Nicescroll滚动条插件的用法
Nov 10 Javascript
jQuery基于ajax操作json数据简单示例
Jan 05 Javascript
微信小程序 引用其他js文件实现代码
Feb 22 Javascript
bootstrap时间插件daterangepicker使用详解
Oct 19 Javascript
Vue的土著指令和自定义指令实例详解
Feb 04 Javascript
layui lay-verify form表单自定义验证规则详解
Sep 18 Javascript
JavaScript缺少insertAfter解决方案
Jul 03 Javascript
Vue3 Composition API的使用简介
Mar 29 Vue.js
vue中的可拖拽宽度div的实现示例
Apr 08 Vue.js
Javascript实现单选框效果
Dec 09 #Javascript
javascript实现移动端轮播图
Dec 09 #Javascript
JavaScript实现弹出窗口效果
Dec 09 #Javascript
五句话帮你轻松搞定js原型链
Dec 09 #Javascript
JS常用跨域方法实现原理解析
Dec 09 #Javascript
video.js添加自定义组件的方法
Dec 09 #Javascript
手把手教你如何编译打包video.js
Dec 09 #Javascript
You might like
PHP+.htaccess实现全站静态HTML文件GZIP压缩传输(一)
2007/02/15 PHP
PHP调用Linux的命令行执行文件压缩命令
2013/01/27 PHP
PHP中使用Imagick读取pdf并生成png缩略图实例
2015/01/21 PHP
PHP实现通用alert函数的方法
2015/03/11 PHP
用JS控制回车事件的代码
2011/02/20 Javascript
Jquery写一个鼠标拖动效果实现原理与代码
2012/12/24 Javascript
深入解析contentWindow, contentDocument
2013/07/04 Javascript
使用JavaScript刷新网页的方法
2015/06/04 Javascript
javascript日期计算实例分析
2015/06/29 Javascript
老司机带你解读jQuery插件开发流程
2016/05/16 Javascript
基于Bootstrap的后台管理面板 Bootstrap Metro Dashboard
2016/06/17 Javascript
nodejs简单实现操作arduino
2016/09/25 NodeJs
node.JS md5加密中文与php结果不一致的解决方法
2017/05/05 Javascript
用js屏蔽被http劫持的浮动广告实现方法
2017/08/10 Javascript
深入理解node.js http模块
2018/01/24 Javascript
jquery分页插件pagination使用教程
2018/10/23 jQuery
JavaScript设计模式之享元模式实例详解
2019/01/17 Javascript
详解关于表格合并span-method方法的补充(表格数据由后台动态返回)
2019/05/21 Javascript
跟老齐学Python之集合(set)
2014/09/24 Python
在Django中进行用户注册和邮箱验证的方法
2016/05/09 Python
python非递归全排列实现方法
2017/04/10 Python
python编程使用selenium模拟登陆淘宝实例代码
2018/01/25 Python
python提取图像的名字*.jpg到txt文本的方法
2018/05/10 Python
在PYQT5中QscrollArea(滚动条)的使用方法
2019/06/14 Python
pygame实现贪吃蛇游戏(上)
2019/10/29 Python
python实现字典嵌套列表取值
2019/12/16 Python
利用scikitlearn画ROC曲线实例
2020/07/02 Python
Python OpenCV中的numpy与图像类型转换操作
2020/12/11 Python
仿CSDN Blog返回页面顶部功能实现原理及代码
2013/06/30 HTML / CSS
HTML5 HTMLCollection和NodeList的区别详解
2020/04/29 HTML / CSS
美团网旗下网上订餐平台:美团外卖
2020/03/05 全球购物
Why do we need Unit test
2013/01/03 面试题
创业计划书的内容步骤和要领
2014/01/04 职场文书
《乌鸦和狐狸》教学反思
2014/02/08 职场文书
手机银行营销方案
2014/03/14 职场文书
餐饮服务员岗位职责
2015/02/09 职场文书