<div>
  <div class=\"money-input\">
    定投金额 :
    <div class=\"input-rela\">
      <input type=\"text\" placeholder=\"2000\"/>
      <span>元</span>
    </div>

  </div>
  <div class=\"money-line\">
    <img index=\"js-minus-a\" class=\"js-minus\" src=\"../images/minus.png\" alt=\"\"/>
    <img id=\"dragImg\" class=\"red-rela\" src=\"../images/money-dw.png\" alt=\"\" onDrag=\"drag(event)\" onDragEnd=\"dragEnd(event)\" style=\"left: 265px;\"/>
    <img id=\"dragLine\" class=\"line3\" src=\"../images/money-line.png\" alt=\"\"/>
    <img index=\"js-plus-a\" class=\"js-plus\" src=\"../images/plus.png\" alt=\"\" style=\"margin-left: 880px;\"/>
  </div>
  <div class=\"money-desc\">
    <span style=\"margin-left: 65px;\">100</span>
    <span>500</span>
    <span>1000</span>
    <span>2000</span>
    <span>3000</span>
    <span>4000</span>
    <span>5000</span>
    <span>6000</span>
    <span>7000</span>
    <span>8000</span>
    <span>9000</span>
    <span>10000</span>
  </div>
  <p>单位:元</p>
</div>

 .money-input{margin:36px auto 0;width:330px;font-size:14px;color:#818181}
 .input-rela{width:250px;height:42px;display:inline-block;position:relative}
 .input-rela>input{width:inherit;height:38px;border:1px solid #eee}
 .input-rela>span{position:absolute;right:10px;top:13px}
 .money-line{width:970px;margin:60px auto 0;position:relative}
 .line3{position:absolute;left:40px;top:10px}
 .red-rela{position:absolute;top:0;z-index:2;cursor:pointer}
 .money-desc,.month-desc{font-size:12px;color:#818181}
 .money-desc+p,.month-desc+p{margin-right:60px;text-align:right;color:#5a5a5a}
 .money-desc>span{display:inline-block;width:71px}
 .month-desc>span{display:inline-block;width:79px}

/**
* Created by cq on 2015/6/15.
*/
$(function(){

  $(\'.js-minus\').click(function(){
    /* min need calculate*/
    var index = $(this).attr(\"index\")
    var move,min;
    if(index==\"js-minus-a\"){
      move = 77;
      min = 34;
    }
    if(index==\"js-minus-b\"){
      move = 85;
      min = 36;
    }
    var redPoint = $(this).next()
    var left = redPoint.css(\"left\")
    var leftInt = left.replace(/px/g,\"\")
    if((parseInt(leftInt)-move)>=min){
      var newLeft = (parseInt(leftInt)-move)+\"px\"
      redPoint.css(\"left\",newLeft)
      var num = parseInt ( (parseInt(leftInt)-move-min) / move )
      var input = $(this).parent().prev().find(\"input\")
      if(index==\"js-minus-a\"){
        var spans = $(this).parent().next().find(\"span\")
        var html = spans.eq(num).html()
        input.val(html)
      }
      if(index==\"js-minus-b\"){
        input.val(getMonth(num))
      }
    }
  })

  $(\'.js-plus\').click(function(){
    /* max and min need calculate*/
    var index = $(this).attr(\"index\")
    var move , max , min ;
    if(index==\"js-plus-a\"){
      move = 77; //ÿ��ƫ����
      max = 881; //��������
      min = 34; //��Сƫ����
    }
    if(index==\"js-plus-b\"){
      move = 85;
      max = 886;
      min = 36;
    }

    var redPoint = $(this).prev().prev()
    var left = redPoint.css(\"left\")
    var leftInt = left.replace(/px/g,\"\")
    if((parseInt(leftInt)+move)<=max){
      var newLeft = (parseInt(leftInt)+move)+\"px\"
      redPoint.css(\"left\",newLeft)
      var num = parseInt( (parseInt(leftInt)+move-min) / move )
      var input = $(this).parent().prev().find(\"input\")
      if(index==\"js-plus-a\"){
        var spans = $(this).parent().next().find(\"span\")
        var html = spans.eq(num).html()
        input.val(html)
      }
      if(index==\"js-plus-b\"){
        input.val(getMonth(num))
      }
    }
  })

  /*move img js*/
  var offsetx = 0, offsety = 0;
  var dragImg = document.getElementById(\"dragImg\")
  dragImg.addEventListener(\"mousedown\",beforeDrag,true);
})

function beforeDrag(ev){
  dragImg = ev.target;
  var l = dragImg.offsetLeft;
  var t = dragImg.offsetTop;
  offsetx = ev.clientX - l;
  offsety = ev.clientY - t;
}

function drag(e){
  e.preventDefault();
  /*min need calculate*/
  var ml = 8,mr = 20,maxy = 70,moveWidth = 77,min=34;
  var dragImg = e.target;
  var dragLine = document.getElementById(\"dragLine\");
  var movex = e.clientX - offsetx;
  var movey = e.clientY - offsety;
  var minPY = dragLine.offsetLeft-ml;
  var maxPY = dragLine.offsetLeft+dragLine.clientWidth-mr;
  if(Math.abs(movey)>maxy){
    return
  }
  if(movex<minPY){
    dragImg.style.left = minPY + \"px\";
    return
  }
  if(movex>maxPY){
    dragImg.style.left = maxPY + \"px\";
    return
  }
  dragImg.style.left = movex + \"px\";

}

function dragEnd (e){
  e.preventDefault();
  /*min need calculate*/
  var ml = 8,mr = 20,maxy = 70,moveWidth = 77,min=34;
  var dragImg = e.target;
  var dragLine = document.getElementById(\"dragLine\");
  var movex = e.clientX - offsetx;
  var movey = e.clientY - offsety;
  var minPY = dragLine.offsetLeft-ml;
  var maxPY = dragLine.offsetLeft+dragLine.clientWidth-mr;

  if(movex<minPY){
    dragImg.style.left = minPY + \"px\";
    $(dragImg).parent().prev().find(\"input\").val(100)
    return
  }
  if(movex>maxPY){
    dragImg.style.left = maxPY + \"px\";
    $(dragImg).parent().prev().find(\"input\").val(10000)
    return
  }
  /*dragEnd xifu*/
  var num = parseInt ( movex / moveWidth )
  dragImg.style.left = (min+moveWidth*num) + \"px\";
  /*dragEnd set input*/
  var thisNode = $(dragImg)
  var spans = thisNode.parent().next().find(\'span\')
  var html = spans.eq(num).html()
  var input = thisNode.parent().prev().find(\"input\")
  input.val(html)
}

/*
function init() {
document.body.onmousemove = function(e) {
if (!e) {
e = window.event;
}
else {
e.srcElement = e.target;
}
document.getElementById(\"divDebug\").innerHTML = \"mousemove (\" + e.clientX + \",\" + e.clientY + \") srcElement=\" + e.srcElement.tagName + \"[\" + e.srcElement.id + \"]\";
}
}*/