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

また、1 つの大きな div で同じことができるようにしたいので、おそらく移動する要素の幅変数は に等しいはず$(window).width();です。実際、それが最善のアイデアだと思います。いつでも大きな div 内により多くのコンテンツを配置して大きくすることができるので、そのままにしておきます。1 つの要素のみに焦点を当てて、より簡単に実行できるようにする必要があります。

形

4

1 に答える 1

3

だから、ここに私の解決策があります。3 ページ以上のページを表示できるように、いくつかの変更を加えました。また、ページの半分に設定されたしきい値という名前の変数を定義しました。ページの 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 コードに関しては、ページサイズを変更する場合は、コンテナーとラップサイズも変更する必要があることに注意してください。

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()。

これが私の最後のデモです

于 2013-02-06T13:29:10.183 に答える