手机端 Demo

手机端主要使用了 touchstart touchmove touchend 三个事件
html:

  1. <div class="in_box">
  2.                 <div class="in_list touch_list">
  3.                     <div class="t">
  4.                         <div class="l">
  5.                             投资限额<span>（最大1000万）</span>
  6.                         </div>
  7.                         <div class="r">
  8.                             <span class="count" id="limit1">10</span>万
  9.                         </div>
  10.                     </div>
  11.                     <div class="b">
  12.                         <div class="ball">
  13.                             <div class="touch"></div>
  14.                         </div>
  15.                     </div>
  16.                 </div>
  17.                 <div class="in_list touch_list">
  18.                     <div class="t">
  19.                         <div class="l">
  20.                             扣款额度<span>（最大10万）</span>
  21.                         </div>
  22.                         <div class="r">
  23.                             <span class="count" id="limit2">5</span>万
  24.                         </div>
  25.                     </div>
  26.                     <div class="b">
  27.                         <div class="ball">
  28.                             <div class="touch"></div>
  29.                         </div>
  30.                     </div>
  31.                 </div>
  32.                 <div class="in_list">
  33.                     <div class="t">
  34.                         <div class="l">
  35.                             授权期限
  36.                         </div>
  37.                         <div class="r">
  38.                             <span id="limit3">3</span>年
  39.                         </div>
  40.                     </div>
  41.                     <div class="b">
  42.                        <ul class="selyears">
  43.                            <li>1年</li>
  44.                            <li>2年</li>
  45.                            <li class="cur">3年</li>
  46.                        </ul>
  47.                     </div>
  48.                 </div>
  49.             </div>

