前端面试项目细节重难点(十)(已工作|做分享)

面试官:现场出需求:我想让一个左侧盒子可以进行拉伸、缩小、展示或隐藏这些功能,你会如何实现?

答:(1)分析问题:其实,我听到这个问题后:

我的第一种想法:搜索以前项目经验过程中有没有是实现类似需求,那确实没有做过。

我的第二个想法:想一想有没有什么插件可以是西安该功能,我以前确实用到过一个drag可拖拽的插件,好像不符合需求。

我的第三个想法:自己先分析这个业务场景,然后根据该分析使用代码是实现该功能。【便于大家理解需求,还是附上一张原型图】

afc719cb48fb4ba1abbe1d475520cd51.png

 

(2)业务功能分析:

拉伸、缩小功能:用户拉动右侧拉伸杠时的步骤分析:用户在拉伸杠上按下鼠标->用户在页面上左右移动鼠标->用户在页面某一个位置手指从鼠标按钮上抬起,停止移动

展示、隐藏功能:用户点击右侧蓝色按钮时的步骤分析:用户点击蓝色按钮:如果盒子展示,则将盒子收起;如果盒子收起,则将盒子展开。

(3)代码逻辑分析:

拉伸、缩小功能:

第一个处理逻辑:在拉伸杠上绑定鼠标按下事件,即mousedown

第二个处理逻辑:在页面上触发鼠标移动事件,即mousemove

第三个处理逻辑:在页面上触发鼠标停下事件,即mouseup

展示、隐藏功能:在蓝色按钮上绑定点击事件,控制盒子的显隐

(4)代码实现:【代码逻辑和重点内容已在代码中进行备注,大家仔细看看】

ac19805fbca24a11a532fba986c7c97e.png

da49ce83c1a04d39a9d166e708b03b11.png 

911576e7731f4c94a1415aa921eb0b50.png 

73890aa8aa6c45b4a5252aa3d8c9220a.png 

9bbdf0e8898e495a99305f37b6671c66.png 

a3efe426df2349998ffb2df19a3e8091.png 

(5)知识点运用:你能区分event.clientX、ref.$el.getBoundingClientRect()和document.body.offsetWidth?

ebaa992e0814479184506286c7954f23.png 

附上两张图片帮助你们理解:

595be1ca79854cca9f7ec9578f38be44.png

781559cac7fe4183abadc129c0708e2a.png 

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/41050.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Linux关于文件的高级命令

tree命令 tree命令用于以树状图的形式显示目录结构。它可以帮助用户快速了解目录和文件的层次关系,非常适合用于浏览和理解大型文件系统的结构。 基础用法 显示当前目录的树状结构:tree 显示指定目录的树状结构:tree 指定目录路径 tree命…

基于FreeRTOS+STM32CubeMX+LCD1602+AD5621(SPI接口)的DAC控制输出Proteus仿真

