<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 + "]";
}
}*/