代码很简单，效果非常棒，直接给大家上源码：

html

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

css

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

js

/*** Created by cq on 2015/6/15.*/$(function(){ $('.js-minus').click(function(){ 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(){ 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)) } } }) 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(); 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(); 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 } var num = parseInt ( movex / moveWidth ) dragImg.style.left = (min+moveWidth*num) + "px"; 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)}

以上所述就是本文的全部内容了，希望大家能够喜欢。