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 相关文章推荐
单击复制文字兼容各浏览器的完美解决方案
Jul 04 Javascript
基于javascript 闭包基础分享
Jul 10 Javascript
jquery实现盒子下拉效果示例代码
Sep 12 Javascript
用Javascript获取页面元素的具体位置
Dec 09 Javascript
浅析创建javascript对象的方法
May 13 Javascript
jquery遍历标签中自定义的属性方法
Sep 17 Javascript
js中scrollTop()方法和scroll()方法用法示例
Oct 03 Javascript
jQuery插件zTree实现删除树节点的方法示例
Mar 08 Javascript
使用vue框架 Ajax获取数据列表并用BootStrap显示出来
Apr 24 Javascript
使用原生js封装的ajax实例(兼容jsonp)
Oct 12 Javascript
JavaScript实现美化滑块效果
May 17 Javascript
vue项目打包后提交到git上为什么没有dist这个文件的解决方法
Sep 16 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
php上传图片之时间戳命名(保存路径)
2014/08/15 PHP
PHP关联数组实现根据元素值删除元素的方法
2015/06/26 PHP
Yii中实现处理前后台登录的新方法
2015/12/28 PHP
浅谈php(codeigniter)安全性注意事项
2017/04/06 PHP
PHP操作Redis常用技巧总结
2018/04/24 PHP
PHP时间日期增减操作示例【date strtotime实现加一天、加一月等操作】
2018/12/21 PHP
Javascript 事件流和事件绑定
2009/07/16 Javascript
jquery获得keycode的示例代码
2013/12/30 Javascript
Ext修改GridPanel数据和字体颜色、css属性等
2014/06/13 Javascript
JavaScript动态改变div属性的实现方法
2015/07/22 Javascript
jQuery绑定事件on()与弹窗的简要概述
2016/04/27 Javascript
Bootstrap教程JS插件滚动监听学习笔记分享
2016/05/18 Javascript
jquery简单插件制作(fn.extend)完整实例
2016/05/24 Javascript
jquery 判断selection range 是否在容器中的简单实例
2016/08/02 Javascript
js轮盘抽奖实例分析
2020/04/17 Javascript
bootstrap modal弹出框的垂直居中
2016/12/14 Javascript
jquery——九宫格大转盘抽奖实例
2017/01/16 Javascript
基于vue实现网站前台的权限管理(前后端分离实践)
2018/01/13 Javascript
Webpack中publicPath路径问题详解
2018/05/03 Javascript
Angular-UI Bootstrap组件实现警报功能
2018/07/16 Javascript
JS如何实现在弹出窗口中加载页面
2020/12/03 Javascript
[44:33]EG vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python实现颜色rgb和hex相互转换的函数
2015/03/19 Python
Python实现Smtplib发送带有各种附件的邮件实例
2017/06/05 Python
Python中扩展包的安装方法详解
2017/06/14 Python
Python Xml文件添加字节属性的方法
2018/03/31 Python
基于keras输出中间层结果的2种实现方式
2020/01/24 Python
在python3中实现查找数组中最接近与某值的元素操作
2020/02/29 Python
李维斯德国官方网上商店:Levi’s德国
2016/09/10 全球购物
英国时尚家具、家居饰品及礼品商店:Graham & Green
2016/09/15 全球购物
来自Ocado的宠物商店:Fetch
2018/07/10 全球购物
Java里面如何创建一个内部类的实例
2015/01/19 面试题
监察建议书格式
2014/05/19 职场文书
2014乡镇党委副书记对照检查材料思想汇报
2014/10/09 职场文书
暂住证证明
2015/06/19 职场文书
学雷锋活动简报
2015/07/20 职场文书