css+js 原生滑动条制作--编程之路,记录点滴,认真生活

1. 写的几个滑动条样式如下：

2.完全可以增加border-radius等属性，关键是js控制鼠标的设计。用到mousedown,mousemove,mouseup事件，虽然可能比较容易，但是不注意细节的话，滑动条手感会很差。
3.以下代码是普通代码风格：

<!DOCTYPE html>
<html>
<head>
<title>drag简化版</title>
<meta charset="utf-8">
<style type="text/css">
html{margin: 0;padding: 0;}
#bl{
width: 500px;
height: 20px;
margin: 10px auto;
background-color: pink;
}
#move{
width: 20px;
height: 20px;
position: absolute;
left: 0px;
top: 0px;
background-color: blue;
}
</style>
</head>
<body>
<div id="bl">
<div style="width: 500px;height: 20px;position: relative;float: left;">
<div id="move"></div>
</div>
</div>
</body>
<script type="text/javascript">

var btn = document.getElementById('move');
var bar = document.getElementById('bl');
var f = this, g = document, b = window, m = Math;
btn.onmousedown = function (e) {
var x = (e || b.event).clientX;
var l = btn.offsetLeft;
var max = bar.offsetWidth - this.offsetWidth;
document.onmousemove = function (e) {
var thisX = (e || b.event).clientX;
var to = m.min(max, m.max(-2, l + (thisX - x)));
btn.style.left = to + 'px';
//此句代码可以除去选中效果
b.getSelection ? b.getSelection().removeAllRanges() : g.selection.empty();
};
//注意此处是document 才能有好的拖动效果
document.onmouseup = function(){document.οnmοusemοve=null;};
}

</script>
</html>
注意点：在按钮元素下注册onmousedown事件，但是之后在document下注册onmousemove与onmouseup 这样做的好处是避免因为鼠标移动过快移出btn 而使得btn停止移动。

4.另一种函数对象风格，可拓展性，复用性很好。

<!DOCTYPE html>
<html>
<head>
<title>drag</title>
<meta charset="utf-8">
<style type="text/css">
html{margin: 0;padding: 0;}
#bl{
width: 500px;
height: 20px;
margin: 10px auto;
background-color: pink;
}
#move{
width: 20px;
height: 20px;
position: absolute;
left: 0px;
top: 0px;
background-color: blue;
}
</style>
</head>
<body>
<div id="bl">
<div style="width: 500px;height: 20px;position: relative;float: left;">
<div id="move"></div>
</div>
</div>
</body>
<script type="text/javascript">

scale = function (btn, bar) {
this.btn = document.getElementById(btn);
this.bar = document.getElementById(bar);
this.init();
};
scale.prototype = {
init: function () {
var f = this, g = document, b = window, m = Math;
f.btn.onmousedown = function (e) {
var x = (e || b.event).clientX;
var l = this.offsetLeft;
var max = f.bar.offsetWidth - this.offsetWidth;
g.onmousemove = function (e) {
var thisX = (e || b.event).clientX;
var to = m.min(max, m.max(-2, l + (thisX - x)));
f.btn.style.left = to + 'px';

//此句代码可以除去选中效果
b.getSelection ? b.getSelection().removeAllRanges() : g.selection.empty();
};
g.onmouseup = function(){this.οnmοusemοve=null;};
}
}
}
new scale('move', 'bl');
</script>
</html>

5.可以按照4的代码风格写代码，在工程项目中用处很大，值得学习。
6.补充学到的其他东西：
selection属性：
b.getSelection ? b.getSelection().removeAllRanges() : g.selection.empty();
这是兼容性写法，IE9以下支持：document.selection 　　
IE9、Firefox、Safari、Chrome和Opera支持：window.getSelection() 。

一个常见例子：

html：
<div>你选中我之后，弹出</div>
js1：
function test(){
var txt = window.getSelection?window.getSelection():document.selection.createRange().text;
alert(txt)
}
document.onmouseup = test

移除选中内容：
html：
<div>你不能选中我</div>
js2:
function test(){
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
}
document.onmouseup = test
这个例子让我想起了以前疑惑360doc等网站无法复制是怎样实现的，这个属性完全可以用来实现嘛。
7.关于定位，
关于居中，使用margin : 10px auto ;这样的代码，但是内部元素要使用绝对定位时，为了希望相对于此外部div定位，把此外部div设定为绝对或者相对定位，但是这样margin属性失效，无法定位。
比如

<div id='out'>
<div id='in'></div>
</div>
out 设定margin:10 auto; position:absolute;
in设定 position:absolute;
就无法居中，因为已经是绝对定位了，如果外壳不绝对定位，内部就是相对于body绝对定位，设计不方便。
解决办法：在外层再加一个div 设定居中不相对定位或者绝对定位，然后让上方out大小与其相同即可。