css：

  1. .bswmaim>.m2>.in_box>.in_list{margin-bottom:.05rem;padding:.2rem 0;}
  2. .bswmaim>.m2>.in_box>.in_list>.t{line-height:.25rem;}
  3. .bswmaim>.m2>.in_box>.in_list>.t>.l{float:left;color:#333;font-size:.15rem;}
  4. .bswmaim>.m2>.in_box>.in_list>.t>.l>span{color:#666;font-size:.12rem;}
  5. .bswmaim>.m2>.in_box>.in_list>.t>.r{float:right;width:.5rem;text-align:center;font-size:.15rem;color:#009fe8;position:relative;}
  6. .bswmaim>.m2>.in_box>.in_list>.t>.r:before{content:" ";display:block;position:absolute;bottom:0;top:0;left:0;right:0;margin:auto auto 0 auto;height:1px;background-color:#ccc;}
  7. .bswmaim>.m2>.in_box>.in_list>.b{position:relative;min-height:.25rem;padding:.05rem 0;}
  8. .bswmaim>.m2>.in_box>.touch_list>.b{margin-right:.25rem;overflow:visible;}
  9. .bswmaim>.m2>.in_box>.touch_list>.b:after{content:" ";display:block;position:absolute;left:0;top:0;right:0;bottom:0;height:.05rem;background-color:#cddae0;margin:auto;border-radius:.025rem;box-shadow:0 0 7px 1px #bdcdd5 inset;width:3.4rem;}
  10. .bswmaim>.m2>.in_box>.touch_list>.b>.ball{position:absolute;left:0;top:.05rem;width:.25rem;height:.25rem;overflow:visible;}
  11. .bswmaim>.m2>.in_box>.touch_list>.b>.ball>.touch{content:" ";display:block;position:absolute;width:.25rem;height:.25rem;border-radius:50%;background:url(/Images/Area/AccountMan/BSWarrant/icon1.png) center center no-repeat #009fe8;background-size:.115rem .115rem;left:0;top:0;z-index:10;}
  12. .bswmaim>.m2>.in_box>.touch_list>.b>.ball:before{content:"";display:block;position:absolute;width:3.15rem;height:.05rem;background-color:#009fe8;border-radius:.025rem 0 0 .025rem;left:0;top:.1rem;z-index:9;left:-3.15rem;}

js：

  1. //手指触摸交互
  2. $(function () {
  3.     var startXs = [], x = 0, endX = 0, startX = 0;
  4.     //数据初始化
  5.     initData();
  6.     //触摸事件
  7.     $('.touch_list').each(function (index, element) {
  8.         $(element).find('.touch').on('touchstart', function (event) {
  9.             x = startXs[index];
  10.             //console.log(1);
  11.             event.preventDefault();
  12.             //console.log(event);
  13.             var touch = event.originalEvent.targetTouches[0];
  14.             startX = touch.pageX - x;
  15.         });
  17.         $(element).find('.touch').on('touchmove', function (event) {
  18.             event.preventDefault();
  19.             //console.log(event);
  20.             var touch = event.originalEvent.targetTouches[0];
  21.             endX = touch.pageX;
  22.             x = endX - startX;
  23.             var all = $(this).parent('.ball').parent('.b').css('width');
  24.             all = all.substr(0, all.length - 2) * 1;
  25.             x = x > all ? all : (x < 0 ? 0 : x);
  26.             var num = x / all * 100;
  27.             $(this).parent('.ball').css({ "left": num + '%' });
  28.             var money = parseInt(num / 100 * (index == 0 ? 1000 : 10));
  29.             $('#limit' + (index + 1)).html(money);
  30.         });
  32.         $(element).find('.touch').on('touchend', function (event) {
  33.             startXs[index] = x;
  34.         });
  35.     });
  36.     //期限 点击交互
  37.     $('.selyears').find('li').click(function () {
  38.         $(this).addClass('cur').siblings('li').removeClass('cur');
  39.         $('#limit3').html($(this).index() + 1);
  40.     });
  41.     //投资人初始化数据函数
  42.     function initData() {
  43.         if ($('.touch_list').length) {
  44.             var money1 = $('#limit1').html() * 1;
  45.             var money2 = $('#limit2').html() * 1;
  46.             $('.touch_list').each(function (index, element) {
  47.                 if (index == 0) {
  48.                     var num = money1 / 1000 * 100;
  49.                 } else if (index == 1) {
  50.                     var num = money2 / 10 * 100;
  51.                 }
  52.                 var all = $(element).find('.b').css('width');
  53.                 all = all.substr(0, all.length - 2) * 1;
  54.                 var length = num / 100 * all;
  55.                 startXs.push(length);
  56.                 num = num > 100 ? 100 : (num < 0 ? 0 : num);
  57.                 $(element).find('.ball').animate({ "left": num + '%' }, 500);
  58.             });
  59.         };
  60.     };
  61. });

效果 GIF

GIF.gif

扩展上面的 Demo

  • 参考网易云音乐进度条的设计、交互来实现

1.gif

  • 主要修改的地方：使按钮可以在进度条的左右两侧各多出自身一半的宽度

    源码

  • HTML 与上面之前的不变，修改的只是 JS && CSS
  • CSS ``` .bswmaim>.m2>.in_box>.in_list{margin-bottom:.05rem;padding:.2rem 0;} .bswmaim>.m2>.in_box>.in_list>.t{line-height:.25rem;} .bswmaim>.m2>.in_box>.in_list>.t>.l{float:left;color:#333;font-size:.15rem;} .bswmaim>.m2>.in_box>.in_list>.t>.l>span{color:#666;font-size:.12rem;} .bswmaim>.m2>.in_box>.in_list>.t>.r{float:right;width:.5rem;text-align:center;font-size:.15rem;color:#009fe8;position:relative;} .bswmaim>.m2>.in_box>.in_list>.t>.r:before{content:” “;display:block;position:absolute;bottom:0;top:0;left:0;right:0;margin:auto auto 0 auto;height:1px;background-color:#ccc;} .bswmaim>.m2>.in_box>.in_list>.b{position:relative;min-height:.25rem;padding:.05rem 0;} .bswmaim>.m2>.in_box>.touch_list>.b{overflow:visible;} .bswmaim>.m2>.in_box>.touch_list>.b:after{content:” “;display:block;position:absolute;left:.125rem;top:0;right:.125rem;bottom:0;height:.05rem;background-color:#cddae0;margin:auto;border-radius:.025rem;box-shadow:0 0 7px 1px #bdcdd5 inset;} .bswmaim>.m2>.in_box>.touch_list>.b>.ball{position:absolute;left:0;right:.25rem;top:.05rem;height:.25rem;overflow:visible;} .bswmaim>.m2>.in_box>.touch_list>.b>.show:before{content:””;display:block;position:absolute;width:.125rem;background-color:#fff;border-radius:.025rem 0 0 .025rem;top:0;bottom:0;left:0;z-index:10;} .bswmaim>.m2>.in_box>.touch_list>.b>.ball>.touch{position:absolute;width:.25rem;height:.25rem;border-radius:50%;background:url(/Images/Area/AccountMan/BSWarrant/icon1.png) center center no-repeat #009fe8;background-size:.115rem .115rem;left:0;top:0;z-index:1;overflow:visible;} .bswmaim>.m2>.in_box>.touch_list>.b>.show>.touch:before{content:””;display:block;position:absolute;width:3.025rem;height:.05rem;background-color:#009fe8;border-radius:.025rem 0 0 .025rem;top:.1rem;z-index:0;left:-3.025rem;}
  2. - JS  (这里写了较为详细的注释)

$(function () { var startXs = [],//接收每个按钮移动距离的数组 x = 0,//移动距离计算时所用的初始值 endX = 0,//接收手指移动后位置的数值 startX = 0;//接收手机触摸开始时位置的数值 其实算的是元素的相对的起始位置的 0 0 点的坐标 //数据初始化 initData(); //触摸事件 $(‘.touch_list’).each(function (index, element) { //开始触摸事件 $(element).find(‘.touch’).on(‘touchstart’, function (event) { x = startXs[index];//拿出移动数值中当前元素移动的距离数值 //console.log(x); event.preventDefault();//禁止浏览器的默认事件 //console.log(event); var touch = event.originalEvent.targetTouches[0];//获取触摸对象 startX = touch.pageX - x;//用当前的触摸位置减去之前移动的距离 获得的是 按钮最初 left = 0 在页面中的 pageX 的值 //console.log(startX); }); //触摸时移动事件 $(element).find(‘.touch’).on(‘touchmove’, function (event) { event.preventDefault();//禁止浏览器的默认事件 //console.log(event); var touch = event.originalEvent.targetTouches[0];//获取触摸对象 endX = touch.pageX;//获取此时手指移动时的位置 x = endX - startX;//用移动时的数值减去手指从 left = 0的 pageX 的值得到按钮需要移动的距离 var all = all || parseInt($(this).parent(‘.ball’).parent(‘.b’).css(‘width’)) - 2 (parseInt($(this).css(‘width’)));//按钮 left 从 0 到 100 总需移动的距离数值 //console.log(all); x = x > all ? all : (x < 0 ? 0 : x);//容错 var num = x / all 100;//获取移动距离所占的百分比 //判断移动距离的百分比距离是否超过 .touch 一半的宽度所占的百分比 //1.25 为 .touch 一半的宽度 3.025 为 移动 100% 的宽度 if (num > (.125 / 3.025 100)) { $(this).parent(‘.ball’).addClass(‘show’);//在 css 中做相应的转换 } else { $(this).parent(‘.ball’).removeClass(‘show’);//在 css 中做相应的转换 } $(this).css({ “left”: num + ‘%’ });//移动样式 var money = parseInt(num / 100 (index == 0 ? 1000 : 10)); $(‘#limit’ + (index + 1)).html(money);//改变 相应的元素的 html 数值 }); //触摸事件结束后 $(element).find(‘.touch’).on(‘touchend’, function (event) { event.preventDefault();//禁止浏览器的默认事件 startXs[index] = x;//结束时更新数组中相应的 手指从触摸到移动的距离 }); }); //期限 点击交互 $(‘.selyears’).find(‘li’).click(function () { $(this).addClass(‘cur’).siblings(‘li’).removeClass(‘cur’); $(‘#limit3’).html($(this).index() + 1); }); //投资人初始化数据函数 function initData() { //判断当前用户是否为 投资人 if ($(‘.touch_list’).length) { //获取 html 中相应的数值 var money1 = $(‘#limit1’).html() 1; var money2 = $(‘#limit2’).html() 1; $(‘.touch_list’).each(function (index, element) { //num 为 html 中的数值转换为所占的相应的宽度百分比数值 if (index == 0) { var num = money1 / 1000 100; } else if (index == 1) { var num = money2 / 10 100; } var all = all || parseInt($(element).find(‘.b’).css(‘width’)) - 2 (parseInt($(element).find(‘.touch’).css(‘width’)));//按钮 left 从 0 到 100 总需移动的距离数值 //console.log(all); var length = num / 100 all;//按钮移动的距离 startXs.push(length);//传入移动的距离至数组中 num = num > 100 ? 100 : (num < 0 ? 0 : num);//容错 //判断移动距离的百分比距离是否超过 .touch 一半的宽度所占的百分比 //1.25 为 .touch 一半的宽度 3.025 为 移动 100% 的宽度 if (num > (.125 / 3.025 * 100)) { $(element).find(‘.ball’).addClass(‘show’);//在 css 中做相应的转换 } $(element).find(‘.touch’).animate({ “left”: num + ‘%’ }, 500);//移动动画 }); }; }; });

  2. - 效果图
  4. > ![2.gif](http://upload-images.jianshu.io/upload_images/9064013-5968702451d15f0a.gif?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)<br />
  5. ####总结<br />
  6. 主要需要知道的是按钮从 `left` 从 0 ~ 100 所需要移动的总距离是多少，然后算出手指在移动时的距离占前面总距离的百分比<br />
  7. 主要的难点是：我将按钮和她左侧的蓝色的线条放在了一个元素上，在刚开始移动的时候会出现多出来的.125rem 的长度的蓝色线条，正常来说他是不应该显示出来的<br />
  8. ![image.png](http://upload-images.jianshu.io/upload_images/9064013-3815ea15a2d29803.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)<br />
  9. 就是上图这个地方会有问题，后来我使用了一个遮罩的方法具体思路如下 ：<br />
  10. 在 css 中给 .ball 增加一个  .show 类名，在 JS 中判断移动的距离或者说是移动距离所占的百分比是否大于了这段小距离所占的百分比，大于的话增加这个类名 show 否则去掉，这个类名控制了 左侧的白色遮罩以及按钮左侧的蓝色的线条的显示与隐藏<br />
  11. #PC 端 Demo<br />
  12. PC 端主要使用了 `mousedown` -- 当按下鼠标按钮时， `mousemove` -- 获得鼠标指针在页面中的位置 ，`mouseup` --  当松开鼠标按钮时  三个事件
  15. - HTML
  1.     <div class="in_box">
  2.         <div class="in_list touch_list">
  3.             <div class="l">
  4.                 投资限额
  5.             </div>
  6.             <div class="r">
  7.                 <div class="line">
  8.                     <div class="ball">
  9.                         <div class="touch" title="鼠标拖动改变金额"></div>
  10.                     </div>
  11.                 </div>
  12.                 <div class="txt">
  13.                     <!-- 程序调取投资人投资限额数据  无数据默认为 10 -->
  14.                     <span class="count" id="limit1">10</span>万
  15.                 </div>
  16.             </div>
  17.         </div>
  18.         <div class="in_list touch_list">
  19.             <div class="l">
  20.                 扣款额度
  21.             </div>
  22.             <div class="r">
  23.                 <div class="line">
  24.                     <div class="ball">
  25.                         <div class="touch" title="鼠标拖动改变金额"></div>
  26.                     </div>
  27.                 </div>
  28.                 <div class="txt">
  29.                     <!-- 程序调取投资人扣款限额数据  无数据默认为 5 -->
  30.                     <span class="count" id="limit2">5</span>万
  31.                 </div>
  32.             </div>
  33.         </div>
  34.         <div class="in_list">
  35.             <div class="l">
  36.                 授权期限
  37.             </div>
  38.             <div class="r">
  39.                 <ul class="selyears clearfix">
  40.                     <!-- 程序判断投资人授权期限数据为相应 li 加类名 cur  无数据默认给第三个加 -->
  41.                     <li>1年</li>
  42.                     <li>2年</li>
  43.                     <li class="cur">3年</li>
  44.                 </ul>
  45.                 <!-- 程序调取投资人授权期限数据  无数据默认为 3 -->
  46.                 <input id="limit3" type="hidden" value="3">
  47.             </div>
  48.         </div>
  49.     </div>
  2. - CSS

.in_box { margin: 0 auto; width: 600px; }

.in_box .in_list { line-height: 32px; margin-bottom: 22px; overflow: hidden; } .in_box .in_list .l { float: left; width: 140px; color: #333; font-size: 16px; margin-right: 20px; text-align: right; }

  1.     .in_box .in_list .r {
  2.         float: left;
  3.         width: 440px;
  4.         overflow: hidden;
  5.     }
  7.         .in_box .in_list .r .line {
  8.             float: left;
  9.             width: 230px;
  10.             position: relative;
  11.             height: 32px;
  12.             margin-right: 30px;
  13.         }
  15.             .in_box .in_list .r .line:after {
  16.                 content: " ";
  17.                 display: block;
  18.                 position: absolute;
  19.                 top: 0;
  20.                 bottom: 0;
  21.                 left: 0;
  22.                 margin: auto;
  23.                 height: 6px;
  24.                 width: 260px;
  25.                 box-shadow: 0 1px 4px rgba(0,0,0,.4) inset;
  26.                 border-radius: 4px;
  27.             }
  29.             .in_box .in_list .r .line .ball {
  30.                 position: absolute;
  31.                 width: 30px;
  32.                 height: 20px;
  33.                 top: 0;
  34.                 bottom: 0;
  35.                 margin: auto;
  36.                 z-index: 10;
  37.             }
  39.                 .in_box .in_list .r .line .ball:before {
  40.                     content: " ";
  41.                     display: block;
  42.                     position: absolute;
  43.                     width: 230px;
  44.                     height: 6px;
  45.                     background-color: #009ce4;
  46.                     box-shadow: 0 1px 4px rgba(0,0,0,.3) inset;
  47.                     border-radius: 4px 0 0 4px;
  48.                     left: -230px;
  49.                     top: 0;
  50.                     bottom: 0;
  51.                     margin: auto;
  52.                 }
  54.                 .in_box .in_list .r .line .ball .touch {
  55.                     width: 100%;
  56.                     height: 100%;
  57.                     background: url(/Images/Areas/AccountMan/BSWarrant/spriteImg.png) no-repeat;
  58.                     background-position: 0 0;
  59.                     border-radius: 4px;
  60.                     box-shadow: 0 0 3px rgba(0,0,0,.3) inset,1px 1px 5px rgba(0,0,0,.4);
  61.                     cursor: pointer;
  62.                 }
  64.         .in_box .in_list .r .txt {
  65.             float: left;
  66.             margin-left: 20px;
  67.             color: #00a0e9;
  68.             font-size: 18px;
  69.             font-weight: 600;
  70.         }
  72.             .in_box .in_list .r .txt span {
  73.                 color: #00a0e9;
  74.             }
  76.         .in_box .in_list .r .selyears li {
  77.             float: left;
  78.             width: 80px;
  79.             height: 32px;
  80.             box-shadow: 0 0 0 1px #ccc inset;
  81.             text-align: center;
  82.             font-size: 16px;
  83.             color: #666;
  84.             line-height: 32px;
  85.             cursor: pointer;
  86.             margin-right: 10px;
  87.         }
  89.             .in_box .in_list .r .selyears li.cur {
  90.                 box-shadow: none;
  91.                 background: url(/Images/Areas/AccountMan/BSWarrant/spriteImg.png) no-repeat;
  92.                 background-position: 0 -20px;
  93.             }

.bd_rule { border-top: 1px solid #e6e6e6; padding: 38px 0 64px; }

  1. .bd_rule .txt {
  2.     line-height: 36px;
  3.     color: #999;
  4.     font-size: 14px;
  5.     padding-left: 90px;
  6.     position: relative;
  7.     width: 470px;
  8.     margin: 0 auto;
  9. }
  11.     .bd_rule .txt:before {
  12.         content: "授权须知";
  13.         position: absolute;
  14.         line-height: 36px;
  15.         height: 36px;
  16.         left: 0;
  17.         top: 0;
  18.     }

/雪碧图/ .spriteImg { background: url(/Images/Areas/AccountMan/BSWarrant/spriteImg.png) no-repeat; }

.touchicon { height: 20px; width: 30px; background-position: 0 0; }

.selectact { height: 32px; width: 80px; background-position: 0 -20px; }

  2. - JS

//鼠标拖动交互 $(function () { var startXs = [],//接收每个按钮移动距离的数组 x = 0,//移动距离计算时所用的初始值 endX = 0,//接收鼠标移动后位置的数值 startX = 0;//接收鼠标开始时位置的数值 其实算的是元素的相对的起始位置的 0 0 点的坐标 var down = false;//判断鼠标是否按下 //数据初始化 initData(); //鼠标拖拽事件 $(‘.touch_list’).each(function (index, element) { //mousedown 当按下鼠标按钮时 $(element).find(‘.touch’).on(‘mousedown’, function (event) { down = true; x = startXs[index]; //console.log(event); event.preventDefault(); startX = event.pageX - x; console.log(1); }); //mousemove 获得鼠标指针在页面中的位置 $(element).on(‘mousemove’, function (event) { //判断鼠标是否按下 if (down) { event.preventDefault(); //console.log(event); endX = event.pageX; x = endX - startX; var all = 230;//230 为 .line 的长度 x = x > all ? all : (x < 0 ? 0 : x); var num = x / all 100; $(this).find(‘.ball’).css({ “left”: x + ‘px’ }); var money = parseInt(num / 100 (index == 0 ? 1000 : 10)); $(‘#limit’ + (index + 1)).html(money); console.log(2); } }); //mouseup 当松开鼠标按钮时 $(element).on(‘mouseup’, function (event) { event.preventDefault(); down = false; startXs[index] = x; console.log(down); }); }); //期限 点击交互 $(‘.selyears’).find(‘li’).click(function () { $(this).addClass(‘cur’).siblings(‘li’).removeClass(‘cur’); $(‘#limit3’).val($(this).index() + 1); }); //投资人初始化数据函数 function initData() { if ($(‘.touch_list’).length) { var money1 = $(‘#limit1’).html() 1; var money2 = $(‘#limit2’).html() 1; $(‘.touch_list’).each(function (index, element) { if (index == 0) { var num = money1 / 1000; } else if (index == 1) { var num = money2 / 10; } var length = num * 230;//230 为 .line 的长度 length = length > 230 ? 230 : (length < 0 ? 0 : length); startXs.push(length); $(element).find(‘.ball’).animate({ “left”: length + ‘px’ }, 1000); }); }; }; });

```

  • 浏览器效果图

3.gif

  • 总结：

PC 和 手机端最主要的区别除了使用的事件之外还有就是元素移动范围的不同，PC 端范围是按钮的相对父级 .touch_list，这样使得拖拽的范围扩大了些，不会显得有些”笨重”