PC端的滑鼠拖拽滑動

2022-07-21 04:42:12 字數 1495 閱讀 7852

1、滑塊拖拽

html：

"


div1


">
js：

2、滑鼠滑動滑塊


html


class="


box">


css


*


.box 


.drag 


.drag li


js


$(document).ready(function()


$(".drag


").css();


$(".drag


").mousedown(function(e)); 


$(document).mousemove(function(e)); 


if(x>0


)); 


return


false


; }


console.log(x,distansr);


if(x


console.log(


"不能在右滑啦")


return


false


; }


$(".drag


").css();


} }).mouseup(function()); 


})
應用場景實現進度區域的滑動，下面時間軸跟著顯示相應的時間點，點選時間軸，進度條跟著展示相應的區域！！


3、滑動滑塊，切換頁面


css：


*


.linediv 


.linediv .mindiv 


.linediv .mindiv .vals 


.linediv .mindiv .vals:after 


.scroll-box


.scroll-box ul 


.scroll-box li 


html：


class="


scroll-box


" id="


scroll-box


">


"linediv


"class="


linediv


">


"mindiv


"class="


mindiv


">


"vals


"class="


vals


">0


js：


 
react 拖拽元件（PC端）
簡單封裝了下 import react from react const addevent el,event,handler else if el.addeventlistener else const removeevent el,event,handler else if el.removeev...


元素可拖拽（移動端與pc端）
專案中經常遇到這種需求，特此記錄下 css部分 html部分 js部分 這裡分了兩種情況，因為pc端與移動端的處理情況有點不太一樣 1 pc端 const winw window.innerwidth const winh window.innerheight const target docume...


移動端觸屏滑動拖拽
移動端觸屏滑動的效果其實就是輪播，在pc的頁面上很好實現，繫結click和mouseover等事件來完成。但是在移動裝置上，要實現這種輪播的效果，就需要用到核心的touch事件。處理touch事件能跟蹤到螢幕滑動的每根手指。以下是四種touch事件 touchstart 手指放到螢幕上時觸發 tou...