详解CSS3+JS完美实现放大镜模式


Posted in HTML / CSS onDecember 03, 2020

大概一年多之前写过一篇文章:仿放大镜效果的几种方式原理解析,当时觉得自己技术可以了、飘了,于是就起了这样牛气哄哄的标题,其实也只算是介绍了css里的transform和animation两种动画方式 —— 当然,实现的效果也是巨简单的那种…惭愧。

虽然后来随着技术的增长又逐渐实现了canvas方式的放大镜以及用纯JS实现了另一种“淘宝式”的模型,但是仍然不尽人意:因为实现起来太复杂了,而且需依赖大部分JS逻辑,移动和显示的效果均依赖JS,通过JS计算偏移量再渲染样式。

但是CSS3自定义变量的出现让我看到了“希望之光”!

先看效果:

详解CSS3+JS完美实现放大镜模式

其实现核心:

  • CSS函数,如:calc() —— 动态计算;var() —— 使用自定义变量
  • CSS伪元素:::before/after —— 方便控制,而且独立于文档流之外,易于渲染
  • JS API:offsetX/offsetY:相对父节点区域左上角定位

其实我们具体要实现的就是:在鼠标移入时显示出来一个小圆圈(跟着鼠标走),这个小圆圈到哪,哪里的图片区域就放大相应的倍数并且显示在圆圈内。

为什么要用offset API?
其实根据上面的描述,我们需要实时获取鼠标的左偏移量和上偏移量,而这两个偏移量是相对父节点的。通过左偏移量和上偏移量结合calc()即可计算放大镜显示内容相对父节点的显示位置。
不难找到在鼠标事件对象中,js为我们提供了如下API:

  • screenX/screenY:相对屏幕区域左上角定位,若发生滚动行为,则相对该区域定位
  • pageX/pageY:相对网页区域左上角定位
  • clientX/clientY:相对浏览器可视区域左上角定位
  • offsetX/offsetY:相对父节点区域左上角定位,若无父节点则相对<html><body>定位

但相较而言唯一符合要求的就只有offset“相对于父元素”了。

<div class="bruce">
    <div class="magnifier"></div>
</div>
let magnifier=document.querySelector(".magnifier");
magnifier.addEventListener("mousemove",e=>{
	//控制“镜子”小圆圈的移动
});

放大镜显示内容其实就是将原图像放大N倍,通过上述偏移量按照比例截取一定区域显示内容。

先定义相关的css变量。我们设定放大倍率为2.5倍,那么被放大图像的宽高也是原来宽高的2.5倍。声明两个变量,分为为 --x--y

:root{
    --ratio: 2.5;
    --box-w: 600px;
    --box-h: 400px;
    --outbox-w: calc(var(--box-w) * var(--ratio));
    --outbox-h: calc(var(--box-h) * var(--ratio));
}
.bruce{
    margin-top: 50px;
}
.magnifier{
    --x:0;
    --y:0;
    overflow: hidden;
    position: relative;
    width: var(--box-w);
    height: var(--box-h);
    background: url("img/nan.png") no-repeat center/100% 100%;
    cursor: grabbing;
}

图片以背景图的形式展示,方便控制大小。

很显然在这个场景下无需插入子节点作为放大镜的容器了,使用::before即可!

放大镜在使用时宽高为100px,不使用时宽高为0。通过绝对定位布局放大镜随鼠标移动的位置,即声明left和top,再通过声明 transform:translate(-50%,-50%) 将放大镜补位,使放大镜中心与鼠标光标位置一致。由于声明left和top定位放大镜的位置,还可以声明 will-change 改善left和top因改变而引发的性能问题!
而且用CSS解决这些问题的另一个好处就是:借助于伪元素/伪类,我们可以将一些比较细节的东西用CSS解决,而不是寄托于“繁重”的JavaScript。比如:鼠标移入样式hover:

.magnifier::before{
    --size: 0;
    position: absolute;
    left: var(--x);
    top: var(--y);
    border-radius: 100%;
    width: var(--size);
    height: var(--size);
    box-shadow: 1px 1px 3px rgba(0,0,0,.5);
    content: "";
    will-change: left,top;
    transform: translate(-50%,-50%);
}
.magnifier:hover::before{
    --size: 100px;
}

接下来使用background实现(展示)放大镜内容。依据放大倍率为2.5倍,那么可声明size: --outbox-w --outbox-h,通过 position-x 和 position-y 移动背景即可,最终可连写成 background:#333 url(背景图片) no-repeat var(--scale-x) var(--scale-y)/var(--outbox-w) var(--outbox-h)
其中 --scale-x 和 --scale-y 对应 position-x 和 position-y (即background-position),用于随着鼠标移动而改变背景位置。

--scale-x: calc(var(--size) / var(--ratio) - var(--ratio) * var(--x));
--scale-y: calc(var(--size) / var(--ratio) - var(--ratio) * var(--y));

那么上面mousemove函数中改变镜子的“位置坐标”就可以这么写了:

e.target.style.setProperty("--x",`${e.offsetX}px`);
e.target.style.setProperty("--y",`${e.offsetY}px`);

so eazy~

最终的CSS内容如下:

