html部分:
& lt; !——进度条年代——在
,,,,,,,,,,类,& lt; div=" m_i_c_con "在
,,,,,,,,,,,,,& lt; div id=胺纤嵯匆骸眂lass=癿_i_c_out祝辞& lt; div id=癲ragBar”class=癿_i_c_in祝辞& lt;/div> & lt;/div>
,,,,,,,,,,,,,& lt; div id=癲ragBtn”class=癿_i_c_drag”在0% & lt;/div>
,,,,,,,,,,,& lt;/div>
& lt; !——进度条E——在
css部分:
。m_i_c_con{:相对;高度:55 px;}
。m_i_c_out{:绝对;溢出:隐藏;左:1 px;上图:8 px;不必:0 1 px 1 px # e3e3e3;宽度:100%;高度:12 px;边界:1 px固体# e7e7e7;border - radius: 5 px;background - color: # fff;}
。m_i_c_in{高度:18 px;宽度:0%;background - color: # C1C1C1;}
。m_i_c_drag{:绝对;z - index: 100;左:0%;上图:0 px;宽度:46 px;高度:56 px;margin-left: -8%;行高:76 px;背景:url (. ./p_w_picpaths/tuodongqiu.png)没有重演中心0 px;background-size: 26 px;text-align:中心;颜色:# 8 a8b8b;字体大小:15 px;}
Js部分:
$(函数(){
,,,,,,,,var选择={};
,,,,,,,,$ (' # dragBtn ') .bind (touchstart,函数(e) {
,,,,,,,,,,,,e.preventDefault ();
,,,,,,,,,,,,选择。startX=e.originalEvent.changedTouches [0] .pageX;
,,,,,,,,,,,,选择。offsetLeft=parseFloat ($ () . css('左'));
,,,,,,,,});
,,,,,,,,,
,,,,,,,$ (' # dragBtn ') .bind (touchmove,函数(e) {
,,,,,,,,,,,,e.preventDefault ();
,,,,,,,,,,,,选择。moveEndX=e.originalEvent.changedTouches [0] .pageX;
,,,,,,,,选择。X=选择。moveEndX - opts.startX;
,,,,,,,,,
,,,,,,,选择。完整的=parseFloat($(“#废酸洗液”).width ());
,,,,,,,,选择。新左派=选择。X + opts.offsetLeft;
,,,,,,,,选择。perval=选择。新左派/选择。完整的* 100;
,,,,,,,,,
,,,,,,,如果选择。新左派& lt;=选择。完整的,,选择。新左派在=0){
,,,,,,,,,,,,,$ (' # dragBar ') .width (opts.perval.toFixed (0) + ' % ');
,,,,,,,,,,,,,(这)美元。css({“左”:opts.perval.toFixed (0) +‘%’});,,,,,,,,,,
,,,,,,,,,,,,美元,(这)。text (opts.perval.toFixed (0) + ' % ');
,,,,,,,,}
,,,,,,,,});
,,,,,,,,,
,,,,,,,$ (' # dragBtn ') .bind (touchend,函数(e) {
,,,,,,,,,,,,e.preventDefault ();
,,,,,,,,,,,,选择={};
,,,,,,,,});
