js详细讲解放大镜的实现
实现放大镜的整体思路
1.当鼠标放在图片上的时候,出现蒙层。
2.出现蒙层，让鼠标在蒙层中心
3.限制蒙层移动的范围
4.放大镜移动
最终实现的效果
鼠标放上去的时候,出现一个蒙层。
蒙层的移动范围只能在图片里，不能超出范围。
移动蒙层时，右侧会出现图片的放大部分。
移除图片的范围，放大镜消失。
鼠标放上去时候出现蒙层
<style>
*{
padding: 0;
margin: 0;
}
.box{
margin-left: 400px;
margin-top: 150px;
position: relative;
}
.small-box{
position: absolute;
/* 图片的大小 */
height: 450px;
width: 450px;
}
.mask {
position: absolute;
left: 0;
top: 0;
display: none;
width: 300px;
height: 300px;
z-index: 3;
border: 1px solid #aaa;
background: 50% top no-repeat #fede4f;
opacity: .5;
-moz-opacity: .5;
-khtml-opacity: .5;
filter: alpha(Opacity=50);
cursor: move;
}
.big-box{
position: relative;
display: none;
/* 右侧放大镜盒子的大小 */
width: 500px;
height: 500px;
/* 盒子肯定比图片小，然后使用超出裁剪 */
overflow: hidden;
/* 定位右侧盒子的位置 */
top: 0px;
/* 留了一个单位的像素处来，好区别 */
left:451px;
}
#bigImg{
position: absolute;
}
.small-box:hover .mask{
display: block;
}
.small-box:hover + .big-box{
display: block;
}
</style>
<body>
<div id="box" class="box">
<!-- 页面上看见的小图 -->
<div id="smallBox" class="small-box">
<img src="https://img11.360buyimg.com/n1/s450x450_jfs/t1/125337/25/33944/39827/643cecaaFe632cc8e/b33f7ab378a5c0d3.jpg">
<div class="mask" id="mask"></div>
</div>
</div>
<!-- 放大的图 -->
<div class="big-box" id="bigBox">
<img id="bigImg" src="https://img14.360buyimg.com/n0/jfs/t1/125337/25/33944/39827/643cecaaFe632cc8e/b33f7ab378a5c0d3.jpg.avif" class="">
</div>
</div>
</body>
计算蒙层坐标的中心位置
1.我们首先要计算一个坐标点的位置。
获取蒙层坐标点的位置
let mask_x= e.pageX - box.offsetLeft
let mask_y= e.pageY - box.offsetTop
现在我们得到了坐标点的位置。
如何计算蒙层坐标的中心位置呢？
mask_x= mask_x-mask.offsetWidth/2
mask_y= mask_y-mask.offsetHeight/2
也就是将 mask_x 向左移动了mask元素宽度的一半。
特别说明：
offsetLeft 是指当前元素相对其距离自己最近的具有定位属性的父级元素的偏移值。
margin,定位,border也会影响offsetLeft的值。但是padding不会影响。
<body>
<div id="box" class="box">
<!-- 页面上看见的小图 -->
<div id="smallBox" class="small-box">
<img src="https://img11.360buyimg.com/n1/s450x450_jfs/t1/125337/25/33944/39827/643cecaaFe632cc8e/b33f7ab378a5c0d3.jpg">
<div class="mask" id="mask"></div>
</div>
<!-- 放大的图 -->
<div class="big-box" id="bigBox">
<img src="https://img14.360buyimg.com/n0/jfs/t1/125337/25/33944/39827/643cecaaFe632cc8e/b33f7ab378a5c0d3.jpg.avif" class="">
</div>
</div>
</body>
<script>
let smallBox=document.getElementById('smallBox')
let box=document.getElementById('box')
let mask=document.getElementById('mask')
smallBox.onmousemove =function(e){
// 获取蒙层坐标点的位置
let mask_x= e.pageX - box.offsetLeft
let mask_y= e.pageY - box.offsetTop
// 计算蒙层坐标点的中心位置
mask_x-= mask.offsetWidth/2
mask_y-= mask.offsetHeight/2
mask.style.left = mask_x+'px'
mask.style.top = mask_y+'px'
}
</script>
限制移动的范围
在移动蒙层的的时候，是有范围限制的。
X轴最大的范围是： smallBox.offsetWidth-mask.offsetWidth，最小范围是0；
Y轴的最大范围是： smallBox.offsetHeight-mask.offsetHeight，最小范围是0；
<script>
let smallBox=document.getElementById('smallBox')
let box=document.getElementById('box')
let mask=document.getElementById('mask')
smallBox.onmousemove =function(e){
// 获取蒙层坐标点的位置
let mask_x= e.pageX - box.offsetLeft
let mask_y= e.pageY - box.offsetTop
// 计算蒙层坐标点的中心位置
mask_x-= mask.offsetWidth/2
// mask_x-= mask.offsetWidth - mask_x /2
mask_y-= mask.offsetHeight/2
// 获取X可以移动的最大值
let moveMaxX= smallBox.offsetWidth-mask.offsetWidth
// 获取y可以移动的最大值
let moveMaxY= smallBox.offsetHeight-mask.offsetHeight
// X轴最小值和最大值
if(mask_x<0){
mask_x=0
}
if(mask_x>moveMaxX){
mask_x=moveMaxX
}
// Y轴最小值和最大值
if(mask_y<0){
mask_y=0
}
if(mask_y>moveMaxY){
mask_y=moveMaxY
}
mask.style.left = mask_x+'px'
mask.style.top = mask_y+'px'
}
</script>
大图的移动
当我们的蒙层向右移动的时候，
我们的大图实际上是向左移动的。
移动的公式：
bigImg.style.left= -mask_x *(bigBox.offsetWidth/mask.offsetWidth) + 'px'
bigImg.style.top= -mask_y *(bigBox.offsetHeight/mask.offsetHeight) + 'px'
<script>
let smallBox=document.getElementById('smallBox')
let box=document.getElementById('box')
let mask=document.getElementById('mask')
let bigBox = document.getElementById('bigBox')
smallBox.onmousemove =function(e){
// 获取蒙层坐标点的位置
let mask_x= e.pageX - box.offsetLeft
let mask_y= e.pageY - box.offsetTop
// 计算蒙层坐标点的中心位置
mask_x-= mask.offsetWidth/2
mask_y-= mask.offsetHeight/2
// 获取X可以移动的最大值
let moveMaxX= smallBox.offsetWidth-mask.offsetWidth
// 获取y可以移动的最大值
let moveMaxY= smallBox.offsetHeight-mask.offsetHeight
// X轴最小值和最大值
if(mask_x<0){
mask_x=0
}
if(mask_x>moveMaxX){
mask_x=moveMaxX
}
// Y轴最小值和最大值
if(mask_y<0){
mask_y=0
}
if(mask_y>moveMaxY){
mask_y=moveMaxY
}
mask.style.left = mask_x+'px'
mask.style.top = mask_y+'px'
// 右侧的放大图
bigImg.style.left= -mask_x *(bigBox.offsetWidth/mask.offsetWidth) + 'px'
bigImg.style.top= -mask_y *(bigBox.offsetHeight/mask.offsetHeight) + 'px'
}
</script>
js详细讲解放大镜的实现的更多相关文章
- jquery.form.js详细讲解
现在大家在在表单提交的时候都不流行中间页面做跳转(比如发布成功的提示页面),或者说这样做会降低用户体验.所以一般都是采用ajax来提交,能看到这个页面的朋友,想必对ajax提交表单已经是很熟悉了. 如 ...
- head标签详细讲解
head标签详细讲解 head位于html网页的头部,后前的标签,并以开始以结束的一html标签. Head标签位置如图: head标签示意图 head包含标签 meta,title,link,bas ...
- 详细讲解nodejs中使用socket的私聊的方式
详细讲解nodejs中使用socket的私聊的方式 在上一次我使用nodejs+express+socketio+mysql搭建聊天室,这基本上就是从socket.io的官网上的一份教程式复制学习,然 ...
- jquery插件分类与编写详细讲解
jquery插件分类与编写详细讲解 1. 插件种类 插件其实就是对现有的方法(或者叫函数)做一个封装,方便重用提高开发效率. jQeury主要有2种类型 1)实例对象方法插件 开发能让所有的j ...
- node+vue进阶【课程学习系统项目实战详细讲解】打通前后端全栈开发(1)：创建项目，完成登录功能
第一章 建议学习时间8小时·分两次学习 总项目预计10章 学习方式:详细阅读,并手动实现相关代码(如果没有node和vue基础,请学习前面的vue和node基础博客[共10章]) 视频教程地 ...
- JS详细图解作用域链与闭包
JS详细图解作用域链与闭包 攻克闭包难题 初学JavaScript的时候,我在学习闭包上,走了很多弯路.而这次重新回过头来对基础知识进行梳理,要讲清楚闭包,也是一个非常大的挑战. 闭包有多重要?如果你 ...
- vue-cli 目录结构详细讲解
https://juejin.im/post/5c3599386fb9a049db7351a8 vue-cli 目录结构详细讲解 目录 结构预览 ├─build // 保存一些webpack的初始化配 ...
- Promise入门到精通(初级篇)-附代码详细讲解
Promise入门到精通(初级篇)-附代码详细讲解 Promise,中文翻译为承诺,约定,契约,从字面意思来看,这应该是类似某种协议,规定了什么事件发生的条件和触发方法. Pr ...
- 30 道 Vue 面试题，内含详细讲解（涵盖入门到精通，自测 Vue 掌握程度）
前言 本文以前端面试官的角度出发,对 Vue 框架中一些重要的特性.框架的原理以问题的形式进行整理汇总,意在帮助作者及读者自测下 Vue 掌握的程度.本文章节结构以从易到难进行组织,建议读者按章节顺序 ...
- doT.js详细介绍
doT.js详细介绍 doT.js特点是快,小,无依赖其他插件. 官网:http://olado.github.iodoT.js详细使用介绍 使用方法:{{= }} for interpolati ...
随机推荐
- 代码随想录算法训练营Day50 动态规划
代码随想录算法训练营 代码随想录算法训练营Day50 动态规划| 123.买卖股票的最佳时机III 188.买卖股票的最佳时机IV 123.买卖股票的最佳时机III 题目链接:123.买卖股票的最佳时 ...
- K2C V21.4.6.12刷breed教程
K2C V21.4.6.12刷breed教程(刷机方法源自qiao99) 原贴地址:K2C V21.4.6.12刷breed记录 http://www.right.com.cn/forum/threa ...
- 06、HSMS协议介绍
本章的内容主要参考了 SECS半导体设备通讯-2 HSMS通信标准 ,外加上自己看的一些其他的文档.也加上了一些自己的理解,特此记录.若有侵权,请联系删除,谢谢. 再次特别感谢 SECS半导体设备通讯 ...
- 技术招聘漫谈 | 正在招Golang工程师的你，赶快收藏这份识人秘籍！
各位技术面试官,欢迎来到新一期的技术招聘漫谈专栏. 在前两期的专栏中,我们解析了前端工程师以及 Java 工程师 这两个常见技术岗位的招聘技巧. 今天,我们想把目光聚焦在一个前景与"钱&qu ...
- 从0搭建Vue3组件库(十三):引入Husky规范git提交
为什么要引入 husky? 虽然我们项目中引入了prettier和eslint对代码格式进行了校验,但是多人开发的时候难免依然会有人提交不符合规范的代码到仓库中,如果我们拉取到这种代码还得慢慢对其进行 ...
- Vue——计算属性、监听属性、Vue生命周期、组件介绍和使用、组件间通信、ref属性
计算属性 // 1 计算属性是基于他们的依赖变量进行缓存的 // 2 计算属性只有在它的相关依赖变量发生改变时才会重新求值,否则不会变(函数只要页面变化,就会重新运算) // 3 计算属性就像pyth ...
- Microsoft Office 2019 官方镜像下载 仅支持Win10系统
Office 2019 专业增强版:(注:这是一个镜像文件) http://officecdn.microsoft.com/pr/492350f6-3a01-4f97-b9c0-c7c6ddf67d6 ...
- 解决google翻译出错问题
解决google翻译问题 一.为什么失效 因为google把google翻译的API给关闭了,导致翻译不了. 据网上说是服务器耗钱,但盈利不够导致的. 二.可修复的前提 国内还存有服务器可以用API ...
- CSR格式如何更新？ GES图计算引擎HyG揭秘之数据更新
摘要:HyG图计算引擎采用CSR格式来存储图的拓扑信息,CSR格式可以将稀疏矩阵的存储空间压缩,进而大大降低图的存储开销,同时具备访问效率高.格式易转化等优点. 本文分享自华为云社区<CSR格式 ...
- 统信UOS系统开发笔记（七）：在统信UOS系统上使用linuxdeployqt发布qt程序
前言 在ubuntu上发布qt程序相对还好,使用脚本,但是在统信UOS麒麟上发布的时候,因为银河麒麟等不同版本,使用脚本就不太兼容,同时为了实现直接点击应用可以启动应用的效果,使用linuxdep ...