自定义滚动条

最新推荐文章于 2024-06-20 16:16:46 发布

aogy04408

最新推荐文章于 2024-06-20 16:16:46 发布

阅读量99

点赞数

原文链接：http://www.cnblogs.com/the0ne/articles/3463056.html

版权

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            margin: 200px auto;
            position: relative;
            width: 350px;
            height: 450px;
            border: 1px solid #f5f5f5;
            overflow: hidden;
        }

        .center {
            position:absolute;
            left:0;top:0;
            padding: 10px;
            width: 92%;
            overflow: auto;
        }
        .center p{
            line-height:24px;
        }
        .scroll_bar:hover{
            background:#9d9d9d;
        }
    </style>
</head>
<body>
    <div class="box" id="box">
        <div class="center" id="center">
            <p>
                Hash，一般翻译做“散列”，也有直接音译为“哈希”的，就是把任意长度的输入（又叫做预映射， pre-image），通过散列算法，变换成固定长度的输出，该输出就是散列值。这种转换是一种压缩映射，也就是，散列值的空间通常远小于输入的空间，不同的输入可能会散列成相同的输出，而不可能从散列值来唯一的确定输入值。简单的说就是一种将任意长度的消息压缩到某一固定长度的消息摘要的函数。
HASH函数(计算机算法领域）
基本概念
* 若结构中存在和关键字K相等的记录，则必定在f(K)的存储位置上。由此，不需比较便可直接取得所查记录。称这个对应关系f为散列函数(Hash function)，按这个思想建立的表为散列表。
* 对不同的关键字可能得到同一散列地址，即key1≠key2，而f(key1)=f(key2)，这种现象称碰撞。具有相同函数值的关键字对该散列函数来说称做同义词。综上所述，根据散列函数H(key)和处理冲突的方法将一组关键字映象到一个有限的连续的地址集（区间）上，并以关键字在地址集中的“象” 作为记录在表中的存储位置，这种表便称为散列表，这一映象过程称为散列造表或散列，所得的存储位置称散列地址。
                * 若对于关键字集合中的任一个关键字，经散列函数映象到地址集合中任何一个地址的概率是相等的，则称此类散列函数为均匀散列函数(Uniform Hash function)，这就是使关键字经过散列函数得到一个“随机的地址”，从而减少冲突。
散列函数的性质

所有散列函数都有如下一个基本特性：如果两个散列值是不相同的（根据同一函数），那么这两个散列值的原始输入也是不相同的。这个特性是散列函数具有确定性的结果。但另一方面，散列函数的输入和输出不是一一对应的，如果两个散列值相同，两个输入值很可能是相同的，但并不能绝对肯定二者一定相等。输入一些数据计算出散列值，然后部分改变输入值，一个具有强混淆特性的散列函数会产生一个完全不同的散列值。
典型的散列函数都有无限定义域，比如任意长度的字节字符串，和有限的值域，比如固定长度的比特串。在某些情况下，散列函数可以设计成具有相同大小的定义域和值域间的一一对应。一一对应的散列函数也称为排列。可逆性可以通过使用一系列的对于输入值的可逆“混合”运算而得到。
            </p>
        </div>
    </div>
    <script>
        window.onload = function () {
            var s = new ScrollBar();
            s.init({
                oParentID: document.getElementById('box'),        //最外层元素
                oScrollTarget: document.getElementById('center')  //要滚动的元素
                /*scrollCss: {                                    //定义滚动条样式，不填则默认样式
                    scroll_bar: 'width:10px;background:#dbdbdb',
                    scroll_outer: 'width:10px;background:#f5f5f5;'
                }*/
            });
        };
        
        //#region 拖拽封装
        function Drag() { };
        Drag.prototype = {
            init: function (opt) {
                this.obj = opt.obj;
                this.oParent = opt.oParent;//obj的父元素
                this.fnDown();
            },
            fnDown: function () {
                var _this = this;
                this.obj.onmousedown = function (ev) {
                    prevent(ev);
                    var ev = ev || event;
                    _this.disX = ev.clientX - this.offsetTop;
                    _this.disY = ev.clientY - this.offsetTop;
                    if (this.setCapture) {
                        this.onmousemove = function (ev) {
                            _this.fnMove(ev, _this);
                        };
                        this.setCapture();
                        this.onmouseup = _this.fnUp;
                    }
                    else {
                        document.onmousemove = function (ev) {
                            _this.fnMove(ev, _this);
                        };
                        document.onmouseup = _this.fnUp;
                    }
                    return false;
                };
            },
            fnMove: function (ev, _this) {
                var ev = ev || event;
                var l = ev.clientX - _this.disX;
                var t = ev.clientY - _this.disY;
                _this.obj.style.left = l + 'px';
                _this.obj.style.top = t + 'px';
            },
            fnUp: function () {
                this.onmouseup = null;
                this.onmousemove = null;
                if (this.releaseCapture) {
                    this.releaseCapture();
                }
            }
        };
        //#endregion


        //#region自定义滚动条
        function ScrollBar() { };
        ScrollBar.prototype = {
            init: function (opt) {
                this.oParentID = opt.oParentID;
                this.oScrollTarget = opt.oScrollTarget;
                this.scrollCss = opt.scrollCss || {};
                this.createScrollBar();
                this.scrollDrag();
                this.mouseScroll();
            },
            createScrollBar: function () {//创建滚动条
                this.scroll_outer = document.createElement('div');
                this.scroll_bar = document.createElement('div');
                this.scroll_outer.className = 'scroll_outer';
                this.scroll_bar.className = 'scroll_bar';
                this.scroll_outer.style.cssText = 'position:absolute;right:0;top:0;width:10px;height:100%;background-color:#f5f5f5;' + this.scrollCss.scroll_outer;
                this.scroll_bar.style.cssText = 'position:absolute;left:0;top:0;width:100%;height:20%;background-color:#dbdbdb;cursor:pointer;' + this.scrollCss.scroll_bar;
                this.oParentID.appendChild(this.scroll_outer);
                this.scroll_outer.appendChild(this.scroll_bar);
            },           
            scrollDrag: function () {//添加滚动条拖拽
                var _that = this;
                //滚动条拖拽
                function ScrollDrag() { };
                ScrollDrag.prototype = new Drag();
                ScrollDrag.prototype.fnMove = function (ev, _this) {
                    var ev = ev || event;
                    var t = ev.clientY - _this.disY;
                    _that.setTop(t);
                };
                var drag = new ScrollDrag();
                drag.init({
                    obj: this.scroll_bar,
                    oParent: this.scroll_outer
                });
            },
            setTop: function (t) {//移动的位置
                var H = this.scroll_outer.offsetHeight - this.scroll_bar.offsetHeight;
                if (t < 0) {
                    t = 0;
                }
                else if (t > H) {
                    t = H;
                }
                var scale = t / H;
                this.scroll_bar.style.top = t + 'px';
                this.oScrollTarget.style.top = (this.scroll_outer.offsetHeight - this.oScrollTarget.offsetHeight) * scale + 'px';
            },
            mouseEvent: function (obj,Fn) {//鼠标滚轮事件
                if (obj.addEventListener) {
                    obj.onmousewheel === undefined ? obj.addEventListener('DOMMouseScroll', Fn, false) : obj.addEventListener('mousewheel', Fn, false);                   
                }
                else {
                    obj.attachEvent('onmousewheel', Fn);
                }
                //DOMMouseScroll 火狐
                //mousewheel     谷歌 
                //onmousewheel   IE
            },
            mouseScroll: function () {//鼠标滚轮功能
                var _this = this;
                var t = 100;
                this.mouseEvent(this.oParentID, function (e) {
                    stopDefault(e);
                    var val = e.wheelDelta || e.detail;//e.detail只有火狐识别,  e.wheelDelta除了火狐都能识别
                    if (val == 120 || val == -3) {//向上
                        _this.setTop(_this.scroll_bar.offsetTop - 10);
                    }
                    else {//向下
                        _this.setTop(_this.scroll_bar.offsetTop + 10);
                    }
                });
            }
        };
        //#endregion

        //冒泡阻止
        function prevent(e) {
            e && e.stopPropagation ? e.stopPropagation() : window.event.cancelBubble = true;
        };

        //阻止浏览器的默认行为 
        function stopDefault(e) {
            if (e && e.preventDefault)
                e.preventDefault();//火狐谷歌
            else
                window.event.returnValue = false; //IE
            return false;
        };
    </script>
</body>
</html>

转载于:https://www.cnblogs.com/the0ne/articles/3463056.html

aogy04408

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
自定义滚动条

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></ti...
复制链接

扫一扫