利用js实现的滚动条的例子。下面是代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#parent{
width: 600px;
height: 20px;
background-color: #ccc;
position: relative;
margin:0 auto;
}
#div1{
width: 20px;
height: 20px;
background-color: red;
position: absolute;
left: 0;
top: 0;
}
</style>
<script >
window.onload=function(){
function wri(obj,x){
obj.value = Math.ceil(x/580*100)+'%'
}
var odiv = document.getElementById('div1');
var op = document.getElementById('parent');
var oi = document.getElementById('inu');
odiv.onmousedown = function(ev){
var oev = ev||event;
document.onmousemove = function(ev){
var oev = ev||event;
var x=oev.clientX-op.offsetLeft;
if(x<0){
x = 0;
}
if(x>op.offsetWidth-odiv.offsetWidth){
x = op.offsetWidth-odiv.offsetWidth;
}
odiv.style.left = x+'px';
wri(oi,x);
}
document.onmouseup = function(){
document.onmousemove = null;
document.onmouseup = null;
}
return false; //阻止默认行为不选中其它文字
}
}
</script>
</head>
<body>
<div id="parent">
<div id="div1"></div>
</div>
<input id='inu'type="text" placeholder="完成进度" />
</body>
</html>
7万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
