javascript - jQuery - Div 跟随 touchmove/mousemove + autoalign

Question

我想在我的 jQuery 脚本中创建一个非常简单的函数。当手指/光标触摸/点击屏幕时，我希望页面跟随手指/光标的移动水平滑动。我知道有很多人创建了很多插件，但我真的不需要其他人的解决方案。该图像是我的 HTML 外观的直观 View 。这真的很简单。

jQuery sciprt 显然不正确，但我希望它能让您了解我需要的简单函数。我没有额外的类(class)或淡入淡出功能或任何东西。

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

此外，我希望能够对一个大的 div 执行相同的操作，因此元素移动的宽度变量可能应该等于 $(window).width();。事实上，我认为那将是最好的主意。我总是可以在大 div 中放入更多内容并使其变大，所以请保留它。它应该更简单，只关注一个元素。

Answer 1

所以，这是我的解决方案。我做了一些更改，现在您可以拥有 3 个以上的页面。此外，我定义了一个名为 threshold 的变量，设置为页面的一半。如果您希望阈值大于或小于页面的 hakf，则必须进行更多更改。

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 代码，请记住，如果您想更改页面 大小，您还必须更改container 和wrap 尺寸。

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