:root{
    --ratio: 2.5;
    --box-w: 600px;
    --box-h: 400px;
    --outbox-w: calc(var(--box-w) * var(--ratio));
    --outbox-h: calc(var(--box-h) * var(--ratio));
}
.bruce{
    margin-top: 50px;
}
.magnifier{
    --x:0;
    --y:0;
    overflow: hidden;
    position: relative;
    width: var(--box-w);
    height: var(--box-h);
    background: url("img/nan.png") no-repeat center/100% 100%;
    cursor: grabbing;
}
.magnifier::before{
    --size: 0;
    --scale-x: calc(var(--size) / var(--ratio) - var(--ratio) * var(--x));
    --scale-y: calc(var(--size) / var(--ratio) - var(--ratio) * var(--y));
    position: absolute;
    left: var(--x);
    top: var(--y);
    border-radius: 100%;
    width: var(--size);
    height: var(--size);
    background: #333 url("img/nan.png") no-repeat var(--scale-x) var(--scale-y)/var(--outbox-w) var(--outbox-h);
    box-shadow: 1px 1px 3px rgba(0,0,0,.5);
    content: "";
    will-change: left,top;
    transform: translate(-50%,-50%);
}
.magnifier:hover::before{
    --size: 100px;
}

若是::before中想要用一张本身就是2倍大小的图片,则background中将--outbox-w--outbox-h替换为原本的--box-w--box-h 再做适当的微调即可。

注意看你放大镜中的内容,它表明不只是简单的图片的放大,所以才有了 var(--size) / var(--ratio) 这一段代码;
关于css中修改css3自定义变量:我仍然认为只能在“同级同属”范围内才能修改并显示成功。

到此这篇关于详解CSS3+JS完美实现放大镜模式的文章就介绍到这了,更多相关CSS3+JS放大镜内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
html5 css3 动态气泡按钮实例演示
Dec 02 HTML / CSS
使用before和:after伪类制作css3圆形按钮
Apr 08 HTML / CSS
css3实现3d旋转动画特效
Mar 10 HTML / CSS
详解CSS3中字体平滑处理和抗锯齿渲染
Mar 29 HTML / CSS
利用canvas实现图片下载功能来实现浏览器兼容问题
May 31 HTML / CSS
HTML5验证以及日期显示的实现详解
Jul 05 HTML / CSS
HTML5+CSS3应用详解
Feb 24 HTML / CSS
带你认识HTML5中的WebSocket
May 22 HTML / CSS
HTML5拖拉上传文件的简单实例
Jan 11 HTML / CSS
iphoneX 适配客户端H5页面的方法教程
Dec 08 HTML / CSS
记一次高分屏下canvas模糊问题
Feb 17 HTML / CSS
html5 拖拽及用 js 实现拖拽功能的示例代码
Oct 23 HTML / CSS
css3中仿放大镜效果的几种方式原理解析
Dec 03 #HTML / CSS
CSS3 实现飘动的云朵动画
Dec 01 #HTML / CSS
CSS3 filter(滤镜)实现网页灰色或者黑色模式的代码
Nov 30 #HTML / CSS
CSS3 实现时间轴动画
Nov 25 #HTML / CSS
纯CSS3实现的井字棋游戏
Nov 25 #HTML / CSS
HTML+CSS3+JS 实现的下拉菜单
Nov 25 #HTML / CSS
CSS3 实现倒计时效果
Nov 25 #HTML / CSS
You might like
PHP遍历数组的几种方法
2012/03/22 PHP
php数组相加 array(“a”)+array(“b”)结果还是array(“a”)
2012/09/19 PHP
PHP分多步骤填写发布信息的简单方法实例代码
2012/09/23 PHP
常见PHP数据库解决方案分析介绍
2015/09/24 PHP
PHP中array_keys和array_unique函数源码的分析
2016/02/26 PHP
PHP运行模式汇总
2016/11/06 PHP
js 静态动态成员 and 信息的封装和隐藏
2011/05/29 Javascript
浏览器解析js生成的html出现样式问题的解决方法
2012/04/16 Javascript
JavaScript定时器详解及实例
2013/08/01 Javascript
JavaScript实现对下拉列表值进行排序的方法
2015/07/15 Javascript
Javascript 闭包详解及实例代码
2016/11/30 Javascript
jQuery实现可拖拽3D万花筒旋转特效
2017/01/03 Javascript
vue.js轮播图组件使用方法详解
2018/07/03 Javascript
JavaScript 对引擎、运行时、调用堆栈的概述理解
2018/10/22 Javascript
[32:07]完美世界DOTA2联赛PWL S3 LBZS vs Rebirth 第一场 12.16
2020/12/17 DOTA
利用PyInstaller将python程序.py转为.exe的方法详解
2017/05/03 Python
git进行版本控制心得详谈
2017/12/10 Python
利用python对Excel中的特定数据提取并写入新表的方法
2018/06/14 Python
Python多线程编程之多线程加锁操作示例
2018/09/06 Python
使用Python为中秋节绘制一块美味的月饼
2019/09/11 Python
python脚本后台执行方式
2019/12/21 Python
Python 读取有公式cell的结果内容实例方法
2020/02/17 Python
python代码实现猜拳小游戏
2020/11/30 Python
Pycharm 设置默认解释器路径和编码格式的操作
2021/02/05 Python
html5 canvas手势解锁源码分享
2020/01/07 HTML / CSS
Waterford美国官网:爱尔兰水晶制品品牌
2017/04/26 全球购物
美国最大的袜子制造商和零售商:Renfro Socks
2017/09/03 全球购物
伦敦的高级牛仔布专家:Trilogy
2018/08/06 全球购物
Guess荷兰官网:美国服饰品牌
2020/01/22 全球购物
财务出纳员岗位职责
2013/11/26 职场文书
时尚休闲吧创业计划书
2014/01/25 职场文书
学校消防演习方案
2014/02/19 职场文书
主持人演讲稿
2014/05/13 职场文书
组织鉴定材料
2014/06/02 职场文书
2014年家长学校工作总结
2014/11/20 职场文书
土建技术员岗位职责
2015/04/11 职场文书