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.];
});

此外，我希望能够对一个大div做同样的事情，因此移动元素的宽度变量可能等于$(window).width();。实际上我认为这是最好的主意。我总是可以在更大的内容中添加更多内容并使其更大，所以请保持它。它应该更简单，只关注一个元素。

Answer 1

所以，这是我的解决方案。我做了一些更改，现在你可以有超过3页。另外，我已经将名为阈值的变量定义为页面的一半。如果您希望阈值大于或小于页面的hakf，则必须进行更多更改。

HTML CODE：

<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代码请记住，如果您想更改页面大小，您还必须更改容器和换行大小。

JS CODE：

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

jQuery - Div跟随touchmove / mousemove + autoalign

1 个答案: