当前位置：首页 > news >正文

CSS+ JS 实现手电筒效果

news 文章来源：https://blog.csdn.net/qq_40146638/article/details/129744271 2025/2/9 6:59:22

前言概述

JavaScript 结合 CSS 打造的一款图片特效，当鼠标拖拽滑块时，让本该置灰的图片局部恢复本来的颜色。且该效果随着你的鼠标的按下时的移动而移动。

核心功能

图片置灰
拖拽功能
让滑块位置处的图片恢复本来的颜色

实现原理

这个的实现原理并不复杂，我们只需要一张背景图作为我们的素材，再单独定义一个滑块让并使用背景图裁剪的方式动态去显示图片的不同位置。

实现手电筒的框架

搭建框架

要实现这个功能，首先需要根据结构搭建一个样式结构出来

// css
/* 外层容器 */
.container {position: relative;width: 500px;height: 300px;
}/* 图片 */
.baImg {display: block;width: 100%;height: 100%;filter: grayscale(100%);user-select: none;/* 阻止图片被拖拽 */-webkit-user-drag: none;
}/* 手电筒 */
.move {position: absolute;width: 100px;height: 100px;top: 0;left: 0;border-radius: 50%;background: url("./1.png") no-repeat;background-size: 500px 300px;background-position: 0 0;/* 增加盒子阴影 */box-shadow: 0 0 5px 5px #fff; 
}
// html
<div class="container"><!-- 背景图 --><img class="baImg" src="./1.png" alt=""><!-- 手电筒 --><div class="move"></div>
</div>

!! -webkit-user-drag: none; 是 CSS 控制一个元素和它的内容是否可以被拖拽

取值

auto：使用默认的拖拽行为，这种情况只有图片和链接可以被拖拽。
element：整个元素（不仅仅只是它的内容）可拖拽。
none：元素不能被拖动。在通过选中后可拖拽。

filter: grayscale(100%); 是 CSS 用来定义元素（通常是图片）的视觉滤镜效果

grayscale：将图片转换为灰阶，数值的大小表示转换的程度，区间在 0 - 100
更多参数可以参考菜鸟教程- filter 的使用

根据上述的样式和结构搭建出来的结果，它就长下图这个样子
在这里插入图片描述

逻辑处理

首先我们需要给手电筒增加拖拽功能，在拖拽过程中动态获取鼠标的移动距离，然后更新手电筒本身的位置，并使用 background-clip 背景图裁剪的方式将原图的部分区域裁剪到手电筒的容器内显示原图，这样基本上就可以实现手电筒的效果了。

获取外层容器和手电筒的元素，并用容器的大小减去手电筒本身的大小
给手电筒增加拖拽效果，根据上述计算出来的大小限制拖拽范围
拖拽过程中得到拖拽的位置，更新手电筒本身的位置、背景图裁剪的位置

// 获取最外层的容器
let container = document.getElementsByClassName('container')[0];
// 获取手电筒
let move = document.getElementsByClassName('move')[0];// 容器的大小减去移动目标的大小得到，X、Y 拖拽距离上的最大拖拽范围
let maxWidth = container.clientWidth - move.clientWidth;
let maxHeight = container.clientHeight - move.clientHeight;
move.onmousedown = function (moveStart) {// 获取鼠标在元素身上点下的位置let left = moveStart.offsetX;let top = moveStart.offsetY;document.onmousemove = function (ev) {// 获取拖拽后鼠标距离可视区的位置let { clientX, clientY } = ev;let _cX = clientX - left;let _cY = clientY - top;// 限制手电筒的移动范围if (_cX <= 0) {_cX = 0;} else if (_cX >= maxWidth) {_cX = maxWidth;}if (_cY <= 0) {_cY = 0;} else if (_cY >= maxHeight) {_cY = maxHeight;}move.style.left = (_cX) + 'px';move.style.top = (_cY) + 'px';// ！！！！ 这里的背景图裁剪一定要是负的，如果是正数就会出现问题move.style.backgroundPosition = `-${_cX}px -${_cY}px`;}// 在拖拽结束后，将绑定在 document 身上的事件删除，避免重复绑定和触发document.onmouseup = function () {console.log('关闭');document.onmousemove = null;document.onmouseup = null;}
}

