Question

我创建此编码器以使用可拖动和箭头导航进行城市导航，它可以在两个方向（左右）工作但我需要找到一种方法，当它到达图像的末尾时停止

如果有人能给我一个关于它的信息，那就太好了感谢

http://codepen.io/eloisemonteiro/pen/gPzovO

HTML：

[
    {
        type: 'writing',
        entries: [{id: "someId", name: "someName"}, {id: "someId2", name: "someName2"}]
    },
    {
        type: 'reading',
        entries: [{id: "someId3", name: "someName3"}, {id: "someId4", name: "someName4"}]
    }
]

JS：

<div class="row">
  <div class="large-12 columns">

    <span class='leftArrow button secondary' id="left" value='left'><i class="fa fa-chevron-left fa-lg"></i></span>
    <span class='rightArrow button secondary' id="right" value='right'><i class="fa fa-chevron-right fa-lg"></i></span>
    <span class='topArrow button secondary' id="top" value='top'><i class="fa fa-chevron-up fa-lg"></i></span>
    <span class='bottomArrow button secondary' id="bottom" value='bottom'><i class="fa fa-chevron-down fa-lg"></i></span>

    <div class="wrapper-general">

      <div id="wrapper">
        <div id="parent">

          <div id="div1">

          </div>

        </div>
      </div>

    </div>

  </div>
</div>

CSS：

    $(document).foundation(); 

    wrapper = $("#wrapper"),
    parent = $("#parent"),
    div1 = $("#div1"),
    childX = $("#childX"),
    childY = $("#childY");

  //set wrapper perspective
  TweenLite.set(wrapper, {
    perspective: 500
  });


  /** draggable instance **/

  Draggable.create(div1, {
    type: 'x,y',
    bounds: parent,
    edgeResistance: 1,
    onDrag: function() {
      childX.html(this.x);
      childY.html(this.y);
    }
  });
  Draggable.get("#div1").vars.cursor = "grabbing"; //or whatever

  $(function () {

        $("#right, #left").click(function () {
            var dir = this.id == "right" ? '+=' : '-=';
            var wid = $("#div1").width();
            TweenLite.to("#div1", 2, {x:dir + -wid/2})
        });

  });

Answer 1

$(function () {

        $("#right, #left").click(function () {
            var dir = this.id == "right" ? '+=' : '-=';


          var wid = $("#div1").width();

          //GET DIV POSITION
          var pos = parseInt($("#div1").position().left)*-1;
          //GET ACTUAL POSITION
          var div_wid = parseInt(wid) - parseInt(pos) 

          //CHECKING
          if(this.id == "right" && pos >= div_wid)
            return;
          if(this.id == "left" && pos <= 0)
            return;

            TweenLite.to("#div1", 2, {x:dir + -wid/2})
        });

  });

我建议添加支票

if(this.id == "right" && pos == div_wid){
    return;
}else{
    if(pos + "the number of pixel you are moving" >= div_wid)
        where_to_move = max_right_position;
}

停止图像在导航中移动太远

1 个答案: