この例では、JavaScriptの特定のコードを共有して、参照のスライド選択日を実装しています。特定のコンテンツは次のとおりです
$（page）.on（ 'touchmove'、 '＃touchmovetime'、function（event）{touchmove（event）;}）; scrollbarinit（）; // function scrollbarinit（）{var defaultValue = 3、maxvalue = 30; var mydate = new date（）; var year = mydate.gettlyear（）; var month = mydate.getmonth（） + 1; //現在の月を取得します（0-11,0は1月を表します）var date = mydate.getDate（）; var day =新しい日付（年、月、0）; var daycount = day.getDate（）; //今月の日数を取得：if（（date + defaultValue）> dayCount）{if（month == 12）{month = 1;年=年 + 1; } else {月=月 + 1; } date =（date + defaultValue） - daycount; } else {date = date + defaultValue; } if（month <10）{month = "0"+month; } if（date <10）{date = "0"+date; } $（ "＃endtime"）。 var currentx = $（ "＃touchMovetime"）。width（） *（0 / maxvalue）; $（ '＃scroll_track'）。css（{width：currentx+"px"}）; $（ '＃scroll_thumb'）。css（{transform： 'translate（' + currentx + 'px、0）'}）; }; function touchmove（event）{event.preventdefault（）; if（！$（ '＃scroll_thumb'）||！event.touches.length）return; var defaultValue = 3、maxvalue = 30; var mydate = new date（）; var year = mydate.gettlyear（）; var month = mydate.getmonth（） + 1; //現在の月を取得します（0-11,0は1月を表します）var date = mydate.getDate（）; var tran_currentx = ''; var startoffset = parseint（$（ '＃touchmovetime'）。offset（）。左）; var endoffset = parseint（$（ '＃touchright'）。offset（）。左）; var _limit = endoffset -startoffset; var touchMovetimeOffsetLeft = $（ '＃scroll_track'）。offset（）。左; var touch = event.touches [0]; var endx = touch.pagex; var currentx = endx -TouchMovetimeOffsetLeft; var timevalue = math.round（maxvalue *（currentx / $（ "＃touchmovetime"）。width（）））; //現在のティック値if（timeValue <defaultValue）{timeValue = defaultValue} else if（timeValue> maxValue）{timeValue = maxValue; } if（currentx <_limit && currentx> 15）{$（ '＃days'）。text（timevalue）; $（ '＃scroll_track'）。css（{width：currentx+"px"}）; if（currentx <20）{tran_currentx = 0} else {tran_currentx = currentx -20; } $（ '＃scroll_thumb'）。css（{transform： 'translate（' + tran_currentx + 'px、0）'}）; var day =新しい日付（年、月、0）; var daycount = day.getDate（）; //月の数を取得する場合は（（date + timevalue）> daycount）{if（month == 12）{month = 1;年=年 + 1; } else {月=月 + 1; } date =（date + timevalue） - daycount; } else {date = date + timeValue; } if（month <10）{month = "0"+month; } if（date <10）{date = "0"+date; } $（ '＃endtime'）。 }}<div> <span> 3日</span> <div id = "touchmovetime"> <div id = "scroll_track"> </div> <div id = "scroll_thumb"></div> </div> <span id = "touchright"> 30日</span> </div>
.jzrqdiv {position：relative;トップ：15px;高さ：10px;ボーダーラジウス：20px;背景：#efefef; Box-Shadow：INSET 0 1PX 2PX RGBA（0,0,0、.15）; } 2 #scroll_track {position：absolute;上：0;高さ：10px;ボーダーラジウス：20px;背景：＃2399DC; z-index：10;} 3 .spirit {position：absolute;上：-9px;幅：30px;高さ：30px;ラインハイト：30px; font-size：30px; border-radius：50％; color：#ddd;背景：#ffff; z-index：11;変換：翻訳（0,0）;}上記はこの記事に関するものです。すべての人の学習に役立つことを願っています。