自定义滚动条 - Newbie_小白

自定义滚动条
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style>
        #parent {width:600px; height:20px; background:#CCC; position:relative; margin:10px auto;}
        #div1 {width:20px; height:20px; background:red; position:absolute; left:0; top:0;}
        #div2 {width:400px; height:300px; border:1px solid black; overflow:hidden; position:relative;}
        #div3 {position:absolute; left:0; top:0; padding:4px;}
    </style>
    <script>
        window.onload=function ()
        {
            var oDiv=document.getElementById('div1');
            var oDiv2=document.getElementById('div2');
            var oDiv3=document.getElementById('div3');
            var oParent=document.getElementById('parent');

            var disX=0;

            oDiv.onmousedown=function (ev)
            {
                var oEvent=ev||event;

                disX=oEvent.clientX-oDiv.offsetLeft;

                document.onmousemove=function (ev)
                {
                    var oEvent=ev||event;
                    var l=oEvent.clientX-disX;

                    if(l<0)
                    {
                        l=0;
                    }
                    else if(l>oParent.offsetWidth-oDiv.offsetWidth)
                    {
                        l=oParent.offsetWidth-oDiv.offsetWidth;
                    }

                    oDiv.style.left=l+'px';

                    var scale=l/(oParent.offsetWidth-oDiv.offsetWidth);
                    document.title=scale;

                    oDiv3.style.top=-scale*(oDiv3.offsetHeight-oDiv2.offsetHeight)+'px';
                };

                document.onmouseup=function ()
                {
                    document.onmousemove=null;
                    document.onmouseup=null;
                };

                return false;  //chrome、ff、IE9
            };
        };
    </script>
</head>

<body>
<div id="parent">
    <div id="div1"></div>
</div>
<div id="div2">
    <div id="div3">
        第一部分: 入门课程、了解JavaScript - 案例+知识点，夯实基础做足准备

      
    </div>
</div>
</body>
</html>
posted on 2016-03-24 12:46 Newbie_小白阅读(290) 评论(0) 编辑收藏举报