jQuery - Div follow touchmove/mousemove + autoalign

Question

我想在我的jQuery腳本中做一個非常簡單的函數。當手指/光標觸摸/點擊屏幕時，我希望頁面隨着手指/光標的移動而水平滑動。我知道有很多人創建了很多插件，但我真的不需要其他人的解決方案。該圖像是我的HTML外觀的可視化視圖。它非常簡單。

jQuery sciprt顯然是不正確的，但我希望它會給你一個我需要的簡單功能的想法。我沒有額外的類或淡入淡出功能或任何東西。

$(document).live('touchmove' or 'mousemove', function() { 
    $('div[class=page_*], div[class=page_^]').[follow movements horizontally, and auto align to nearest edge when let go.]; 
}); 

此外，我希望能夠做同樣的一個大格，所以大概元素移動的寬度可變應該等於$(window).width();。其實我認爲這將是最好的主意。我總是可以將更多的內容放在大分區中，並將其放大，所以請保持這一點。它應該更簡單，只專注於一個元素。

Answer 1

所以，這裏是我的解決方案。我做了一些改變，現在你可以有3頁以上的內容。 另外，我已經定義了一個名爲的閾值設置爲一頁的一半。如果你想有一個大於或小於頁面大小的閾值，你將不得不作出更多的改變。

HTML代碼：

<div class="container"> 
    <div class="wrap"> 
     <div class="page page1"></div> 
     <div class="page page2"></div> 
     <div class="page page3"></div> 
     <div class="page page4"></div> 
    </div> 
</div> 

CSS代碼：

.container, .page, .wrap { 
    width: 300px; 
    height: 400px; 
} 
.container { 
    background: #efefef; 
    box-shadow: 0px 0px 10px black; 
    overflow: hidden; 
    position: relative; 
    margin: 5px auto; 
} 
.wrap { 
    width: 1200px; 
    position: absolute; 
    top: 0; 
    left: 0; 
} 
.page { 
    float: left; 
    display: block; 
    -moz-user-select: none; 
    -khtml-user-select: none; 
    -webkit-user-select: none; 
    -o-user-select: none; 
} 
.page1 { 
    background: yellow; 
} 
.page2 { 
    background: green; 
} 
.page3 { 
    background: blue; 
} 
.page4 { 
    background: red; 
} 

至於CSS代碼記住，如果你想改變頁面大小，你也會必須更換容器和包裝 siz即

JS代碼：

var mouseDown = false, right; 
var xi, xf, leftX = 0; 
var nPages = $(".page").size(); 
var pageSize = $(".page").width(); 
var threshold = pageSize/2; 
var currentPage = 0; 

$(".container").on("mousedown", function (e) { 
    mouseDown = true; 
    xi = e.pageX; 
}); 

$(".container").on("mouseup", function (e) { 
    if (mouseDown) { 
     mouseDown = false; 
     xf = e.pageX; 
     leftX = parseInt($(".wrap").css("left").split("px")[0]); 
     if ((e.pageX - xi) < -threshold || (e.pageX - xi) > threshold) { 
      setFocusedPage(); 
     } else { 
      restore(); 
     } 
    } 
}); 

$(".container").on("mouseleave", function (e) { 
    if (mouseDown) { 
     mouseDown = false; 
     xf = e.pageX; 
     leftX = parseInt($(".wrap").css("left").split("px")[0]); 
     if ((e.pageX - xi) < -threshold || (e.pageX - xi) > threshold) { 
      setFocusedPage(); 
     } else { 
      restore(); 
     } 
    } 
}); 

$(".container").on("mousemove", function (e) { 
    if (mouseDown) { 
     $(".wrap").css({ 
      "left": (leftX + (e.pageX - xi)) 
     }); 
     right = ((e.pageX - xi) < 0) ? true : false; 
    } 
}); 

function restore() { 
    $(".wrap").stop().animate({ 
     "left": -(currentPage * pageSize) 
    }, 200, function() { 
     leftX = parseInt($(".wrap").css("left").split("px")[0]); 
    }); 
} 

function setFocusedPage() { 
    if (leftX >= (-threshold)) { // First Page 
     currentPage = 0; 
    } else if (leftX < (-threshold) && leftX >= (-(nPages + 1) * threshold)) { // Second to N-1 Page 
     (right) ? currentPage++ : currentPage--; 
    } else if (leftX < -((nPages + 1) * threshold)) { // Third Page 
     currentPage = nPages - 1; 
    } 
    $(".wrap").stop().animate({ 
     "left": -(currentPage * pageSize) 
    }, 200, function() { 
     leftX = parseInt($(".wrap").css("left").split("px")[0]); 
    }); 
} 

記住這裏，如果你想有一個不同的門檻你將不得不做出一些改變尤其是在setFocusedPage()功能。

這是我最後的DEMO