http://cx-4.faw-mazda.com
大佬們 我想問一下馬自達官網這個效果是怎么實作的 我把原始碼下載下來也不好使 效果只能是這樣的 中間拖動不了
uj5u.com熱心網友回復：
這個就是2張圖片而已，一張底部一張遮罩，拖動的時候是遮罩的改變而已，就是一個控制顯示多少寬度而已uj5u.com熱心網友回復：
就是很疑惑 我的遮罩拖動不了??
uj5u.com熱心網友回復：
3個元素，兩個重疊的div，一個可以操作的div，兩個元素，重疊固定，設定不同的背景，上面的div我們叫他動吧。
可操作性div，后面我們叫他操吧。
把操放在動里面設定到最右邊。
html設定完畢，下來說js
給操添加一個事件onmousedown，動作內容為e=>{}，在這個動作中，e有個屬性叫pageX，表示點擊時滑鼠的水平位置。
然后再這個操的動作里再加入一個事件onmousemove，事件主體是window或者document都可以，動作內容為x=>{}，這個x也有個屬性pageX，表示當前的滑鼠的水平位置
好了，從點擊操到移動操我們得到了兩個水平位置，然后計算他們兩個的差，通過這個差值改變動的寬度。
收工~~~~
uj5u.com熱心網友回復：
爬取別人代碼不一定可以，因為有些東西不全，所以還是要修改一下，你可以去看看滑鼠移動事件 mouse事件，搜索一下看看api你就會了
uj5u.com熱心網友回復：
這個滑動的js原始碼在這里https://wwwcdn.faw-mazda.com/cx4/fer/fan/cx4.js?bust=1592817859857， 打開它，然后搜索“cx4_03c_after”
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/35362.html
標籤：HTML(CSS)