javascript - Sprite 动画问题

Question

我有一个包含 4 张照片的 Sprite (div=slider)。我需要使用 JavaScript 对其进行动画处理，以便在单击箭头按钮 (div=leftArrow, rightArrow) 时，它会创建 4 张照片的幻灯片，以便向左和向右移动。我尝试了几种不同的方法，但无法将其设置为动画。

这是我目前拥有的。任何建议表示赞赏...

$("#leftArrow").onclick(function() {
  ("#slider").animate({
    left: "200px"
  });
});
$("#rightArrow").onclick(function() {
  ("#slider").animate({
    right: "200px"
  });
});

h1 {
  color: #0000ff;
  /*blue*/
  font-size: 44px;
}

.container {
  max-height: 520px;
  background-color: #808080;
  /*grey*/
}

#leftArrow,
#rightArrow {
  display: inline-block;
  width: 38px;
  height: 50px;
}

#leftArrow {
  position: relative;
  /*top: 0;*/
  top: 235px;
  left: 2%;
  width: 5%;
  height: 50px;
  background: url('../images/left_arrow.png') 0 0 no-repeat;
  z-index: 10;
}

#rightArrow {
  position: relative;
  /*top: 0;*/
  top: 235px;
  left: 87.5%;
  width: 5%;
  height: 50px;
  background: url('../images/right_arrow.png') bottom right no-repeat;
  z-index: 10;
}

#slider {
  position: relative;
  height: 520px;
  max-width: 792px;
  margin: 0 auto;
  /*background: url("../images/Animate-Sprite_520a.png") -0 0 no-repeat;*/
  background-image: url('../images/Animate-Sprite_520a.png');
  background-repeat: no-repeat;
}

#startApp {
  width: 235px;
  margin: 0 auto;
}

#startApp ul {
  list-style-type: none;
}

#startApp ul li a {
  display: inline-block;
  text-decoration: none;
  width: 150px;
  text-align: center;
  background-color: steelblue;
  border: 2px solid #808080;
  color: white;
  font-size: 32px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1> Fox Valley Runner Club</h1>


<div class="container">

  <div id="slider">

    <button id="leftArrow" onclick="move('left');" class="fbtnFirst" /button>



    <button id="rightArrow" onclick="move('right');" class="fbtnLast"/button>
    </div>

    </div>
    <div id="startApp">
            <ul>
                <li><a href="runners.html">Start here!</a></li>
            </ul>
    </div>

Answer 1

您可以通过更改 JS 中的 backgroundPostionX 和 backgroundPostionY 值来为 Sprite 设置动画。

在您的 JS 中，您还在按钮本身上定义了一个事件处理程序并调用了 move 方法，但未定义。

<div id="slider">
  <button id="leftArrow" onclick="move('left');" class="fbtnFirst"/button>
  <button id="rightArrow" onclick="move('right');" class="fbtnLast"/button>
</div>

<script>
// assuming the width of one portion of the sprite is 200px, this value will vary according to your size of the image
  $("#leftArrow").onclick(function(){
    $("#slider").css("backgroundPostionX","200px"); 
    $("#rightArrow").onclick(function(){
      ("#slider").css("backgroundPostionX","-200px");
    });
  });
</script>

希望对你有帮助