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}

$('.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,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+moveWidthnum) + "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 + "]";
}
}/