水平和垂直雙向觸摸滑動滑塊

有很多JavaScript或CSS觸摸滑動滑塊，但它們都似乎只允許垂直或水平滑動滑動。那裏有什麼東西可以放在一張幻燈片上，所以我可以在一張幻燈片上水平和垂直滑動？水平和垂直雙向觸摸滑動滑塊

2012-10-24 iwek

任何這方面的更新？你有沒有發現這種行爲的任何滑塊？ – briler

@briler我立即想到了[idangero.us swiper]（http://www.idangero.us/sliders/swiper/），但是在答案中已經提到了這一點。你能更詳細地描述你需要什麼嗎？我無法概念化你正在尋找的東西。謝謝。 –

我不是100％肯定，如果這是你在找什麼，但看起來織補接近：

iDangero.us組隊，探索。

http://www.idangero.us/sliders/swiper/

允許另一水平圓盤傳送帶/滑內垂直swping框。我一直在尋找同樣的東西，這是我發現的最接近的插件。有點黑客/操縱可能會使它做你想要的。

來源

2012-10-26 16:58:06

謝謝，這實際上是我開始的，但它只支持/或不支持水平和垂直滑動在一張幻燈片上。 – iwek

不錯！它會有觸摸行爲（點擊，雙擊等），它會絕對完美！ – Ben

如this demo page所示，您可以使用fullPage.js完全按照您的描述進行滑動操作。

我與fullPage.js唯一的問題是缺乏1：1的觸摸運動。因此，只要您將手指放在屏幕上，就不必控制滑動，腳本具有一個可配置的變量，表示一旦滿足了屏幕高度/寬度的百分之X的閾值滑動。這種方法很有效，但並不像RoyalSlider那樣有1：1的觸摸動作;所以如果你只用49％的方式在同一部分上進行滑動。這就是說fullPage.js有很好的支持（IE8 +）並定期更新。

理想情況下，我希望fullPage.js爲have 1:1 touch movement，作者可以提出請求，但現在我對JavaScript的知識太過基本，無法實現這樣的功能。

我正在考慮的一個選項是使用兩個滑塊相互組合。我將使用RoyalSlider進行左右滑動（因此您可以獲得1：1的良好觸摸效果），並使用fullPage.js進行垂直向上效果。

來源

2014-03-05 12:50:07 patrickzdb

這裏是clreating水平和垂直滑塊

<script> 
function MM_effectSlide1(targetElement, duration, to, from, slide, toggle) 
{ 
    Spry.Effect.DoSlide(targetElement, {duration: duration, to: to, from: from, horizontal: true, toggle: true}); 
} 
function MM_effectSlide2(targetElement, duration, to, from, slide, toggle) 
{ 
    Spry.Effect.DoSlide(targetElement, {duration: duration, to: to, from: from, horizontal: false, toggle: true}); 
} 
</script> 

<body> 
    <div id="socialmedia" class="socialcontainer" onclick="MM_effectSlide1('socialmedia', 1000, '100%', '11%', true, true)"></div>

的一個簡單的方法。如果你看一下代碼，應該改變的是MM_effectSlide1，2，3只有代碼，等等

來源

2014-12-23 09:47:23 andre

水平和垂直雙向觸摸滑動滑塊

回答

相關問題