0

我已经编写了一些代码，允许我使用 css3 在单击时为背景图像的移动添加过渡。我的代码说“单击时将 874px 添加到背景位置的 x 值”。在我在项目上添加我的过渡之前，这非常有效，因为它允许用户在过渡期间单击，这会破坏我的场景。我只希望用户查看 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 分钟后触发，它们也始终可以访问索引变量。

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 回答