实现效果

在手电筒上按下拖拽移动的时候，就可以看到在手电筒的区域显示了原图本来的色彩
在这里插入图片描述

总结

到这里看一下我们都一起实现文章开头说的这些功能

图片置灰
拖拽功能
让滑块位置处的图片恢复本来的颜色

完整代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>手电筒</title><style>/* 外层容器 */.container {position: relative;width: 500px;height: 300px;}/* 图片 */.baImg {display: block;width: 100%;height: 100%;filter: grayscale(100%);user-select: none;/* 阻止图片被拖拽 */-webkit-user-drag: none;}/* 手电筒 */.move {position: absolute;width: 100px;height: 100px;top: 0;left: 0;border-radius: 50%;background: url("./1.png") no-repeat;background-size: 500px 300px;background-position: 0 0;/* 增加盒子阴影 */box-shadow: 0 0 5px 5px #fff; }</style>
</head><body><div class="container"><!-- 背景图 --><img class="baImg" src="./1.png" alt=""><!-- 手电筒 --><div class="move"></div></div><script>// 获取最外层的容器let container = document.getElementsByClassName('container')[0];// 获取手电筒let move = document.getElementsByClassName('move')[0];// 容器的大小减去移动目标的大小得到，X、Y 拖拽距离上的最大拖拽范围let maxWidth = container.clientWidth - move.clientWidth;let maxHeight = container.clientHeight - move.clientHeight;move.onmousedown = function (moveStart) {// 获取鼠标在元素身上点下的位置let left = moveStart.offsetX;let top = moveStart.offsetY;document.onmousemove = function (ev) {// 获取拖拽后鼠标距离可视区的位置let { clientX, clientY } = ev;let _cX = clientX - left;let _cY = clientY - top;// 限制手电筒的移动范围if (_cX <= 0) {_cX = 0;} else if (_cX >= maxWidth) {_cX = maxWidth;}if (_cY <= 0) {_cY = 0;} else if (_cY >= maxHeight) {_cY = maxHeight;}move.style.left = (_cX) + 'px';move.style.top = (_cY) + 'px';// ！！！！ 这里的背景图裁剪一定要是负的，如果是正数就会出现问题move.style.backgroundPosition = `-${_cX}px -${_cY}px`;}// 在拖拽结束后，将绑定在 document 身上的事件删除，避免重复绑定和触发document.onmouseup = function () {console.log('关闭');document.onmousemove = null;document.onmouseup = null;}}</script>
</body></html>

本篇实现手电筒效果就到此结束了，这个效果用到的场景比较少，如果读者有更好的思路或者实现效果的话，欢迎在评论区活跃讨论。文章中的案例可以正常使用哦 ~

CSS+ JS 实现手电筒效果

前言概述 JavaScript 结合 CSS 打造的一款图片特效，当鼠标拖拽滑块时，让本该置灰的图片局部恢复本来的颜色。且该效果随着你的鼠标的按下时的移动而移动。核心功能图片置灰拖拽功能让滑块位置处的图片恢复本来的颜色实现原理这个的实现原理并不…...

编程日记 2023/3/26 11:53:13

2021地理设计组二等奖：基于InSAR和指数分析的地面沉降风

作品简介一、作品背景地面沉降是指地面高程的降低, 又称地面下沉或地沉, 是以缓慢、难以察觉的向下垂直运动为主, 是指在自然和人为因素作用下, 由于地壳表层土体压缩而导致区域性地面标高降低的一种环境现象。目前, 地面沉降己成为城市化进程中普遍存在的生态环境问题, 成为…...

编程日记 2023/3/26 11:48:10

计算机操作系统（第四版）第二章进程的描述与控制—课后习题答案

1.什么是前趋图？为什么要引入前趋图？ 前趋图是一个有向无循环图，记为DAG，用于描述进程之间执行的先后关系。 2.试画出下面四条语句的前趋图： S1:axy; S2:bz1; S3:ca-b; S4:wc1; 3.为什么程序并发执行会产生间断性特征&…...

编程日记 2023/4/19 17:26:39

CAN通信----电路图

CAN通信----基本原理一、CAN总线网络连接 1.闭环总线网络----ISO11898 闭环总线网络高速、短距离，它的总线最大长度为 40m，通信速度最高为 1Mbps，总线的两端各要求有一个120 欧的电阻。 2.开环总线网络----ISO11519 开环总线网络低速、…...

编程日记 2023/4/19 17:28:13

Windows系统安装ElasticSearch（一）

一 ES介绍Elasticsearch 是一个分布式可扩展的实时搜索和分析引擎,一个建立在全文搜索引擎 Apache Lucene(TM) 基础上的搜索引擎.当然 Elasticsearch 并不仅仅是 Lucene 那么简单，它不仅包括了全文搜索功能，还可以进行以下工作:分布式实时文件存储&#…...

编程日记 2023/4/19 17:30:08

1、产生随机数 varRANDOMvarRANDOM varRANDOMvar[ $var % 150 ] 2、产生不重复的随机数 $ entries($(shuf -i 0-149 -n 15)) $ echo “${entries[]}” 3、对随机数排序 $ entries($(shuf -i 0-149 -n 15 | sort -n)) $ echo “entries[]"12224549546678798393118119124140…...

编程日记 2023/4/11 7:32:30

【3.24】Mybatis常见面试题

Mybatis常见面试题 #{}和￥{}的区别是什么？ 【#】：底层执行SQL使用PreparedStatement对象，预编译SQL，相对安全。入参使用占位符的方式。【$】：底层执行SQL使用Statement对象，入参使用SQL拼接的…...

编程日记 2023/4/19 17:32:13

IDEA 热部署，修改代码不用重启项目

热部署指在修改项目代码的时候不重启服务器让修改生效。安装JRebel and XRebelFile->Settings，然后Plugins-> Marketplace，输入JRebel，安装如下插件——JRebel and XRebel ，重启idea激活JRebel and XRebel第一行输入网址&am…...

编程日记 2023/4/11 7:32:34

将 XLS 转换为 EXE:xlCompiler Crack

只需单击几下即可将Excel文件转换为应用程序 xl编译器无需编程即可将您的Excel电子表格转换为软件应用程序将 XLS 转换为 EXE 将Excel文件转换为具有保护选项的应用程序。Excel 到 EXE 转换器为您提供了分发 Excel 模型的竞争优势和灵活性。将 Excel 的功能丰富的环境保存在应…...

编程日记 2023/4/16 7:58:51

【百面成神】spring基础12问，你能坚持到第几问

前言 🍉 作者简介：半旧518，长跑型选手，立志坚持写10年博客，专注于java后端 ☕专栏简介：java面试宝典，特点：全、精、深、简，力求每个核心知识点1分钟回答好。 &#x1f3…...

编程日记 2023/4/16 7:59:29

javaSE类和对象(下)

目录君1.封装2.访问限定符3.包的定义及使用4.static成员变量5.static成员方法6.代码块及其分类实例代码块静态代码块静态代码块与实例代码块的执行顺序static成员变量(类变量)初始化1.封装面向对象程序三大特性：封装、继承、多态。而类和对象阶段，主要…...

编程日记 2023/3/26 11:02:47

【数据结构】第四站：单链表力扣题（二）

目录一、链表的回文结构二、相交链表三、环形链表四、环形链表Ⅱ 五、复制带随机指针的链表一、链表的回文结构题目描述：链表的回文结构_牛客题霸_牛客网对于这道题，如果没有前面的一些题的基础，是非常难做的，我们的思…...

编程日记 2023/4/16 8:01:19

KafKa知识汇总

前言汇总相关知识 Kafka快速实战与基本原理详解...

编程日记 2023/4/16 8:03:42

【RV1126】调试GT911，1024x600 7寸 MIPI 电容触摸屏

文章目录一、驱动注册失败二、触摸屏可以触摸，但是x轴数据反了三、可以触摸了，但是Y轴数据跳变，几乎只有一半的屏幕是可以正常滑动的三、汇顶触摸屏配置文件解析四、使用新的配置文件4.1 新配置解决问题4.2 测试触摸的方法在kernel增加frame …...

编程日记 2023/3/26 10:47:39

C的强符号/弱符号

首先上代码和结果： 代码： #include <stdio.h> int k; int k; int main() {printf("addr of k %p\n", &k);printf("value of k %d\n", k);return 0; }结果： addr of k 00408074 value of k 0问题&…...

编程日记 2023/3/26 10:42:36

AD/DA转换（XPT2046）

AD/DA介绍AD（Analog to Digital）：模拟-数字转换，将模拟信号转换为计算机可操作的数字信号DA（Digital to Analog）：数字-模拟转换，将计算机输出的数字信号转换为模拟信号AD/DA转换打开…...

编程日记 2023/4/19 17:33:55

乐观锁和悲观锁面试题

Mysql的乐观锁和悲观锁实现方式加锁时机常见的调用方式优势不足适用场景乐观锁开发自定义更新数据的时候sql语句中进行version的判断高并发容易出现不一致的问题高并发读，少写悲观锁Mysql内置查询数据的开始select * for update保证一致性低并发互联网高并发场景极…...

编程日记 2023/4/16 8:04:55

【Autoware规控】mpc_follower模型预测控制节点

文章目录1. 技术原理2. 代码实现1. 技术原理 MPC，即Model Predictive Control（模型预测控制），是一种基于动态模型的控制算法。MPC算法通过建立系统的数学模型，根据当前状态和一定时间内的预测，优化未来的控…...

编程日记 2023/4/19 17:35:49

成果VR虚拟3D展厅让内容更丰富饱满

随着数字技术的不断发展和普及，数字化展厅成为了一种重要的展示形式。线上虚拟展厅作为数字化展示的一种新形式，采用虚拟现实技术，能够克服时空限制，打破传统展览业的展示模式，为用户提供更加丰富、立体、沉浸式的展览…...

编程日记 2023/4/19 17:37:37

【CE进阶】lua脚本使用

▒ 目录 ▒🛫 导读需求开发环境1️⃣ 脚本窗口Lua ScriptLua EngineAuto assemble2️⃣ 全局变量3️⃣ 进程当前打开的进程ID系统的进程列表系统的顶部窗口列表4️⃣ 线程5️⃣ 输入设备6️⃣ 屏幕7️⃣ 剪贴板🛬 文章小结📖 参考资料&#x…...

编程日记 2023/3/26 10:17:23

【vue2】近期bug收集与整理02

⭐【前言】在使用vue2构建页面时候，博主遇到的问题难点以及最终的解决方案。 🥳博主：初映CY的前说(前端领域) 🤘本文核心：博主遇到的问题与解决思路 ⭐数据枚举文件的使用同后端那边发送请求的时，请求返…...

编程日记 2023/3/26 10:12:20

2. 01背包问题

文章目录QuestionIdeasCodeQuestion 有 N 件物品和一个容量是 V 的背包。每件物品只能使用一次。第 i 件物品的体积是 vi ，价值是 wi 。求解将哪些物品装入背包，可使这些物品的总体积不超过背包容量，且总价值最大。输出最大价值。输入…...

编程日记 2023/4/12 4:04:58

【Docker】CAdvisor+InfluxDB+Granfana容器监控

文章目录原生命令 docker stats容器监控3剑客CIGCAdvisorInfluxDBGranfanacompose容器编排，一套带走新建目录新建3件套组合的 docker-compose.yml检查配置，有问题才有输出 docker-compose config -q启动docker-compose文件 docker-compose up -d测试浏览…...

编程日记 2023/3/26 10:02:13

k8s 部署nginx 实现集群统一配置，自动更新nginx.conf配置文件总结

k8s 部署nginx 实现集群统一配置，自动更新nginx.conf配置文件总结大纲 1 nginx镜像选择2 创建configmap保存nginx配置文件3 使用inotify监控配置文件变化4 Dockerfile创建5 调整镜像原地址使用阿里云6 创建deploy部署文件部署nginx7 测试使用nginx配置文件同步&…...

编程日记 2023/4/16 8:05:49

动态内存管理（上）——“C”

各位CSDN的uu们你们好呀，今天，小雅兰的内容是动态内存管理噢，下面，让我们进入动态内存管理的世界吧为什么存在动态内存分配动态内存函数的介绍 malloc free calloc realloc 常见的动态内存错误为什么存在动态内存分配我们已…...

编程日记 2023/4/13 3:51:15

GPT-4发布，这类人才告急，大厂月薪10W+疯抢

ChatGPT最近彻底火出圈，各行各业都在争相报道，甚至连很多官媒都下场“跟风”。ChatGPT的瓜还没吃完，平地一声雷，GPT-4又重磅发布！ 很多小伙伴瑟瑟发抖：“AI会不会跟自己抢饭碗啊？” 关于“如何…...

编程日记 2023/4/13 3:53:02

MySQL数据库实现主主同步

前言 MySQL主主同步实际上是在主从同步的基础上将从数据库也提升成主数据库，让它们可以互相读写数据库，从数据库变成主数据库；主从相互授权连接，读取对方binlog日志并更新到本地数据库的过程,只要对方数据改变，自己就…...

编程日记 2023/4/13 3:54:25

JavaScript传参的6种方式

JavaScript传参的方式1. 传递基本类型参数2. 传递对象类型参数3. 使用解构赋值传递参数4. 使用展开运算符传递参数5. 使用可选参数6. 使用剩余参数JavaScript是一门非常灵活的语言，其参数传递方式也同样灵活。在本篇文章中，会详细介绍JavaScript中的参数…...

编程日记 2023/3/26 9:37:02

蓝桥之统计子矩阵

样例说明满足条件的子矩阵一共有 19 , 包含: 大小为 11 的有 10 个。大小为 12 的有 3 个。大小为13 的有 2 个。大小为 14 的有 1 个。大小为 21 的有 3 个。前缀和二维数组前缀和暴力搜索 import java.util.*; public class Main{private static int ans0;pub…...

编程日记 2023/3/26 9:32:00

Java的基础面试题

一.java基础1.JDK和JRE有什么区别？JDK是java开发工具包，JRE是java运行时环境（包括Java基础类库，java虚拟机）2.和equals的区别是什么？比较的是两者的地址值，equals比较的是两者的内容是否一样3.两…...

编程日记 2023/3/26 9:26:56

网站建设推广哪家专业/怎么优化网站

在最新发布的《百度移动互联网发展趋势报告2011年Q3》中，百度无线和易观国际依托百度移动搜索数据，结合易观智库的应用数据补充，从用户分布及网络接入、移动终端竞争格局及趋势、移动终端平台变化趋势、手机浏览器竞争格局及发展趋势、应用商…...

编程日记 2025/2/9 6:07:28

长春网站建设SEO优化营销/销售外包公司

原文链接：https://dev.to/brunooliveira/rust-understanding-traits-1-45md原文标题：Rust - understanding traits 1公众号：Rust 碎碎念概述(Introduction)如今很多语言都是面向对象，支持这种范式，或者不是直接面向对象…...

编程日记 2025/2/9 4:54:37

用c 做网站/广东vs北京首钢

表格 Abstract class Interface 实例化不能不能类一种继承关系，一个类只能使用一次继承关系。可以通过继承多个接口实现多重继承一个类可以实现多个int…...

编程日记 2025/2/9 3:51:00

wordpress上传后设置/想做电商应该怎么入门

一. 准备 1. 苹果开发者账号（创建app） 2. 微信开放平台账号 （创建移动应用） 3. 微信公众平台账号（创建小程序） 4. uni-app 创建项目 5. Dcloud 开发者账号且实名认证二. 实现 1. uniapp 配置打开…...

编程日记 2025/2/9 3:09:39

沧州公司做网站/培训计划和培训内容

下载及安装7z http://7-zip.org/download.html 常用命令压缩 7z a -p密码压缩路径及文件名源路径及文件名例如压缩./public/data/md5/目录下的所有文件到根目录，压缩包名称为po1.zip，密码为abcd 7z a -pabcd po1.zip ./public/data/md5/* 解压 7z x …...

编程日记 2025/2/9 2:00:54

建设厅网站贵州人事考试信息网/新航道培训机构怎么样

很多人用个人邮箱的时候不喜欢在网页端登陆，喜欢使用客户端，但是新手对于客户端设置又是一脸蒙圈，常常自己将客户端乱设一通，结果发现无法发信也无法收信。今天就跟大家说一说客户端应该怎么设置什么是IMAP、POP和SMTP 收信是一…...

编程日记 2025/2/8 23:54:25