<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <title>滚动条拖动评分的JS效果</title> <style> *{ margin: 0;padding: 0; } .scale_panel{ font-size:12px; color:#999; width:100%; line-height:18px; position: relative; width: 90%; margin: 30px auto; height: 60px; } .scale #btn{ background:url(bar.png) no-repeat; width:78px; height:78px; position:absolute; top:-34px; left:0; background-size: 100% 100%; z-index: 100; } .scale{ background:#0a7b57; width:83%; height:10px; position:relative; font-size:0px; top: 7px; margin: 0 auto; } .scale div{ background:#f5a321; width:0px; position:absolute; width:0; left:0; height:10px; bottom:0; } #bar::before{ width: 26px;height: 26px; border-radius: 50%;background: #f5a321; position: absolute; content: ""; left: -22px;top: -8px; z-index: 20; } #bar::after{ width: 26px;height: 26px; border-radius: 50%;background: #0a7b57; position: absolute; content: ""; right: -22px;top: -8px; z-index: 20; } #title{position: absolute;bottom: 11px;left:30px;font-size: 16px;color: #fff;} </style> </head> <body> <div class="scale_panel"> <!-- <img src="left.png" class="left"> --> <div class="scale" id="bar"> <div id="left"></div> <span id="btn"> <span id="title">0%</span> </span> </div> <!-- <img src="right.png" class="right"> --> </div> </body> <script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js"></script> <script> var dx,dy,newLeft,newtop,progress; var barWidth=$("#bar").width(); var barTop=$("#btn").position().top; var leftWidh=60; $("#left").css('width', leftWidh+"px"); $("#btn").css('left', leftWidh+"px"); progress=Math.round(leftWidh/(barWidth-$("#btn").width())*100)+"%"; $("#title").html(progress); document.getElementById('btn').addEventListener('touchstart',function(e){ dx=e.targetTouches[0].pageX-this.offsetLeft; //记录触发拖拽的水平状态发生改变时的位置 dy=e.targetTouches[0].pageY-this.offsetTop; //记录触发拖拽的垂直状态发生改变时的位置 }); document.getElementById('btn').addEventListener('touchmove',function(e){ newLeft=e.targetTouches[0].pageX-dx; //记录拖拽的水平状态发生改变时的位置 console.log(e.targetTouches[0].pageY) newtop=e.targetTouches[0].pageY-dy; if(newtop!=barTop){ newtop=barTop; } if(newLeft<0){ newLeft=0; } if(newLeft>barWidth-$("#btn").width()){ newLeft=barWidth-$("#btn").width(); } this.style.left=newLeft+'px'; this.style.top=newtop+'px'; //设置目标元素的left,top $("#left").css('width', newLeft); progress=Math.round(newLeft/(barWidth-$("#btn").width())*100)+"%"; $("#title").html(progress); }); document.getElementById('btn').addEventListener('touchend',function(e){ }); </script> </html>