文件名称：jQuery手机端触屏滑动刻度尺选择数值代码
文件大小：39KB
文件格式：ZIP
更新时间：2020-11-28 07:34:04
手机端触屏 滑动 刻度尺
setTimeout(function(){ var n =0; var u,end,start,g,g2; var w0 = 50; var w1 = 10.4; var w2=52; var heightVal =$("div[data-page='profile1']").find(".row").eq(1).find(".number").attr("initial-value"); //150-140 var widthVal =$("div[data-page='profile1']").find(".row").eq(2).find(".number").attr("initial-value"); //550-300 /2.5 /10 保留最后一们小数 var ageVal = $("div[data-page='profile1']").find(".row").eq(0).find(".number").attr("initial-value"); //30-18 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)); $('.ruler .main').eq(1).css({ '-webkit-transform':'translateX(-'+parseInt(heightVal*w1)+'px)' }).attr('value',heightVal*w1); $('.ruler .main').eq(2).css({ '-webkit-transform':'translateX(-'+parseInt(widthVal*w2)+'px)' }).attr('value',widthVal*w2); for( var i =0 ; i < $('.ruler').length; i++){ var liW = $('.ruler').eq(i).find("li").width(); var size = $('.ruler').eq(i).find('li').size(); } $('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')); if($(this).closest('.ruler').hasClass("ruler-weight")){ start = 0; end = '-1458'; g = 52; }else if($(this).closest('.ruler').hasClass("ruler-age")){ start = 0; end = '-1600'; g = 50; }else{ start = 0; end = '-623'; g = 10.4; } 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')); 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); } if($(this).closest('.ruler').hasClass("ruler-weight")){ var val = (number-20+Math.abs(vv/g)/0.4).toFixed(1);//.replace('.0',''); $(this).closest(".row").find('.number').text(val); }else{ $(this).closest(".row").find('.number').text(Math.ceil(number-(vv/g)-10)); if($(this).closest('.ruler').hasClass("ruler-age")){ var ageVal = $(this).closest(".row").find('.number').text(); $(this).closest(".row").find('.number').text(parseInt(ageVal-2)) } } }else{ var vv = $(this).parent(".main").attr('value'); if($(this).parent(".main").attr('value') <=end){ end = X< end ? 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); } if($(this).closest('.ruler').hasClass("ruler-weight")){ var val = (number-20+Math.abs(vv/g)/0.4).toFixed(1); if(val == '100.1'){val=100;} $(this).closest(".row").find('.number').text(val); }else{ $(this).closest(".row").find('.number').text(Math.ceil(number+Math.abs(vv/g)-10)); if($(this).closest('.ruler').hasClass("ruler-age")){ var ageVal = $(this).closest(".row").find('.number').text(); $(this).closest(".row").find('.number').text(parseInt(ageVal-2)) } } } 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)/100)*100; if(value > value2){ value2+=50; } $(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); }); },100);
【文件预览】：
css
----style.css(6KB)
img
----icon()
images
----ruler_weight.png(1KB)
----ruler_height.png(1KB)
js
----in01.js(6KB)
----jquery.min.js(90KB)
index.html