css+js 原生滑动条制作

来源：互联网发布：天音复制软件编辑：程序博客网时间：2024/06/04 00:07

我参考了某位大佬的网页代码，然后自己写了性能优异的滑动条UI;

1. 写的几个滑动条样式如下：
样式1
样式2
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.onmousemove=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.onmousemove=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大小与其相同即可。

阅读全文

0 0