jquery：iphone「幻燈片解鎖」

我想創建一個jQuery腳本，其工作方式就像iphones的「幻燈片解鎖」欄。我想有2個div，容器和滑塊。我希望能夠將滑塊拖到右側，當滑塊到達容器的右側時，讓它做一些事情。jquery：iphone「幻燈片解鎖」

我不想使用jqueryUI來做這件事，那個庫太臃腫了，我已經看到了其他一些拖放腳本，但是很多我已經嘗試過的腳本完全失敗了，所以現在我回到步驟1，想知道是否有一種非常簡單的方式來拖動div，當它到達它的容器的右側時，「做某件事」。

我真的很感謝任何幫助，我認爲我的頭髮正在脫落。 nick

來源

2009-11-24 ExodusNicholas

你應該能夠找到一箇舊的（預jQueryUI的）jQuery的滑塊插件。 – 2009-11-24 22:51:57

我建議使用一個庫，它已經做了你要找的東西，就實際滑動一個對象而言。

jquery UI

這是當然的了jQuery UI庫的鏈接。但是，大多數UI（用戶界面）庫都具有滑動對象的功能，因此請選擇您最熟悉的那一個。如果你不熟悉，我會建議你做一些研究。

JQuery庫應該可以讓您滑動對象並檢查幻燈片對象的值，以便您知道何時運行您的鎖定/解鎖腳本。如前所述，雖然，我相信大多數其他圖書館會給你相同的能力。

來源

2009-11-24 23:41:05 MillsJROSS

你知道任何可以拖放的Jquery腳本，大小爲10kb或更小嗎？儘管如此，我更喜歡5kb或更小。 jQuery UI的大小是可笑的。 – ExodusNicholas 2009-11-25 00:27:42

不是我的頭頂，我建議通過jqueryplugins看看是否找不到輕量級選項。但是，輕量級不一定對應於跨瀏覽器的實現，或者經過良好測試的代碼。 – MillsJROSS 2009-11-25 14:44:26

那麼，您可以附加到mousedown事件，然後在mousemove上設置div的位置爲鼠標的位置（由原始偏移量抵消），直到mouseup（恢復到原始位置）或充分向右「做某事」。聽起來很簡單嗎？

來源

2009-11-24 22:37:46 McKay

所以我知道這篇文章是真的很老，但我試圖執行McKay提出的解決方案。我對jquery非常陌生，所以不要爲此而烤我：D也許有人對我如何才能使這個工作有所暗示。

編輯：哦，我也在這個使用jQuery UI的解決方案。

$(".slider-handle").mousedown(function() { 
 
\t $(".slider-handle").on("mousemove", function(){ 
 
\t \t $(".slider-handle").css("margin-left" === "event.pageX" + "px"); 
 
\t }); 
 
});

.unlock-slider { 
 
    background: #d1d1d1; 
 
    width: 300px; 
 
    height: 50px; 
 
    position:relative; 
 
} 
 

 
.slider-handle { 
 
    height: 70px; 
 
    width: 70px; 
 
    border-radius: 50%; 
 
    background: tomato; 
 
    position: absolute; 
 
    z-index: 10; 
 
}

<div class="slider-wrapper"> 
 
<div class="unlock-slider"> 
 
    <div class="slider-handle"> 
 
    </div> 
 
</div> 
 
</div>

來源

2017-11-25 17:57:57 Moheri

jquery：iphone「幻燈片解鎖」

回答

相關問題