代码很简单,效果非常棒,直接给大家上源码:
html
<div> <div class="money-input"> 定投金额 : <div class="input-rela"> <input type="text" placeholder="2000"/> <span>元</span> </div> </div> <div class="money-line"> <img class="js-minus lazy" src="/static/imghwm/default1.png" data-src="../images/minus.png" index="js-minus-a" alt=""/> <img class="red-rela lazy" src="/static/imghwm/default1.png" data-src="../images/money-dw.png" id="dragImg" alt="" onDrag="drag(event)" onDragEnd="dragEnd(event)" style="max-width:90%"/> <img class="line3 lazy" src="/static/imghwm/default1.png" data-src="../images/money-line.png" id="dragLine" alt=""/> <img class="js-plus lazy" src="/static/imghwm/default1.png" data-src="../images/plus.png" index="js-plus-a" alt="" style="max-width:90%"/> </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(){ /* 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 + "]"; } }*/
以上所述就是本文的全部内容了,希望大家能够喜欢。

实现方法:1、用“$("img").delay(毫秒数).fadeOut()”语句,delay()设置延迟秒数;2、用“setTimeout(function(){ $("img").hide(); },毫秒值);”语句,通过定时器来延迟。

修改方法:1、用css()设置新样式,语法“$(元素).css("min-height","新值")”;2、用attr(),通过设置style属性来添加新样式,语法“$(元素).attr("style","min-height:新值")”。

区别:1、axios是一个异步请求框架,用于封装底层的XMLHttpRequest,而jquery是一个JavaScript库,只是顺便封装了dom操作;2、axios是基于承诺对象的,可以用承诺对象中的方法,而jquery不基于承诺对象。

增加元素的方法:1、用append(),语法“$("body").append(新元素)”,可向body内部的末尾处增加元素;2、用prepend(),语法“$("body").prepend(新元素)”,可向body内部的开始处增加元素。

在jquery中,apply()方法用于改变this指向,使用另一个对象替换当前对象,是应用某一对象的一个方法,语法为“apply(thisobj,[argarray])”;参数argarray表示的是以数组的形式进行传递。

删除方法:1、用empty(),语法“$("div").empty();”,可删除所有子节点和内容;2、用children()和remove(),语法“$("div").children().remove();”,只删除子元素,不删除内容。

去掉方法:1、用“$(selector).removeAttr("readonly")”语句删除readonly属性;2、用“$(selector).attr("readonly",false)”将readonly属性的值设置为false。

on()方法有4个参数:1、第一个参数不可省略,规定要从被选元素添加的一个或多个事件或命名空间;2、第二个参数可省略,规定元素的事件处理程序;3、第三个参数可省略,规定传递到函数的额外数据;4、第四个参数可省略,规定当事件发生时运行的函数。


热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

SublimeText3 Linux新版
SublimeText3 Linux最新版

SecLists
SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合,这些列表在安全评估过程中经常使用,都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表,帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上,他就可以访问到所需的每种类型的列表。

WebStorm Mac版
好用的JavaScript开发工具

SublimeText3 英文版
推荐:为Win版本,支持代码提示!