3

我想在我的 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();. 实际上，我认为这将是最好的主意。我总是可以在大 div 中放入更多内容并使其更大，所以保持它。它应该更简单，并且只关注一个元素。

数字

4

1 回答 1

3

所以，这是我的解决方案。我进行了一些更改，现在您可以拥有超过 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>

代码：

.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代码：

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

于 2013-02-06T13:29:10.183 回答