Javascript jQuery-Div follow touchmove/mousemove+；自动对齐_Javascript_Jquery_Html_Touch_Mousemove

Javascript jQuery-Div follow touchmove/mousemove+；自动对齐

javascript jquery html

Javascript jQuery-Div follow touchmove/mousemove+；自动对齐,javascript,jquery,html,touch,mousemove,Javascript,Jquery,Html,Touch,Mousemove,我想在jQuery脚本中创建一个非常简单的函数。当手指/光标触摸/点击屏幕时，我希望页面随着手指/光标的移动水平滑动。我知道有很多插件是由这么多人创建的，但我真的不需要其他人的解决方案。该图像是我的HTML外观的视觉视图。这真的很简单 jQuery sciprt显然是不正确的，但我希望它能让您了解我需要的简单函数。我没有额外的类或淡入淡出功能或任何东西 $(document).live('touchmove' or 'mousemove', function() { $('div[cla

我想在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里，让它变大，所以请保留它。它应该更简单，只关注一个元素
所以，这里是我的解决方案。我做了一些修改，现在你可以有超过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;
}

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

至于CSS代码，请记住，如果要更改页面的大小，还必须更改容器的大小
JS代码：
<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;
}

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

var mouseDown=false，右；
VaX席，XF，Leftx＝0；
var nPages=$（“.page”）.size（）；
var pageSize=$（“.page”）.width（）；
var阈值=页面大小/2；
var-currentPage=0；
$（“.container”）.on（“鼠标向下”，函数（e）{
mouseDown=true；
席= E.PaEX；
});
$（“.container”）。on（“mouseup”，函数（e）{
如果（鼠标向下）{
mouseDown=false；
xf=e.pageX；
leftX=parseInt（$（“.wrap”）.css（“left”）.split（“px”）[0]）；
如果（（e.pageX-xi）<-threshold | |（e.pageX-xi）>阈值）{
setFocusedPage（）；
}否则{
恢复（）；
}
}
});
$（“.container”）。在（“mouseleave”上，函数（e）{
如果（鼠标向下）{
mouseDown=false；
xf=e.pageX；
leftX=parseInt（$（“.wrap”）.css（“left”）.split（“px”）[0]）；
如果（（e.pageX-xi）<-threshold | |（e.pageX-xi）>阈值）{
setFocusedPage（）；
}否则{
恢复（）；
}
}
});
$（“.container”）。在（“mousemove”上，函数（e）{
如果（鼠标向下）{
$（“.wrap”）.css({
“左”：（leftX+（e.pageX-xi））
});
右=（（e.pageX-xi）<0）？真：假；
}
});
函数还原（）{
$（“.wrap”）.stop（）.animate({
“左”：-（当前页面*页面大小）
}，200，函数（）{
leftX=parseInt（$（“.wrap”）.css（“left”）.split（“px”）[0]）；
});
}
函数setFocusedPage（）{
如果（leftX>=（-threshold））{//第一页
currentPage=0；
}如果（leftX<（-threshold）和&leftX>=（（nPages+1）*threshold））{//第二个到N-1页
（右）？当前页面++：当前页面--；
}如果（leftX<-（（nPages+1）*阈值））{//第三页
currentPage=nPages-1；
}
$（“.wrap”）.stop（）.animate({
“左”：-（当前页面*页面大小）
}，200，函数（）{
leftX=parseInt（$（“.wrap”）.css（“left”）.split（“px”）[0]）；
});
}

请记住，如果需要不同的阈值，则必须进行一些更改，尤其是在setFocusedPage（）函数中
这是我最后一次
你的意思是这样吗：？没错！！^这是你做的吗？这正是我要找的。。有没有办法使setFocusedPage（）
函数对更改更开放？是的，我“很快”就完成了。当然，可以修改所有参数，但现在您必须手动在代码中搜索需要更改的值……无论如何，如果您需要任何帮助，请告诉我，我会尽力帮助您。这正是我想要的答案，谢谢Dim13i。我已经清理了你的代码，我希望它能帮助别人。