网站地图    收藏   

子栏目

主页 > 前端 > css教程 >

div模拟滚动条 - html/css语言栏目：html.css - 自学

来源：自学PHP网    时间：2015-04-14 14:51 作者： 阅读:次

[导读] %@ Page Language=C AutoEventWireup=true CodeBehind=html aspx cs Inherits=WebApplication1 html %!DOCTYPE html PUBLIC - W3C DTD XHTML 1 0 Transitional EN http: www w3...

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="html.aspx.cs" Inherits="WebApplication1.html" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <style type="text/css">
        *
        {
            margin: 0;
            padding: 0;
        }
        p
        {
            height: 1000px;
        }
        #mainBox
        {
            width: 250px;
            height: 500px;
            border: 1px #bbb solid;
            position: relative;
            overflow: hidden;
            margin: 50px auto;
        }
        #content
        {
            height:1000px;
            position: absolute;
            left: 0;
            top: 0;
        }
        .scrollDiv
        {
            width: 6px;
            position: absolute;
            top: 0;
            background: #666;
            border-radius: 10px;
        }
        /*  章节类别  */
.m-catr{padding:15px 0 10px 12px;*padding:15px 0 10px 14px;}
.m-catr .tte{float:left; line-height:35px; text-align:left;font-size:14px; font-weight:bold; color:#5b98db;}
#content dl{width:225px; float:left; margin-top:10px;}
#content dl dt, .m-catr dl dd{float:left;width:100%; line-height:25px; text-align:left; color:#444;}
#content dl dt{font-weight:bold;}
#content dl dd{margin-left:12px;}
    </style>
    <script src="Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
    <title></title>
</head>
<body>
    <!-- 章节类别 -->
    <div class="m-catr f-cb">
        <div class="tte">
            章节类别</div>
        <div id="mainBox">
            <div id="content">
                <dl data-type="menu">
                    <dt>第一单元科学是系统化了的知识</dt>
                    <dd>
                        1、千篇一律与千变万化</dd>
                    <dd>
                        2、双语言时代</dd>
                    <dd>
                        3、人们如何做出决策</dd>
                    <dd>
                        4、培养独立工作和独立思考的人</dd>
                </dl>
                <dl data-type="menu">
                    <dt>第二单元科学是系统化了的知识</dt>
                    <dd>
                        1、千篇一律与千变万化</dd>
                    <dd>
                        2、双语言时代</dd>
                    <dd>
                        3、人们如何做出决策</dd>
                    <dd>
                        4、培养独立工作和独立思考的人</dd>
                </dl>
                <dl data-type="menu">
                    <dt>第三单元科学是系统化了的知识</dt>
                    <dd>
                        1、千篇一律与千变万化</dd>
                    <dd>
                        2、双语言时代</dd>
                    <dd>
                        3、人们如何做出决策</dd>
                    <dd>
                        4、培养独立工作和独立思考的人</dd>
                </dl>
                <dl data-type="menu">
                    <dt>第四单元科学是系统化了的知识</dt>
                    <dd>
                        1、千篇一律与千变万化</dd>
                    <dd>
                        2、双语言时代</dd>
                    <dd>
                        3、人们如何做出决策</dd>
                    <dd>
                        4、培养独立工作和独立思考的人</dd>
                </dl>
                <dl data-type="menu">
                    <dt>第五单元科学是系统化了的知识</dt>
                    <dd>
                        1、千篇一律与千变万化</dd>
                    <dd>
                        2、双语言时代</dd>
                    <dd>
                        3、人们如何做出决策</dd>
                    <dd>
                        4、培养独立工作和独立思考的人</dd>
                </dl>
            </div>
        </div>
    </div>
    <!-- /章节类别 -->
    <script type="text/javascript">
        var doc = document;
        var _wheelData = -1;
        var mainBox = doc.getElementById('mainBox');
        function bind(obj, type, handler) {
            var node = typeof obj == "string" ? $(obj) : obj;
            if (node.addEventListener) {
                node.addEventListener(type, handler, false);
            } else if (node.attachEvent) {
                node.attachEvent('on' + type, handler);
            } else {
                node['on' + type] = handler;
            }
        }
        function mouseWheel(obj, handler) {
            var node = typeof obj == "string" ? $(obj) : obj;
            bind(node, 'mousewheel', function (event) {
                var data = -getWheelData(event);
                handler(data);
                if (document.all) {
                    window.event.returnValue = false;
                } else {
                    event.preventDefault();
                }
 
            });
            //火狐
            bind(node, 'DOMMouseScroll', function (event) {
                var data = getWheelData(event);
                handler(data);
                event.preventDefault();
            });
            function getWheelData(event) {
                var e = event || window.event;
                return e.wheelDelta ? e.wheelDelta : e.detail * 40;
            }
        }
 
        function addScroll() {
            this.init.apply(this, arguments);
        }
        addScroll.prototype = {
            init: function (mainBox, contentBox, className) {
                var mainBox = doc.getElementById(mainBox);
                var contentBox = doc.getElementById(contentBox);
                var scrollDiv = this._createScroll(mainBox, className);
                this._resizeScorll(scrollDiv, mainBox, contentBox);
                this._tragScroll(scrollDiv, mainBox, contentBox);
                this._wheelChange(scrollDiv, mainBox, contentBox);
                this._clickScroll(scrollDiv, mainBox, contentBox);
            },
            //创建滚动条
            _createScroll: function (mainBox, className) {
                var _scrollBox = doc.createElement('div');
                _scrollBox.setAttribute("id", "scrollBox");
                var _scroll = doc.createElement('div');
                var span = doc.createElement('span');
                _scrollBox.appendChild(_scroll);
                _scroll.appendChild(span);
                _scroll.className = className;
                mainBox.appendChild(_scrollBox);
                return _scroll;
            },
            //调整滚动条
            _resizeScorll: function (element, mainBox, contentBox) {
                var p = element.parentNode;
                var conHeight = contentBox.offsetHeight;
                var _width = mainBox.clientWidth;
                var _height = mainBox.clientHeight;
                var _scrollWidth = element.offsetWidth;
                var _left = _width - _scrollWidth;
                p.style.width = _scrollWidth + "px";
                p.style.height = _height + "px";
                p.style.left = _left + "px";
                p.style.position = "absolute";
                p.style.background = "#ccc";
                contentBox.style.width = (mainBox.offsetWidth - _scrollWidth) + "px";
                var _scrollHeight = parseInt(_height * (_height / conHeight));
                if (_scrollHeight >= mainBox.clientHeight) {
                    element.parentNode.style.display = "none";
                }
                element.style.height = _scrollHeight + "px";
            },
            //拖动滚动条
            _tragScroll: function (element, mainBox, contentBox) {
                var mainHeight = mainBox.clientHeight;
                element.onmousedown = function (event) {
                    var _this = this;
                    var _scrollTop = element.offsetTop;
                    var e = event || window.event;
                    var top = e.clientY;
                    //this.onmousemove=scrollGo;
                    document.onmousemove = scrollGo;
                    document.onmouseup = function (event) {
                        this.onmousemove = null;
                    }
                    function scrollGo(event) {
                        var e = event || window.event;
                        var _top = e.clientY;
                        var _t = _top - top + _scrollTop;
                        if (_t > (mainHeight - element.offsetHeight)) {
                            _t = mainHeight - element.offsetHeight;
                        }
                        if (_t <= 0) {
                            _t = 0;
                        }
                        element.style.top = _t + "px";
                        contentBox.style.top = -_t * (contentBox.offsetHeight / mainBox.offsetHeight) + "px";
                        _wheelData = _t;
                    }
                }
                element.onmouseover = function () {
                    this.style.background = "#444";
                }
                element.onmouseout = function () {
                    this.style.background = "#666";
                }
            },
            //鼠标滚轮滚动，滚动条滚动
            _wheelChange: function (element, mainBox, contentBox) {
                var node = typeof mainBox == "string" ? $(mainBox) : mainBox;
                var flag = 0, rate = 0, wheelFlag = 0;
                if (node) {
                    mouseWheel(node, function (data) {
                        wheelFlag += data;
                        if (_wheelData >= 0) {
                            flag = _wheelData;
                            element.style.top = flag + "px";
                            wheelFlag = _wheelData * 12;
                            _wheelData = -1;
                        } else {
                            flag = wheelFlag / 12;
                        }
                        if (flag <= 0) {
                            flag = 0;
                            wheelFlag = 0;
                        }
                        if (flag >= (mainBox.offsetHeight - element.offsetHeight)) {
                            flag = (mainBox.clientHeight - element.offsetHeight);
                            wheelFlag = (mainBox.clientHeight - element.offsetHeight) * 12;
 
                        }
                        element.style.top = flag + "px";
                        contentBox.style.top = -flag * (contentBox.offsetHeight / mainBox.offsetHeight) + "px";
                    });
                }
            },
            _clickScroll: function (element, mainBox, contentBox) {
                var p = element.parentNode;
                p.onclick = function (event) {
                    var e = event || window.event;
                    var t = e.target || e.srcElement;
                    var sTop = document.documentElement.scrollTop > 0 ? document.documentElement.scrollTop : document.body.scrollTop;
                    var top = mainBox.offsetTop;
                    var _top = e.clientY + sTop - top - element.offsetHeight / 2;
                    if (_top <= 0) {
                        _top = 0;
                    }
                    if (_top >= (mainBox.clientHeight - element.offsetHeight)) {
                        _top = mainBox.clientHeight - element.offsetHeight;
                    }
                    if (t != element) {
                        element.style.top = _top + "px";
                        contentBox.style.top = -_top * (contentBox.offsetHeight / mainBox.offsetHeight) + "px";
                        _wheelData = _top;
                    }
                }
            }
        }
        new addScroll('mainBox', 'content', 'scrollDiv');
        $(function () {
            $("#scrollBox").hide();
 
            $("#mainBox").mouseover(function () {
 
 
                $("#scrollBox").show();
 
 
            }).mouseout(function () {
 
                $("#scrollBox").hide();
 
            });
 
        });
  
    </script>
</body>
</html>

最新评论

    加载更多~~

    添加评论

    更多文章推荐

    自学PHP网专注网站建设学习,PHP程序学习,平面设计学习，以及操作系统学习

    京ICP备14009008号-1@版权所有www.zixuephp.com

    网站声明：本站所有视频，教程都由网友上传，站长收集和分享给大家学习使用，如由牵扯版权问题请联系站长邮箱904561283@qq.com

    添加评论