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

[Xjx.]

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

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

[chinaskysun]

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

[前端_小菜鸟]

引用 2 楼 Xjx. 的回复:

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

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

[前端_小菜鸟]

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

[Xjx.]

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

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

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

[大然然]

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