求助马自达官网这个效果是怎么实现的万分感谢大佬们

Xjx. 2020-06-17 07:52:02

http://cx-4.faw-mazda.com

大佬们我想问一下马自达官网这个效果是怎么实现的我把源码下载下来也不好使效果只能是这样的中间拖动不了

...全文

6581 5 打赏收藏转发到动态举报

写回复

用AI写文章

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

大然然 2020-06-22

打赏
举报

这个滑动的js源码在这里 https://wwwcdn.faw-mazda.com/cx4/fer/fan/cx4.js?bust=1592817859857，打开它，然后搜索“cx4_03c_after”

Xjx. 2020-06-18

打赏
举报

引用 1 楼前端_小菜鸟的回复:

这个就是2张图片而已，一张底部一张遮罩，拖动的时候是遮罩的改变而已，就是一个控制显示多少宽度而已

就是很疑惑我的遮罩拖动不了😥

前端_小菜鸟 2020-06-18

打赏
举报

这个就是2张图片而已，一张底部一张遮罩，拖动的时候是遮罩的改变而已，就是一个控制显示多少宽度而已

前端_小菜鸟 2020-06-18

打赏
举报

引用 2 楼 Xjx. 的回复:

[quote=引用 1 楼前端_小菜鸟的回复:]这个就是2张图片而已，一张底部一张遮罩，拖动的时候是遮罩的改变而已，就是一个控制显示多少宽度而已

就是很疑惑我的遮罩拖动不了[/quote] 爬取别人代码不一定可以，因为有些东西不全，所以还是要修改一下，你可以去看看鼠标移动事件 mouse事件，搜索一下看看api你就会了

chinaskysun 2020-06-18

打赏
举报

3个元素，两个重叠的div，一个可以操作的div，两个元素，重叠固定，设置不同的背景，上面的div我们叫他动吧。可操作性div，后面我们叫他操吧。把操放在动里面设置到最右边。 html设置完毕，下来说js 给操添加一个事件onmousedown，动作内容为e=>{}，在这个动作中，e有个属性叫pageX，表示点击时鼠标的水平位置。然后再这个操的动作里再加入一个事件onmousemove，事件主体是window或者document都可以，动作内容为x=>{}，这个x也有个属性pageX，表示当前的鼠标的水平位置好了，从点击操到移动操我们得到了两个水平位置，然后计算他们两个的差，通过这个差值改变动的宽度。收工~~~~

简历合适可直推面试！外企是市场销售管培生，氛围特别好，很适合我的性格（活跃喜欢新事物爱跟人交流），工作时长也短，年假病假多，轮岗期间18w一年，定岗后大概有23w，基础工资12k，友友们，不知道怎么选，恒生的三方还在流程中，零跑的也打电话过来了，相对来说零跑薪资高点，一个是偏向数据库的软件测试，一个是从未接触过的车载测试，怎么选呀，要不要。选择1公司只有8人，包宿舍选择2薪资低没补贴996，小组只有3人，没技术，不过组里员工说缺人不裁人选择3 955不加班，薪资太低选择4 加班挺多，技术可以，98。

E，F挺有意思的，只是仅仅看着。211本，目前手上两个offer，理想的技术项目工程师，了解到是供应商质量岗，基本工作就在出差，薪资1.4—1.7w，信维的硬件岗，薪资1.1w十三薪，base。双非本，2硕面试很简单，两轮面试很快就oc了加上各类补贴，总包20w，加班严重，无加班费给了很长时间的考虑时间，最终还是决定拒了，留给有需要的人#24届软件开发。双9机械硕士，工作地点想去苏州，线上投了70家苏州企业，就6个岗位获得了面试机会(一半都是很小的公司)，拿到1个很一般的offer，剩下的全部没动静。

下载方式：https://pan.quark.cn/s/a4b39357ea24 布线问题（分支限界算法）是计算机科学和电子工程领域中一个广为人知的议题，它主要探讨如何在印刷电路板上定位两个节点间最短的连接路径。在这一议题中，电路板被构建为一个包含 n×m 个方格的矩阵，每个方格能够被界定为可通行或不可通行，其核心任务是定位从初始点到最终点的最短路径。分支限界算法是处理布线问题的一种常用策略。该算法与回溯法有相似之处，但存在差异，分支限界法仅需获取满足约束条件的一个最优路径，并按照广度优先或最小成本优先的原则来探索解空间树。树 T 被构建为子集树或排列树，在探索过程中，每个节点仅被赋予一次成为扩展节点的机会，且会一次性生成其全部子节点。针对布线问题的解决，队列式分支限界法可以被采用。从起始位置 a 出发，将其设定为首个扩展节点，并将与该扩展节点相邻且可通行的方格加入至活跃节点队列中，将这些方格标记为 1，即从起始方格 a 到这些方格的距离为 1。随后，从活跃节点队列中提取队首节点作为下一个扩展节点，并将与当前扩展节点相邻且未标记的方格标记为 2，随后将这些方格存入活跃节点队列。这一过程将持续进行，直至算法探测到目标方格 b 或活跃节点队列为空。在实现上述算法时，必须定义一个类 Position 来表征电路板上方格的位置，其成员 row 和 col 分别指示方格所在的行和列。在方格位置上，布线能够沿右、下、左、上四个方向展开。这四个方向的移动分别被记为 0、1、2、3。下述表格中，offset[i].row 和 offset[i].col（i=0,1,2,3）分别提供了沿这四个方向前进 1 步相对于当前方格的相对位移。在 Java 编程语言中，可以使用二维数组...

先看效果： https://pan.quark.cn/s/03f8ba0ff118 ### FPGA开发板设计相关知识要点#### 1. FPGA基本概念- **定义**: 现场可编程门阵列（Field Programmable Gate Array, FPGA）属于半定制型集成电路，允许在完成制造后通过编程来设定其内部逻辑及连接配置，从而达成特定的功能实现。- **特性**: - 运行速度快 - 功耗相对较低 - 适用于复杂系统构建 - 可在现场进行重新编程- **应用范畴**: - 通信领域 - 自动控制系统 - 信息处理技术 - 数据加密方案 - 视频处理技术 - 车载电子系统 - 医疗器械设备等#### 2. EP1C3T144C8芯片介绍- **生产商**: Altera Corporation（现归属于Intel公司）- **系列归属**: Cyclone系列- **技术工艺**: 1.5V核心供电电压，采用0.13微米制造工艺- **资源参数**: - 包含2910个逻辑单元（LEs） - 提供高达59904位的嵌入式存储器 - 支持单个PLL（Phase Locked Loop，锁相环） - 最多可支持104个用户I/O接口- **优点**: - 价格经济 - 集成度高 - 片上资源丰富 - 灵活性强#### 3. 硬件电路设计原理##### 3.1 硬件电路整体构造- **构成部分**: - 下载电路: 负责将设计好的程序传送至FPGA中。 - 下载接口: 实现个人计算机与FPGA之间的数据交换。 - FPGA核心部件: EP1C3T144C8芯片。 - 电源电路: 提供必要的电源支持。 - 扩展接口: 用于连接各类传感器或扩展模块。###...

HIT-CSAPP2025大作业报告.doc