JS图片放大镜功能实现
JS图片放大镜功能实现
技术关键点
1.左侧和上侧距离,在一个水平位置和垂直位置中有我们可以挪动的区域,就是原图片区域,鼠标挪动位置是一个块状位置,他的左侧和上侧距离浏览器上侧和左侧分别有一个长度,我们叫它们 ClientX 和 ClientY,而左上侧鼠标没有略过的位置实际上是一个点,我们拖动放大块时,它会由一个点变成一个方块,这个放大镜左上边的点所控制的这一点距离屏幕上侧和左侧的 ClientY 和 ClientX 会随着鼠标的移动而变大变小,那么要计算放大块左侧距离原点和上侧原点就要减去原图距离屏幕的上边高度和左边高度。在一个水平位置和垂直位置中有我们可以挪动的区域,就是原图片区域,鼠标挪动位置是一个块状位置,他的左侧和上侧距离浏览器上侧和左侧分别有一个长度,我们叫它们 ClientX 和 ClientY,而左上侧鼠标没有略过的位置实际上是一个点,我们拖动放大块时,它会由一个点变成一个方块,这个放大镜左上边的点所控制的这一点距离屏幕上侧和左侧的 ClientY 和 ClientX 会随着鼠标的移动而变大变小,那么要计算放大块左侧距离原点和上侧原点就要减去原图距离屏幕的上边高度和左边高度。
x = 事件对象.clientX - 外侧盒子.offsetLeft;
Y = 事件对象.clientY - 外侧盒子.offsetTop;
HTML代码:
<div id="main">
<img src="data:images/bg.webp" width="100%">
<div id="mirror">
<img src="data:images/bg.webp">
</div>
</div>
JS代码:
<script>
//获取元素
let oMain = document.querySelector('#main')
let oMirror = document.querySelector('#mirror')
let oBigimg = document.querySelector('#mirror img')
//设置鼠标移动监听事件
oMain.addEventListener('mousemove', e => {
//获取鼠标在主图盒子内的XY坐标,减去偏移值
let x_left = e.clientX - oMain.offsetLeft;
let y_top = e.clientY - oMain.offsetTop;
//将获取到的鼠标XY坐标,赋值给 oMirror遮罩层盒子的定位坐标
//注意一定后面+'px',不然没效果
oMirror.style.left = x_left - oMirror.offsetWidth / 2 + 'px';
oMirror.style.top = y_top - oMirror.offsetHeight / 2 + 'px';
//大图的X轴移动距离
let bigImgleft = oBigimg.offsetWidth / oMain.offsetWidth * x_left - oMirror.offsetWidth / 2;
//大图的Y轴移动距离
let bigImgTop = oBigimg.offsetHeight / oMain.offsetHeight * y_top - oMirror.offsetHeight / 2;
//坐标赋值,让大图跟着遮罩层一起移动
oBigimg.style.left = -bigImgleft + 'px';
oBigimg.style.top = -bigImgTop + 'px';
})
</script>
CSS代码:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
width: 100wh;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(200, 190, 221, .5);
}
img {
display: block;
}
#main {
width: 800px;
box-shadow: 0 0 20px rgba(0, 0, 0, .4);
position: relative;
overflow: hidden;
}
#mirror {
width: 150px;
height: 150px;
border-radius: 50%;
border: 5px solid #fff;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
}
#mirror img {
position: absolute;
}
效果图:
JS图片放大镜功能实现的更多相关文章
- js 图片放大镜功能
原理:放置两张相同的图片,一张作为主图片(图片1),另一张作为用来裁剪并放大的图片(图片2) 鼠标移动时,计算鼠标在图片1的位置(距离图片1左上角的x,y距离),以此决定在图片2开始 ...
- vue项目js实现图片放大镜功能
效果图: 我写的是vue的组件形式,方便复用,图片的宽高,缩放的比例可以自己定义 magnifier.vue <template> <div class="magnif ...
- javascript 实现图片放大镜功能
淘宝上经常用到的一个功能是利用图片的放大镜功能来查看商品的细节 下面我们来实现这样一个功能吧,原理很简单: 实现一个可以随鼠标移动的虚框 在另外一个块中对应显示虚框中的内容 实现思路: 虚框用css中 ...
- vue中图片放大镜功能
仿淘宝详情页图片鼠标移过去可对图片放大显示在右侧 效果图如下图,此功能支持PC端与移动端 接下来进入代码实现环节: 先准备两张图片,一张小图片叫 '土味.jpg',大小160*91:一张大图片叫 ' ...
- jquery.jqzoom.js图片放大镜
jqzoom插件实现图片放大镜效果 1. jquery.jqzoom.js //************************************************************ ...
- JS 图片放大镜
今天练习一个小demo, 从本地读取图片, 然后实现类似淘宝放大镜的效果, 再加两个需求 1 .可以调节缩放比例,默认放大两倍 2 . 图片宽高自适应, 不固定宽高 话不多说先看效果: 原理:1, 右 ...
- js图片放大镜特效代码
<script language="JavaScript"> <!-- var srcX = 1024; //原图长宽 var srcY = 768; var b ...
- js图片放大镜 可动态更换图片
现仅已.NET为例,HTML代码如下 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > & ...
- js图片放大镜
<!doctype html><html><head><meta charset="utf-8"><style>#sma ...
- [js开源组件开发]图片放大镜
图片放大镜 一般情况下,手机由于屏幕太小,会有图片上看不清的问题,所以我就做了一个放大镜的js效果,支持pc和移动端.它的原理是利用的backgroundsize来实现的,所以你的浏览器首先要支持这个 ...
随机推荐
- Node.js躬行记(22)——Node环境升级日志
公司之前所有的 Node 项目,其环境都是 8.9.4 版本,发布于 2018 年的一个比较古老的版本. 老版本有两个比较明显的问题: Node 高版本的特性和方法都无法使用. 有些第三方新版本的包无 ...
- KingbaseES R3 受限dba影响集群切换
一.受限dba功能说明(参考自官方文档) 受限DBA 受限DBA可以对当前DBA的权限进行一定限制.当功能开启后DBA将不能更改以下对象: Table Database Function(by n ...
- KingbaseES 导入导出blob列数据
KingbaseES兼容了oracle的blob数据类型.通常是用来保存二进制形式的大数据,也可以用来保存其他类型的数据. 下面来验证一下各种数据存储在数据库中形式. 建表 create table ...
- Java 9.回文数
给你一个整数 x ,如果 x 是一个回文整数,返回 true :否则,返回 false .回文数是指正序(从左向右)和倒序(从右向左)读都是一样的整数. 例如,121 是回文,而 123 不是. ...
- 深度剖析js闭包
一.什么是闭包? 方法里面返回一个方法 二.闭包存在的意义 延长变量的生命周期 作用域链 沟通内外部方法的桥梁 闭包会常驻内存 ==>慎用闭包 闭包里的变量不会被回收 创建私有环建 例 ...
- 聊聊asp.net core 授权流程
在上一篇 聊聊 asp.net core 认证和授权 中我们提到了认证和授权的基本概念,以及认证和授权的关系及他们之间的协同工作流程,在这篇文章中,我将通过分析asp.net core 3.1 授权流 ...
- 通过管理接口配置ProxySQL
可以使用mysql客户端来连接管理接口,以下是使用admin凭据连接到本地6032端口的管理接口: $ mysql -u admin -padmin -h 127.0.0.1 -P6032 --pro ...
- 2022IDEA破解
注意 本教程适用于 IntelliJ IDEA 2022.1.2 以下所有版本,请放心食用~ 本教程适用于 JetBrains 全系列产品,包括 IDEA.Pycharm.WebStorm.Phpst ...
- 某云负载均衡获取客户端真实IP的问题
某云负载均衡真实IP的问题,我们这边已经遇到过两次了.而且每次和售后沟通的时候都大费周折,主要是要给售后说明白目前文档的获取真实IP是有问题的,他们觉得文档上说明的肯定没问题,售后要是不明白,他们不会 ...
- 工厂想采购一套信息化生产执行系统mes,不知道用哪家比较好?
好的信息化生产执行系统MES多的是,但是否适用于贵工厂那就不得而知了,要知道,不同行业.不同产品.不同规模的工厂用同一套系统效果呈现出来都不一样的,所以匹配很重要,个性化差异化.变化性等决定了一个工厂 ...