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实现绚丽的横向下拉菜单
Dec 19 Javascript
jquery的ajax和getJson跨域获取json数据的实现方法
Feb 04 Javascript
JS+CSS实现可拖拽的漂亮圆角特效弹出层完整实例
Feb 13 Javascript
Flash图片上传组件 swfupload使用指南
Mar 14 Javascript
javascript中in运算符用法分析
Apr 28 Javascript
基于Cookie常用操作以及属性介绍
Sep 07 Javascript
深入理解ES6中let和闭包
Feb 22 Javascript
Vue微信项目按需授权登录策略实践思路详解
May 07 Javascript
react-navigation之动态修改title的内容
Sep 26 Javascript
AJAX在JQuery中的应用详解
Jan 30 jQuery
JS异步错误捕获的一些事小结
Apr 26 Javascript
一篇文章带你从零快速上手Rollup
Sep 07 Javascript
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
虹吸式咖啡壶操作
2021/03/03 冲泡冲煮
PHP include_path设置技巧分享
2011/07/03 PHP
解析PHP函数array_flip()在重复数组元素删除中的作用
2013/06/27 PHP
PHP 实现 WebSocket 协议原理与应用详解
2020/04/22 PHP
PHP isset()及empty()用法区别详解
2020/08/29 PHP
基于jquery实现的可以编辑选择的下拉框的代码
2010/11/19 Javascript
深入理解javascript动态插入技术
2013/11/12 Javascript
js打造数组转json函数
2015/01/14 Javascript
js判断文本框剩余可输入字数的方法
2015/02/04 Javascript
Javascript毫秒数用法实例
2015/02/05 Javascript
JQuery遍历元素的父辈和祖先的方法
2016/09/18 Javascript
详解vuelidate 对于vueJs2.0的验证解决方案
2017/03/09 Javascript
JavaScript实现音乐自动切换和轮播
2017/11/05 Javascript
vue.js项目打包上线的图文教程
2017/11/16 Javascript
JavaScript&quot;模拟事件&quot;的注意要点详解
2019/02/13 Javascript
jQuery.parseJSON()函数详解
2019/02/28 jQuery
python的迭代器与生成器实例详解
2014/07/16 Python
对python中的高效迭代器函数详解
2018/10/18 Python
python画双y轴图像的示例代码
2019/07/07 Python
pandas DataFrame的修改方法(值、列、索引)
2019/08/02 Python
利用 PyCharm 实现本地代码和远端的实时同步功能
2020/03/23 Python
使用canvas绘制超炫时钟
2014/12/17 HTML / CSS
手机端用rem+scss做适配的详解
2017/11/15 HTML / CSS
青年安全生产示范岗事迹材料
2014/05/04 职场文书
公司委托书怎么写
2014/08/02 职场文书
法人单位授权委托书范文
2014/10/06 职场文书
个人查摆问题自查报告
2014/10/16 职场文书
个人批评与自我批评范文
2014/10/17 职场文书
2014年工程部工作总结
2014/11/25 职场文书
三好学生评语大全
2014/12/29 职场文书
2015年团支部年度工作总结
2015/05/27 职场文书
2019个人工作自我评价范文(3篇)
2019/09/19 职场文书
用Python提取PDF表格的方法
2021/04/11 Python
深入探讨opencv图像矫正算法实战
2021/05/21 Python
python基础学习之生成器与文件系统知识总结
2021/05/25 Python
Redis中缓存穿透/击穿/雪崩问题和解决方法
2021/12/04 Redis