js實現滑鼠拖動滾動的小案例

前言：

正文:

對於以上的效果，我們可以先來分析下，涉及的事件有滑鼠按下（onmousedown），滑鼠移動onmousemove)，滑鼠釋放(onmouseup)，滑鼠滑動(onmousewheel)

那麼我們可以想一想：當滑鼠按下的時候，我們是不是可以觸發開關，讓內容睡著滑塊移動，當滑鼠釋放的時候，關閉開關。則內容也暫停移動。

好了，下面我們來看下**：

html:

class
="line_div"
>
//軌道
class
="hua_div"
>
div>
//滑塊
div>
css:
.line_div
.hua_div

js:

var line = document.
queryselector
('.line_div');
//獲取進度條
var hua = document.
queryselector
('.hua_div');
//滑塊
var _status =
false
;//狀態開關

好了，我們已經設定過開關flag了，那麼根據上面的要求，我們可以在滑鼠按下的時候觸發開關，滑鼠釋放的時候關閉開關。

var
start
=function
(ev)
varover
=function
(ev)

那麼，我們知道開關開啟後，我們是不是就可以拖動滑塊來實現我們想要的效果了，那麼大家想一想怎樣讓滑塊跟著我們的滑鼠移動而移動，從而實現拖動的效果呢？是不是只需要讓滑鼠到距離減去滑塊到頁面的距離就可以了呢，沒錯，這個差值就是滑塊需要移動的距離那麼我們該如何求這個差值呢，不要著急，我們一步一步來，先來求滑塊距離頁面的距離。下面我先放下**。這部分**用來求滑塊到頁面的距離：

// 獲取長條距離方法
function
getposition
(node)
return
}

如果getposition（）函式裡傳入的是軌道元素。那麼我們首先就獲得了軌道line距離頁面的左距離以及上距離。而 var current = node.offsetparent;//獲取離node最近的開啟定位的元素，這裡我們獲取的是滑塊hua元素。那麼left += current.offsetleft;我們就獲得了滑塊+軌道的距離，也就是說我們獲取了滑塊距離頁面的距離接下來我們就可以寫最核心的移動**了:

var
run=
function
(ev)
if(hualeft <0)
hua.style.left = hualeft +
"px"
;//設定滑塊的left距離
console.
log(hualeft);}
}

最後給滑鼠移動事件呼叫這個移動函式即可

window.
addeventlistener
('mousemove'
,run)
;

那麼到這裡我們就完成了滑塊的拖動,那麼如何滾動滑輪使得滑塊移動呢，其實我們只需要給軌道新增滑動事件onmousewheel事件即可，為什麼要給軌道新增而不是給滑塊新增呢。大家想一想如果滑塊新增，那麼當我們觸發滑動事件時，滑鼠的位置是不是要一直位於滑塊上才可以。這樣做並不方便。那麼如果我們給軌道新增滑動事件，這樣滑鼠只要位於軌道上就可以觸發滑動事件，從而使得滑塊移動。

// 滑鼠滾動
var index =0;
line.
addeventlistener
('mousewheel'
,function
(ev)
if(e.wheeldelta <0)
})

如果大家對於滑動事件的wheeldelta引數不了解得話可以去查一下，這裡博主就不過多介紹了。這裡呢博主採取得是每次移動20畫素，如果有其他需要得小夥伴可自行在滑輪事件裡新增自己想要實現得功能。好了，下面放一下完整版**:

拖動練習title

js實現滑鼠拖動滾動的小案例

C panel控制項實現滑鼠滾輪滾動拖動滾動條

使用js實現滑鼠拖動乙個盒子移動的例項

js的小案例的實現效果學習筆記

js實現滑鼠拖動 滾動的小案例

C panel控制項實現滑鼠滾輪滾動拖動滾動條

使用js實現滑鼠拖動乙個盒子移動的例項

js的小案例的實現效果學習筆記

相關推薦

js實現滑鼠拖動滾動的小案例