0

css3 を使用して、クリック時の背景画像の動きにトランジションを追加できるコードをいくつか書きました。私のコードは、「クリックすると、背景位置の x 値に 874px を追加する」と言っています。これは、アイテムにトランジションを追加するまで完全に機能します。これにより、ユーザーはトランジション中にクリックしてシーンを壊すことができるためです。ユーザーに 874px の倍数のみを表示してもらいたい。タイムアウトではなく、これを行うためのより良い方法はありますか? ユーザーが複数回クリックできるようにしたいのですが、最も近い 874px の倍数にしか到達できません。

それが理にかなっていることを願っています。助けてくれてありがとう。JSFIDDLE デモ

HTML

<div class="container">    
    <div class="decoration two"></div>
    <div class="decoration one"></div>

    <span id="btnPrev" class="prev">prev</span>
    <span id="btnNext" class="next">next</span>
</div>

JS

var btnPrev = $("#btnPrev");
var btnNext = $("#btnNext");

var decorationOne =$(".decoration.one");
var decorationTwo =$(".decoration.two");

$(function () {

    btnNext.click(function() {
        var DOG = decorationOne.css('background-position');
        var splat = DOG.replace(/[^-\d\. ]/g, '').split(" ");
        var new_values = [parseFloat(splat[0]) - 874 + "px", parseFloat(splat[1]) + 0 +"px"]; // x, y
        decorationOne.css('background-position', new_values.join(" "));

    });
    btnPrev.click(function() {
        var DOG = decorationOne.css('background-position');
        var splat = DOG.replace(/[^-\d\. ]/g, '').split(" ");
        var new_values = [parseFloat(splat[0]) + 874 + "px", parseFloat(splat[1]) + 0 +"px"]; // x, y
        decorationOne.css('background-position', new_values.join(" "));

    });
});

CSS

.container {
    background: none repeat scroll 0 0 #E7F3FF;
    border: 4px solid blue;
    border-radius: 16px 16px 16px 16px;
    box-shadow: 0 2px 2px rgba(1, 1, 1, 0.2);
    color: #054B98;
    height: 400px;
    margin: 35px 0 15px;
    overflow: hidden;
    position: relative;
    width: 874px;
}
.decoration {
    position: absolute;
}
.decoration.one {
    background: url("http://s22.postimg.org/ljly8r7tr/hills_1.png") repeat scroll left 0 transparent;
    bottom: 0;
    height: 500px;
    -webkit-transition: background-position 1s ease 0s;
    -moz-transition: background-position 1s ease 0s;
    transition: background-position 1s ease 0s;
    width: 2622px;
}
.decoration.two {
    background: blue;
    bottom: -180px;
    height: 472px;
    width: 5760px;
}
.prev {
    position: absolute;
    top: 50%;
    left: 20px;
}
.next {
    position: absolute;
    top: 50%;
    right: 20px;
}
4

1 に答える 1

1

イベントを利用しますanimationend(MDN https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations#Adding_the_animation_event_listeners )。animaitonend基本的に、アニメーションを開始するときに var を true に設定し、イベントによって false に戻されるまで再度実行しないでください。

誤解しました。background-position遷移の途中である可能性がある現在の値を使用するのではなく、インデックス変数を維持し、それに基づいて計算することができます。クリック イベントは、20 分後に発生したとしても、常に index 変数にアクセスできます。

var btnPrev = $("#btnPrev");
var btnNext = $("#btnNext");

var decorationOne =$(".decoration.one");
var decorationTwo =$(".decoration.two");


$(function () {

    var index = 0;

    btnNext.click(function() {

        index = index + 1; //you'll also probably want to check it's not over a max
        decorationOne.css('background-position', (index * 874) + 'px 0px'); //assuming y is always 0

    });
    btnPrev.click(function() {

        index = index - 1; //you'll also probably want to check it's not under 0
        decorationOne.css('background-position', (index * 874) + 'px 0px'); //assuming 

    });
});
于 2013-06-07T14:35:15.720 に答える