博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
原生js实现放大镜
阅读量:6431 次
发布时间:2019-06-23

本文共 1175 字,大约阅读时间需要 3 分钟。

效果:

1、  鼠标放上去会有半透明遮罩、右边会有大图片局部图

2、  鼠标移动时右边的大图片也会局部移动

放大镜的关键原理:

鼠标在小图片上移动时,通过捕捉鼠标在小图片上的位置,定位大图片的相应位置;

放大镜的移动方向和大图片的移动方向:横向和纵向都是相反,才可以保证同步;

 

页面元素:

技术点:事件捕获,定位

难点:计算

 

需要元素:小图片和大图片,存放小图片和大图片的容器,有一个放大镜;

涉及到的技术点:

(1)       鼠标事件的捕获:onmouseover(进入)、onmouseout(移除)、onmousemove(移动)

(2)       offsetLeft、offsetTop、offsetWidth、offsetHeight、event.clientX、event.clientY

  • offsetLeft子元素相对于父元素的左位移
  • offsetWidth,offsetHeight一个元素的宽度和高度,宽度和高度是不包括滚动条的。

event.clientX、event.clientY鼠标的X轴和Y轴,相对于整个页面的坐标,而不是子元素

 

  • offsetLeft和style.left对比:

(1)、style.left返回的是字符串,如30px、offsetLeft返回的是数值30;

(2)、style.left是可读写的,offsetLeft是只读的,所以要改变div的位置,只能修改style.left;

(3)、style.left的值需要事先定义,否则取到的值为空。

style.left只针对在HTML中写的值有效,样式表中无法定义style.left;

制作放大镜所需要的计算

》重点:如何让小图片上的放大镜和大图片同步移动

关键:小图片的比例和大图片的比例是一样的,放大镜比例和右侧大的容器比例是一样的;他们之间的比例是相同的

移动时的比例计算:

放大镜核心计算公式:

    
放大镜

 个人感觉MarkBox是多余的操作,于是我将上述代码中与markBox相关的操作去掉,如下:

    
放大镜
View Code

 运行效果相同

转载于:https://www.cnblogs.com/embrace-ly/p/10558734.html

你可能感兴趣的文章
简单程序实现100以内加减乘除
查看>>
IOS之Block讲解
查看>>
纯数学教程 Page 203 例XLI (2)
查看>>
三角插值的 Fourier 系数推导
查看>>
05 面向对象之:类的成员
查看>>
PL/SQL程序设计 第五章 异常错误处理
查看>>
Practise Site Home Sample Page Codes de carte cadeau Amazon | Codes Promo Amazon
查看>>
hasattr getattr setattr
查看>>
string类的用法总结
查看>>
mysql 查询优化~ 分页优化讲解
查看>>
机器学习入门
查看>>
[java] 数据处理
查看>>
SEGGER RTT STOP/SLEEP 模式下使用
查看>>
Crusher Django 学习笔记2 基本url配置
查看>>
jQuery ui widget和jQuery plugin的实现原理简单比较
查看>>
DataTables如何重新加载数据
查看>>
ORA-12547:TNS:lost contact 问题分析思路
查看>>
从零开始学习Sencha Touch MVC应用之十一
查看>>
NYOJ148fibonacci数列(二)
查看>>
spring4 定时任务
查看>>