一、仿真原理图: 二、运行效果: 三、STM32CubeMX配置: 1)、GPIO配置: 2)、freertos配置: 四、软件部分: 1)、main主函数: /* USER CODE BEGIN Header */ /** ****************************************************************************** * @file …

模拟5亿年自然进化史,全新蛋白质大模型ESM3诞生!前Meta老将力作LeCun转赞

模拟5亿年自然进化史,全新蛋白质大模型ESM3诞生!前Meta老将力作LeCun转赞。 能抗衡AlphaFold 3的生命科学大模型终于出现了。初创公司Evolutionary Scale AI发布了他们最新的98B参数蛋白质语言模型ESM3。不仅支持序列、结构、功能的all-to-all推理&#…

【动态规划】动态规划一

动态规划一 1.第 N 个泰波那契数2.面试题 08.01. 三步问题3.使用最小花费爬楼梯4.解码方法 点赞👍👍收藏🌟🌟关注💖💖 你的支持是对我最大的鼓励,我们一起努力吧!😃😃 1.…

[k8s生产系列]:k8s集群故障恢复,etcd数据不一致,kubernetes集群异常

文章目录 摘要1 背景说明2 故障排查2.1 查询docker与kubelet状态2.2 查看kubelet服务日志2.3 重启docker与kubelet服务2.3.1 首先kubelet启动起来了,但是报错master节点找不到2.3.2 查询kubernetes集群服务,发现etcd与kube-apiserver均启动异常 2.4 etcd…

【Pyhton】读取寄存器数据到MySQL数据库

目录 步骤 modsim32软件配置 Navicat for MySQL 代码实现 步骤 安装必要的库:确保安装了pymodbus和pymysql。 配置Modbus连接:设置Modbus从站的IP地址、端口(对于TCP)或串行通信参数(对于RTU)。 连接M…

公用对象池

什么是对象池? 对象池顾名思义就是存放对象的池子,主要是为了重复利用对象。将不用的对象扔进池子里,需要用的时候再从池子中取出来。这样的一套机制我们称为对象池。 为什么用对象池? 其实从定义我们就可以看出来,…

算法金 | 我最常用的两个数据可视化软件,强烈推荐

大侠幸会,在下全网同名「算法金」 0 基础转 AI 上岸,多个算法赛 Top 「日更万日,让更多人享受智能乐趣」 抱个拳,送个礼 预警:今天文章的描述可能会让你有点别扭;如感到不适,请及时停止 在我行…

MacOS 安装 mtr 网络检测工具

Install sudo brew install mtr sudo chown root $(which mtr) sudo chmod us $(which mtr) sudo chown root $(which mtr-packet) sudo chmod us $(which mtr-packet) Test mtr google.com

C# WPF 3D 数据孪生 系列六

数字孪生应用开发 应用开发中的布局需求 Grid基本使用 WPF 3D绘图 点云 系列五-CSDN博客 WPF UI 3D 多轴 机械臂 stl 模型UI交互-CSDN博客 WPF UI 3D 基本概念 点线三角面 相机对象 材质对象与贴图 3D地球 光源 变形处理 动作交互 辅助交互插件 系列三-CSDN博客 数字孪生 介…

015-GeoGebra基础篇-定点旋转物体、动态显示数值并显示运动轨迹

这可能是我能想到的最大概率可以被你搜索到的标题了,容我先喘口气~ 目录 一、成品展示二、涉及内容三、做图步骤(1)绘制三角形t(2)建立定点D(3)制作角度滑动条(4)图形绕点…

嵌入式Linux系统编程 — 6.7 实时信号

目录 1 什么是实时信号 2 sigqueue函数 3 sigpending()函数 1 什么是实时信号 等待信号集只是一个掩码,它并不追踪信号的发生次数。这意味着,如果相同的信号在被阻塞的状态下多次产生,它只会在信号集中被记录一次,并且在信号集…

Windows 下用MSYS2 环境为RP2040 编译MicroPython 固件

就是想试试看MSYS2 能兼容到什么地步。自己做了个RP2040 板子,用了4MB 的Flash,默认的Micropython 固件是2MB 的,所以只能自己编译固件。 编译环境 MSYS2 的安装方法、基本配置什么的我就不管了,到处都有文章介绍这个。只提一点…

mac视频压缩简单办法,mac如何把视频压缩到指定大小内存

在数字时代,视频已成为我们日常生活和工作的重要交流工具。然而,视频文件体积庞大,给存储和分享带来了不少困扰。本文将为你揭秘视频压缩的秘密,让你轻松减小视频文件体积,提升分享效率! 方法一下载文件压缩…

Vue3实现过渡动画

认识动画 在开发中,我们想要给一个组件的显示和消失添加某种过渡动画,可以很好的增加用户体验: React框架本身并没有提供任何动画相关的API,所以在React中使用过渡动画我们需要使用一个第三方库 react-transition-group&#xf…

【高中数学/极值问题】一条长为L的绳子,一面靠墙,另外三边组成矩形,问此矩形最大面积能是多少?

【问题】 一条长为L的绳子,一面靠墙,另外三边组成矩形,问此矩形最大面积能是多少? 【示意图】 【解析式】 设垂直于墙的两边长为x,则墙对边长为L-2x,围成的矩形面积Sx(L-2x) 写成标准的解析式为yx(L-2…

本地Windows电脑 连接 Windows 服务器

Windows电脑 连接 Windows 服务器 方式1:直接搜索 在电脑的搜索栏,输入“远程桌面连接” 可以选择点击 “打开” 或者直接按 回车键 “Enter”,打开 远程桌面连接 方式2:运行框打开服务器连接 同时按:Windows徽标键…

java+springboot+Mysql“友书”综合书籍平台系统24489-计算机毕业设计项目选题推荐(附源码)

摘 要 随着科学技术的飞速发展,社会的方方面面、各行各业都在努力与现代的先进技术接轨,通过科技手段来提高自身的优势,“友书”综合书籍平台当然也不能排除在外。“友书”综合书籍平台系统是以实际运用为开发背景,运用软件工程原…

搜维尔科技:详谈ART的工具追踪技术

您的生产流程中是否已经受益于刀具跟踪系统?您是否意识到它们的价值?因为它们可以优化您的装配顺序,从而节省您的时间和金钱。 目前我们提供两种工具跟踪解决方案: 1.ART与 VERPOSE的解决方案——易于使用的图像识别 安装在工…

UE5 05-利用 timeline 插值运动

理解成 unity Dotween DoMove 插值运动即可 AddTimeLine 节点 物体插值运动 物体插值缩放 一个timeline 可以K多个动画帧