HTML
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title>jQuery手指滑动刻度尺选择值特效</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="page" data-page='profile1'>
<div class="page-main">
<input type="hidden" name="first_screen" value="100">
<div class="row">
<label for="" class="label">借款金额 <span class="number age-num" initial-value="0" value="0"><input type="text" id="cNum" value="100"></span><span class="letter">元</span></label>
<div class="ruler ruler-age">
<div class="main" value="-1">
<ul data-initial='true'>
</ul>
</div>
<div class="arrow"></div>
</div>
</div>
</div>
</div>
</body>
</html>
<script src="js/jquery.min.js"></script>
<script src="js/in01.js"></script>
CSS样式
*{ margin:0; padding:0; } html,body,body > form{ height: 100%; } body{ font:22px/1.5 STHeiTi,9ED14F53,helvetica Regular,Heiti SC; color:#666; } a{ text-decoration: none; } a,input,li,span,div{ -webkit-tap-highlight-color: rgba(255, 255, 255, 0); } input:focus{ outline: none; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); } input{ -webkit-appearance: none; } .hover { /* background-color: #ccc !important; -webkit-transition: all 0.1s !important; */ } img.auto{ max-width: 100%; } ul li{ list-style: none; } .page{ padding:0 5%; height: auto !important; min-height: 100%; position: relative; } .page .page-main{ padding:20px 0 80px; } .row { margin-bottom:30px; } .row .label{ display: block; font-size: 20px; color:#666; padding-bottom:8px; } .row .ruler{ border-bottom:2px solid #cdcdcd; height: 70px; overflow: hidden; position: relative; width:290px; } .ruler .main{ width:3000px; position: relative; left:0; } .ruler .main ul{ overflow: hidden; -webkit-transform:translateX(117px); margin: 0 0 0 27px; } .ruler li{ float: left; width:10px; height:30px; padding-top:30px; padding-left: 0; text-align: center; color:#efe2b1; margin-top:10px; margin-right: 0; position: relative; font-size: 12px; } .ruler li.line{ height:30px; margin-top:0; } .ruler li:before{ content: ""; position: absolute; height: 20px; width: 2px; top:50px; left:0px; background-color:#cdcdcd; } .ruler li .num{ display: inline-block; position: absolute; left: 0; } .ruler .arrow{ width:0; height: 0; border:8px solid transparent; border-bottom:8px solid #ffc539; position: absolute; left:50%; bottom:0; margin-left:-8px; }
JS
/** * Created by Administrator on 2016/11/25. */ setTimeout(function(){ var ed = 5000; for(var i = 0;i<=ed;i=i+100){ if(i%1000==0){ var str = '<li class="line"><span class="num">'+i+'</span></li>'; }else{ var str = '<li></li>'; }; $(".main ul").append(str); } var n =0; var u,end,start,g,g2; var w0 = 10; var ageVal = $("div[data-page='profile1']").find(".row").eq(0).find(".number").attr("initial-value"); //0 var mouVal = $("div[data-page='profil']"); $('.ruler .main').eq(0).css({ '-webkit-transform':'translateX(-'+Math.ceil(parseInt(ageVal*w0))+'px)' }).attr('value',Math.ceil(ageVal*w0)); $('body').on('touchcancel,touchend,touchmove,touchstart',function(e){ e.preventDefault(); }) $('.selectize li').on('touchstart',function(){ $(this).addClass("hover").siblings("li").removeClass("hover"); }) $('.selectize li').on('touchsend',function(){ $(this).removeClass("hover"); }) $('.ruler ul').on("touchstart",function(e){ var initial = $(this).attr('data-initial'); e.stopPropagation(); v = parseInt($(this).parent(".main").attr('value')); start = 0; end = '-'+ed/10; g = 10; // console.log("touchstart"+e.originalEvent.changedTouches[0].pageX); if(initial == 'true'){ startX = e.originalEvent.changedTouches[0].pageX+v; $(this).attr('data-initial','false'); }else{ startX = e.originalEvent.changedTouches[0].pageX-v; } }); $('.ruler ul').on("touchmove",function(e){ var number = parseInt($(this).closest(".row").find('.number').attr('value')); //0 moveX = e.originalEvent.changedTouches[0].pageX; X = moveX - startX; if(X>0){ var vv = $(this).parent(".main").attr('value'); if(vv >=start){ start = X>start ? start : X; $(this).parent(".main").css({ '-webkit-transform':'translateX('+start+'px)' }).attr('value',start); }else{ $(this).parent(".main").css({ '-webkit-transform':'translateX('+X+'px)' }).attr('value',X); } $(this).closest(".row").find('#cNum').val(100); var ageVal = $(this).closest(".row").find('#cNum').val(); $(this).closest(".row").find('#cNum').val(parseInt(ageVal)); }else{ var vv = $(this).parent(".main").attr('value'); if(vv=end){ //end = X< end ? end : X; //!�������� if(X>=-500){ end = X; } $(this).parent(".main").css({ '-webkit-transform':'translateX('+end+'px)' }).attr('value',end); }else{ $(this).parent(".main").css({ '-webkit-transform':'translateX('+X+'px)' }).attr('value',X); } $(this).closest(".row").find('#cNum').val(Math.ceil(number+Math.abs(vv/g))*100); var ageVal = $(this).closest(".row").find('#cNum').val(); $(this).closest(".row").find('#cNum').val(parseInt(ageVal)) } e.preventDefault(); }); $('.ruler ul').on("touchend",function(e){ e.stopPropagation(); moveEndX = e.originalEvent.changedTouches[0].screenX; X = moveEndX - startX; var arr = new Array(); if($(this).closest('.ruler').hasClass("ruler-age")){ var value= Math.abs($(this).parent(".main").attr("value")); var value2 = Math.round(Math.abs(value)/10)*10; if(value > value2){ value2+=10; } //console.log("value:"+value+",value2:"+value2); $(this).parent(".main").css({ '-webkit-transform':'translateX(-'+value2+'px)' }).attr('value','-'+value2); } $(this).closest(".page").find(".number").each(function(){ var txt = $(this).text(); arr.push(txt); }); var arrayJoin = arr.join('##'); $(this).closest(".page").find('input[type="hidden"]').val(arrayJoin); }); //input改变的时候下面尺子也变化额度 $("#cNum").bind("input",function(e){ var reg=/^[1-9]d*$/; if (!reg.test($(this).val())) { $(this).val(""); }; if($(this).val()>5000){ $(this).val(5000); }; let val = -$(this).val()/10; $(".main").css({ '-webkit-transform':'translateX('+val+'px)' }).attr('value',val); }) },10);