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

Question

我创建这个codepen是为了使用可拖动和箭头导航来制作城市导航，它可以在两个方向(左右)工作，但我需要找到一种方法在到达图像末尾时停止

如果有人能给我一些启发，那就太好了谢谢

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

HTML:

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

JS:

    $(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})
        });

  });

CSS:

  body{
    height: 100%;
    width: 100%;
  }
  .row {
      width: 100%;
      margin: 0px auto;
      max-width: 100%;
      height: 100%;
  }
    .column, .columns {
        position: relative;
        padding-left: 0em;
        padding-right: 0em;
        float: left;
        height: 100%;
        width: 100%;
    }  

#wrapper {
  width: 100%;
  height: 100%;
  right: 0%;
  top:0%;
  position: relative;
}

#parent {
  width: 100%;
  height: 100%;
  background: #00f;
  position: relative;
  border-radius: 0px;
  border: solid 0px white;
  right: 0px;
}

#div1 {
  width: 3224px;
  height: 2007px;  
      left: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
  background-image: url("https://xphub-resources.s3.amazonaws.com/customer/7dd00ec1-187f-42c2-859c-918d671a2895/img/NH_cidade.jpg");
  background-size: cover;
  background-position: 0 0;
  background-repeat: no-repeat;
  right: 0%;

}

.wrapper-general {
    height: 100%;
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 100%;
}

#right {
    position: absolute;
    right: 0px;
    top: 50%;
    z-index: 99999;
    margin: 0px;
    width: 90px;
height: 50px;
}

#left {
    position: absolute;
    left: 0px;
    top: 50%;
    z-index: 99999;
    margin: 0px;
    width: 90px;
height: 50px;
}

#top {
    position: absolute;
    left: 50%;
    top: 0%;
    z-index: 99999;
    margin: 0px;
    width: 90px;
height: 50px;
}

#bottom {
    position: absolute;
    left: 50%;
    bottom: 0%;
    z-index: 99999;
    margin: 0px;
    width: 90px;
height: 50px;
}

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;
}