<!DOCTYPE html>
<html charset="UTF-8">
<head>
<title></title>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
<!-- 可选的Bootstrap主题文件（一般不用引入） -->
<!--<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">-->
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<style>
.container{
margin-top: 50px;
}
.container .unit{
margin-top: 30px;
}
.progress-title{
display: block;
width: 25px;
height: 25px;
line-height: 25px;
border: 1px solid #eee;
}
.progress-dragbtn{
position: absolute;
left: 0; top: 0;
margin-left: 16px;
margin-top: -5px;
width:15px;
height: 30px;
background: #3879D9;
border-radius: 4px;
cursor: pointer;
}
</style>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 unit">
<div class="row">
<div class="col-md-12">
<p><span>创意</span>-你觉得这个创意在外观上优秀吗？<i>分数越高表示越优秀。</i></p>
</div>
<div class="col-md-12">
<div class="row">
<div class="col-md-1">
<span class="progress-title">0</span>
</div>
<div class="col-md-9">
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 0%;">
0%
</div>
<span class="progress-dragbtn"></span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 unit">
<div class="row">
<div class="col-md-12">
<p><span>外观</span>-你觉得这个创意在外观上优秀吗？<i>分数越高表示越优秀。</i></p>
</div>
<div class="col-md-12">
<div class="row">
<div class="col-md-1">
<span class="progress-title">0</span>
</div>
<div class="col-md-9">
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 0%;">
0%
</div>
<span class="progress-dragbtn"></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 unit">
<div class="row">
<div class="col-md-12">
<p><span>成本</span>-你觉得这个创意在成本上优秀吗？<i>分数越高表示越优秀。</i></p>
</div>
<div class="col-md-12">
<div class="row">
<div class="col-md-1">
<span class="progress-title">0</span>
</div>
<div class="col-md-9">
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 0%;">
0%
</div>
<span class="progress-dragbtn"></span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 unit">
<div class="row">
<div class="col-md-12">
<p><span>难度</span>-你觉得这个创意在难度上可行吗？<i>分数越高表示越可行。</i></p>
</div>
<div class="col-md-12">
<div class="row">
<div class="col-md-1">
<span class="progress-title">0</span>
</div>
<div class="col-md-9">
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 0%;">
0%
</div>
<span class="progress-dragbtn"></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 unit">
<div class="row">
<div class="col-md-12">
<p><span>环保</span>-你觉得这个创意在环保上优秀吗？<i>分数越高表示越优秀。</i></p>
</div>
<div class="col-md-12">
<div class="row">
<div class="col-md-1">
<span class="progress-title">0</span>
</div>
<div class="col-md-9">
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 0%;">
0%
</div>
<span class="progress-dragbtn"></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
var progress=document.getElementsByClassName("progress");
for(var i=0;i<progress.length;i++){
progress[i].children[1].onmousedown=function(e){//对滑块绑定鼠标按下事件函数
var that=this;//that变量保存的是谁调用的函数
var e=e||event;//解决兼容问题
var x=e.offsetX;//获取鼠标在滑块上的相对位置
document.onmousemove=function(e){//鼠标滑动函数
var e=e||event;
var endx=e.clientX;
var _left=endx-getPagePosition(that.parentNode).pagex-x;//滑块距有定位的父元素的left值
that.style.left=section(_left,0,that.parentNode.offsetWidth-(that.offsetWidth/2))+"px";//滑块可以移动的范围
that.parentNode.children[0].style.width=section(_left,0,that.parentNode.offsetWidth-(that.offsetWidth/2))+"px";//蓝色div的宽度，和滑块距父元素的值一样
var percent=parseInt((section(_left,0,that.parentNode.offsetWidth-(that.offsetWidth/2))/(that.parentNode.offsetWidth-(that.offsetWidth/2)))*100);//计算百分比
that.parentNode.children[0].innerText=percent+"%";
that.parentNode.parentNode.parentNode.children[0].children[0].innerText=percent;
}
}
}
document.onmouseup=function(){
document.onmousemove="";//清除鼠标滑动函数
}
//范围限定
function section(val ,min ,max){
return Math.min(max,Math.max(min,val))
}
//元素在页面的绝对位置
function getPagePosition(target){
var sumleft=target.offsetLeft;
var sumtop=target.offsetTop;
while(target.offsetParent!=null){
sumleft+=target.offsetParent.offsetLeft;
sumtop+=target.offsetParent.offsetTop;
target=target.offsetParent;
}
return {
pagex:sumleft,
pagey:sumtop
};
}
</script>
</html>滑动条拖拽（用户评分练习）——js
猜你喜欢
转载自blog.csdn.net/qq_43031907/article/details/81915813
今日推荐
周排行