仿京东放大镜效果的实现

仿京东放大镜
(1) 整个案例可以分为三个功能模块
(2) 鼠标经过小图片盒子, 黄色的遮挡层 和 大图片盒子显示,离开隐藏2个盒子功能
(3)黄色的遮挡层跟随鼠标功能。
(4)移动黄色遮挡层,大图片跟随移动功能。
分析:
(1) 黄色的遮挡层跟随鼠标功能。
(2) 把鼠标坐标给遮挡层不合适。因为遮挡层坐标以父盒子为准。
(3) 首先是获得鼠标在盒子的坐标。
(4) 之后把数值给遮挡层做为left 和top值。
(5) 此时用到鼠标移动事件,但是还是在小图片盒子内移动。
(6) 发现,遮挡层位置不对,需要再减去盒子自身高度和宽度的一半。
(7) 遮挡层不能超出小图片盒子范围。
(8) 如果小于零,就把坐标设置为0,如果大于遮挡层最大的移动距离,就把坐标设置为最大的移动距离
(9) 遮挡层的最大移动距离:小图片盒子宽度 减去 遮挡层盒子宽度
<div class="preview_wrap fl"><div class="preview_img"><img src="../images/s3.png" alt=""><div class="mask"></div><div class="big"><img src="../images/big.jpg" alt="" class="bigImg"></div></div>
</div>
<style>.fl {float: left;}.preview_wrap {width: 400px;height: 590px;}.preview_img {position: relative;height: 398px;border: 1px solid #ccc;}.mask {display: none;position: absolute;top: 0;left: 0;width: 300px;height: 300px;background: #b2fa90;opacity: .5;border: 1px solid #ccc;cursor: move;}.big {display: none;position: absolute;left: 410px;top: 0;width: 500px;height: 500px;background-color: pink;z-index: 999;border: 1px solid #ccc;overflow: hidden;}.big img {position: absolute;top: 0;left: 0;}
</style>
window.addEventListener('load', function () {var preview_img = document.querySelector('.preview_img');var mask = document.querySelector('.mask');var big = document.querySelector('.big');// 1. 当我们鼠标经过 preview_img 就显示和隐藏 mask 遮挡层 和 big 大盒子preview_img.addEventListener('mouseover', function () {mask.style.display = 'block';big.style.display = 'block';})preview_img.addEventListener('mouseout', function () {mask.style.display = 'none';big.style.display = 'none';})// 2. 鼠标移动的时候,让黄色的盒子跟着鼠标来走preview_img.addEventListener('mousemove', function (e) {// (1). 先计算出鼠标在盒子内的坐标var x = e.pageX - this.offsetLeft;var y = e.pageY - this.offsetTop;// console.log(x, y);// (2) 减去盒子高度 300的一半 是 150 就是我们mask 的最终 left 和top值了// (3) 我们mask 移动的距离var maskX = x - mask.offsetWidth / 2;var maskY = y - mask.offsetHeight / 2;// (4) 如果x 坐标小于了0 就让他停在0 的位置// 遮挡层的最大移动距离var maskMax = preview_img.offsetWidth - mask.offsetWidth;if (maskX <= 0) {maskX = 0;} else if (maskX >= maskMax) {maskX = maskMax;}if (maskY <= 0) {maskY = 0;} else if (maskY >= maskMax) {maskY = maskMax;}mask.style.left = maskX + 'px';mask.style.top = maskY + 'px';// 3. 大图片的移动距离 = 遮挡层移动距离 * 大图片最大移动距离 / 遮挡层的最大移动距离// 大图var bigIMg = document.querySelector('.bigImg');// 大图片最大移动距离var bigMax = bigIMg.offsetWidth - big.offsetWidth;// 大图片的移动距离 X Yvar bigX = maskX * bigMax / maskMax;var bigY = maskY * bigMax / maskMax;bigIMg.style.left = -bigX + 'px';bigIMg.style.top = -bigY + 'px';})})
相关文章:
仿京东放大镜效果的实现
仿京东放大镜 (1) 整个案例可以分为三个功能模块 (2) 鼠标经过小图片盒子, 黄色的遮挡层 和 大图片盒子显示,离开隐藏2个盒子功能 (3)黄色的遮挡层跟随鼠标功能。 (4&…...
ESP32设备驱动-LM35温度传感器驱动
LM35温度传感器驱动 文章目录 LM35温度传感器驱动1、LM35介绍2、硬件准备3、软件准备4、驱动实现1、LM35介绍 LM35 系列是精密集成电路温度传感器,其输出电压与摄氏(摄氏度)温度成线性比例。 因此,LM35 优于以开尔文校准的线性温度传感器,因为用户无需从其输出中减去较大…...
基于深度学习的犬种识别软件(YOLOv5清新界面版,Python代码)
摘要:基于深度学习的犬种识别软件用于识别常见多个犬品种,基于YOLOv5算法检测犬种,并通过界面显示记录和管理,智能辅助人们辨别犬种。本文详细介绍博主自主开发的犬种检测系统,在介绍算法原理的同时,给出Py…...
【IDEA插件开发】环境搭建
基础信息 GRADLE 7.5.1 IDEA IntelliJ IDEA 2020.1.1 (Ultimate Edition) Build #IU-201.7223.91, built on April 30, 2020 Licensed to https://zhile.io You have a perpetual fallback license for this version Subscription is active until July 8, 2089 Runtime ve…...
【蓝桥杯专题】 DP(C++ | 洛谷 | acwing | 蓝桥)
菜狗现在才开始备战蓝桥杯QAQ 文章目录【蓝桥杯专题】 DP(C | 洛谷 | acwing | 蓝桥)AcWing 1205. 买不到的数目Acwing 1216. 饮料换购【模拟】01背包271. 杨老师的照相排列最长公共上升子序列PPPPPPPP总结【蓝桥杯专题】 DP(C | 洛谷 | acwi…...
咪咕MGV3201_ZG_GK国科6323_UWE5621DS_免拆卡刷固件包
咪咕MGV3201_ZG_GK国科6323_UWE5621DS_免拆卡刷固件包 特点: 1、适用于对应型号的电视盒子刷机; 2、开放原厂固件屏蔽的市场安装和u盘安装apk; 3、修改dns,三网通用; 4、大量精简内置的没用的软件,运行…...
重构数据-Change Value to Reference将实值对象改为引用对象三
重构数据-Change Value to Reference将实值对象改为引用对象三 1.将实值对象改为引用对象 1.1.实值对象和引用对象区别 下面通过客户Customer和订单Order两个对象介绍下它们的区别 值对象:当一个客户Customer下了多个订单Order后,每个订单类都将创建一…...
计算机网络——通信专业面试问题学习笔记
文章目录1、计算机网络这门课学了什么?目录里有多少章?2、Internet的概念与发展史3、什么是交换?三种交换方式4、OSI的七层协议, TCP/IP的四层协议, 五层协议5、WAN 、LAN 、MAN、PAN这些能分的清楚吗?全称分别都是什么࿱…...
代码随想录算法训练营第三十天 | 332.重新安排行程 51. N皇后 37. 解数独 总结
打卡第30天,回溯算法第二刷。 今日任务 332.重新安排行程51.N皇后37.解数独总结 332.重新安排行程 给你一份航线列表 tickets ,其中 tickets[i] [fromi, toi] 表示飞机出发和降落的机场地点。请你对该行程进行重新规划排序。 所有这些机票都属于一个从…...
Windows权限提升—MySQL数据库提权
Windows权限提升—MySQL数据库提权1. 前言2. 数据库提权介绍2.1. 常见数据库端口2.2. MySQL数据库提权条件2.3. MySQL数据库提权类型3. MySQL中UDF提权3.1. UDF提权介绍3.2. UDF提权思路3.3. UDF提权步骤3.3.1. 获取外连数据库3.3.1.1. 外连数据库3.3.1.2. 连接数据库3.3.1.3. …...
使用旧电脑玩Linux
今天给大家讲讲使用旧电脑玩Linux,大家应该都知道旧电脑的硬件一般比较落后,特别是一些非常老的电脑,目前还在使用的是机械硬盘,如是要跑windows可想而知,但是Linux系统对硬件性能的要求可比windows低的多了࿰…...
Linux安装EMQX(简洁版)
安装目录 mkdir /opt/emqx && cd /opt/emqx 安装包下载 yum -y install wget && wget https://www.emqx.com/zh/downloads/broker/5.0.20/emqx-5.0.20-el7-amd64.tar.gz 注意:https://www.emqx.com/zh/downloads/broker获取下载链接并替换(后缀&…...
基于STM32 + FPGA 的软体机器人的 CAN总线运动控制器的设计
针对在软体机器人控制时,多电机协同控制过程中难度大、通用性差、协同性差等缺点,设计了基于 ARM和 FPGA的软体机器人的控制器局域网络 ( controller area network,CAN) 总线运动控制器,采用 ARMCortex-M4 …...
ROC曲线和AUC值
ROC曲线(Receiver Operating Characteristic,受试者工作特征)评价分类模型的可视化工具,是一条横纵坐标都限制在0-1范围内的曲线横坐标是假正率FPR,错误地判断为正例的概率纵坐标是真正率TPR,正确地判断为正…...
【vue.js】在网页中实现一个金属抛光质感的按钮
文章目录前言效果电脑效果手机效果说明完整代码index.html前言 诶?这有一个按钮(~ ̄▽ ̄)~,这是一个在html中实现的具有金属质感并且能镜面反射的按钮~ 效果 电脑效果 手机效果 说明 主要思路是使用 navig…...
android实现评论区功能
效果 activity_detail.xml <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas.android.com/apk/res/android"xmlns:app"http://schemas.android.com/apk/res-auto"xmlns:tools"http…...
Java每日一练(20230319)
目录 1. 最大矩形 🌟🌟🌟 2. 回文对 🌟🌟🌟 3. 给表达式添加运算符 🌟🌟🌟 🌟 每日一练刷题专栏 🌟 Golang每日一练 专栏 Python每日一练…...
Redis缓存双写一致性
目录双写一致性Redis与Mysql双写一致性canal配置流程代码案例双写一致性理解缓存操作细分缓存一致性多种更新策略挂牌报错,凌晨升级先更新数据库,在更新缓存先删除缓存,在更新数据库先更新数据库,在删除缓存延迟双删策略总结双写一致性 Redis与Mysql双写一致性 canal 主要是…...
【2023-Pytorch-检测教程】手把手教你使用YOLOV5做交通标志检测
项目下载地址:YOLOV5交通标志识别检测数据集代码模型教学视频-深度学习文档类资源-CSDN文库 交通标志的目标检测算法在计算机视觉领域一直属于热点研究问题,改进的优化算法不断地被提出。国内外许多学者针对现有的目标检测方法中网络结构、目标定位、损…...
Java中的二叉树
文章目录前言一、树形结构(了解)1.1 概念1.2 概念(重要)1.3 树的表示形式(了解)1.4 树的应用二、二叉树(重点)2.1 概念2.2 两种特殊的二叉树2.3 二叉树的性质2.5 二叉树的存储2.5 二…...
DAMOYOLO-S惊艳效果案例集:多领域高难度场景检测展示
DAMOYOLO-S惊艳效果案例集:多领域高难度场景检测展示 今天咱们不聊枯燥的理论和复杂的部署,直接来看点“硬货”。如果你正在寻找一个能在各种刁钻场景下都表现稳定的目标检测模型,那么DAMOYOLO-S绝对值得你花几分钟了解一下。它不是什么新概…...
从一篇TIE论文的稳定性分析入手,手把手复现Bode图判据的MATLAB实现
从TIE论文案例到MATLAB实践:Bode图判据的稳定性分析全解析 在电力电子系统设计中,LCL型并网逆变器的稳定性分析一直是工程师面临的挑战。2015年发表在IEEE Transactions on Industrial Electronics上的那篇经典论文,为我们提供了一个绝佳的研…...
暗黑3按键助手:一键解放双手的终极游戏伴侣 [特殊字符]
暗黑3按键助手:一键解放双手的终极游戏伴侣 🎮 【免费下载链接】D3keyHelper D3KeyHelper是一个有图形界面,可自定义配置的暗黑3鼠标宏工具。 项目地址: https://gitcode.com/gh_mirrors/d3/D3keyHelper 还在为暗黑3中复杂的技能连招和…...
AI辅助前端设计:让快马平台生成酷炫的滚动视差与3D交互效果代码
AI辅助前端设计:让快马平台生成酷炫的滚动视差与3D交互效果代码 最近在做一个科技公司的产品介绍页,想实现一些炫酷的交互效果来提升用户体验。传统方式需要手动编写大量CSS和JavaScript代码,调试起来也很耗时。不过现在有了AI辅助开发工具&…...
Tetrazine-NHBoc,cas:1380500-93-5,四嗪-氨基叔丁酯的结构特点
Tetrazine-NHBoc(四嗪-氨基叔丁酯)是一种结合了四嗪基团和N-叔丁氧羰基(NHBoc)保护基的有机化合物,以下是对其的详细介绍:一、基本信息中文名称:四嗪-氨基叔丁酯英文名称:Tetrazine-…...
大多数人手动给Agent加记忆 Meta HyperAgents却让AI自己发明了完整记忆系统
你是不是也这样造Agent:先搭好任务执行模块,再手动塞一个向量数据库或RAG当记忆,最后发现跨轮迭代时效果还是“每次从零开始”?性能没 compounding,跨任务迁移更是一团乱麻。明明AI已经能自我迭代了,为什么…...
车企携手Tech Soft 3D:基于 HOOPS 工具集打造Web端一体化工程可视化解决方案
随着汽车行业向智能化、电动化转型,整车研发体系正在发生深刻变化。围绕多平台架构、跨区域协同以及供应链一体化,企业对于工程数据的使用方式提出了更高要求——不仅要“能管理”,更要“能流动、能协同”。 为推动核心工程系统向浏览器化、…...
如何彻底解决ComfyUI-Manager安装难题:终极完整指南
如何彻底解决ComfyUI-Manager安装难题:终极完整指南 【免费下载链接】ComfyUI-Manager ComfyUI-Manager is an extension designed to enhance the usability of ComfyUI. It offers management functions to install, remove, disable, and enable various custom …...
Pixel Script Temple 数学建模辅助:将MATLAB算法思路转换为Python代码
Pixel Script Temple 数学建模辅助:将MATLAB算法思路转换为Python代码 1. 为什么需要MATLAB到Python的代码转换 在科研和工程领域,MATLAB长期以来一直是数学建模和科学计算的首选工具。但随着Python生态系统的成熟,越来越多的团队开始转向使…...
从make clean到build.prop:揭秘Android系统属性生成的完整链条
从make clean到build.prop:揭秘Android系统属性生成的完整链条 当你通过adb shell getprop ro.build.display.id查看设备版本号时,是否好奇过这个字符串背后的生成逻辑?在Android编译系统中,从Makefile执行到最终生成build.prop文…...
