找回密码
当前位置：前端开发者 > JavaScript > 正文

前端javascript自定义滚动条

2018-11-05 20:45:57 分类：JavaScript 阅读(177) 评论(0)
前端开发技能描述
前端开发技能树
web前端开发技能测试

自定义滚动条简言之就是一个固定范围的拖拽

而要想用自定义滚动条控制一些属性（如小方块的大小，透明度，文字的滚动），必须掌握一个关键点：

每次小方块的L都是变化的，x是不变的，取L/x得到一个比例值，当L足够大时会与得到为1的结果。

自定义滚动条控制方块大小
html 代码

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <title>自定义滚动条控制方块大小</title>
    <style type=”text/css”>
        #parent {
            width: 600px;
            height: 20px;
            background-color: #ccc;
            position: relative;
            margin-left: 300px;
        }
        #div1 {
            width: 20px;
            height: 20px;
            background-color: red;
            position: absolute;
            top: 0;
            left: 0px;
        }
        #div2 {
            width: 0;
            height: 0;
            background-color: green;
        }
    </style>
</head>
<body>
    <span>鼠标点击滑动小方块</span>
    <div id=”parent”>
        <div id=”div1″></div>
    </div>
    <div id=”div2″></div>
    <script type=”text/javascript”>
        window.onload = function () {
            var oDiv1 = document.getElementById(‘div1’);
            var oDiv = document.getElementById(‘parent’);
            var oDiv2 = document.getElementById(‘div2’);
            var tarX = 0;
            oDiv1.onmousedown = function (ev) {
                var oEvent = ev || event;
                tarX = oEvent.clientX – oDiv1.offsetLeft;
                document.onmousemove = function (ev) {
                    var oEvent = ev || event;
                    var l = oEvent.clientX – tarX;
                    if (l < 0) {
                        l = 0;
                    }
                    if (l > (oDiv.offsetWidth – oDiv1.offsetWidth)) {
                        l = oDiv.offsetWidth – oDiv1.offsetWidth;
                    }
                    oDiv1.style.left = l + ‘px’;
                    var scale = l / (oDiv.offsetWidth – oDiv1.offsetWidth)
                    document.title = scale;
                    oDiv2.style.width = 400 * scale + ‘px’;
                    oDiv2.style.height = 400 * scale + ‘px’;
                }
                oDiv1.onmouseup = function () {
                    document.onmousemove = null;
                    document.onmouseup = null;
                }
                return false;
            }
        }
    </script>
</body>
</html>

注意：在这个例子中，设置变量scale来存放这个比例具体值。oDiv2.style.width=400scale+’px’; oDiv2.style.height=400scale+’px’;控制大小；

通过滚动条来控制文字的滚动

html 代码

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <title>自定义滚动条控制文字</title>
    <style type=”text/css”>
        #parent {
            width: 600px;
            height: 20px;
            background-color: #ccc;
            position: relative;
            margin-left: 300px;
        }
        #div1 {
            width: 20px;
            height: 20px;
            background-color: red;
            position: absolute;
            top: 0;
            left: 0;
        }
        #div2 {
            width: 400px;
            height: 300px;
            border: 1px solid black;
            overflow: hidden;
            position: relative;
        }
        #div3 {
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>
</head>
<body>
    <span>鼠标点击滑动小方块</span>
    <div id=”parent”>
        <div id=”div1″></div>
    </div>
    <div id=”div2″>
        <div id=”div3″>
            新华网北京7月16日电 15日晚间传来土耳其发生军事政变的消息。自上世纪60年代以来，土耳其平均每10年就要发生一次军事政变。人们不禁要问，土耳其为何政变多发。
            　　土耳其横跨欧亚两大洲，国土包括西亚的小亚细亚半岛和南欧巴尔干半岛的东色雷斯地区。历史上，土耳其是幅员辽阔的奥斯曼帝国的一部分。从19世纪初到第一次世界大战结束的一百多年间，奥斯曼帝国统治下的亚洲、非洲和欧洲地区纷纷独立，奥斯曼帝国土崩瓦解。
            　　第一次世界大战结束后不久，土耳其发生革命，其领导人是穆斯塔法·凯末尔·阿塔图尔克，因此这场革命被称为“凯末尔革命”。凯末尔本人是军人出生，早年曾参加主要由军人策动的青年土耳其革命。在第一次世界大战期间，他因指挥保卫海峡战役击败英法联军而名声大振，成为民族英雄。
            　　“凯末尔革命”中诞生了土耳其共和国，而军人一直在共和国的政治生活中扮演着重要角色，军队实力强大。该国被誉为西亚和中东地区除以色列之外军事力量最强大的国家。1952年土耳其加入北约，其军队被认为是北约第二大常规部队，总兵力约60万。强大的军事力量一直不甘于置身政治生活之外，这是土耳其屡屡发生军人干政甚至军事政变的一个重要原因。
            　　土耳其的绝大多数国民都信奉伊斯兰教。在奥斯曼帝国统治时期，历代君主们为了维持其统治合法性和正统性，不仅把伊斯兰教奉为国教，采纳政教合一政体，而且在全国推行伊斯兰化教育。凯末尔建立现代土耳其之后，严格执行政教分离，军人也成为政教分离政策的坚定捍卫者。
            　　但是，由于文化和历史传统，宗教对土耳其政治生活的影响一直很大，一些政治人物在成为国家领导人后，或明或暗地企图把一些宗教教义引入施政纲领，从而引发世俗开明派与宗教保守派的斗争，同时触动土耳其军人的敏感神经。这是导致土耳其多次发生军人干政甚至军事政变的另一个原因。
            　　土耳其国土的大部分位于亚洲，而且其历史和文化都有着浓郁的东方色彩，但是很多土耳其人却把自己看成是一个欧洲国家和西方世界的一员。这种情况也导致土耳其的政治倾向经常在东方与西方之间摇摆不定。一旦国家政策向某一个方向过分倾斜，就有可能导致政局混乱，这个时候，土耳其军队往往会介入发挥作用。这是土耳其难以消除军人干政阴霾的第三个原因。
        </div>
    </div>
    <script type=”text/javascript”>
        window.onload = function () {
            var oDiv1 = document.getElementById(‘div1’);
            var oDiv = document.getElementById(‘parent’);
            var oDiv2 = document.getElementById(‘div2’);
            var oDiv3 = document.getElementById(‘div3’);
            var tarX = 0;
            oDiv1.onmousedown = function (ev) {
                var oEvent = ev || event;
                tarX = oEvent.clientX – oDiv1.offsetLeft;
                document.onmousemove = function (ev) {
                    var oEvent = ev || event;
                    var l = oEvent.clientX – tarX;
                    if (l < 0) {
                        l = 0;
                    }
                    if (l > (oDiv.offsetWidth – oDiv1.offsetWidth)) {
                        l = oDiv.offsetWidth – oDiv1.offsetWidth;
                    }
                    oDiv1.style.left = l + ‘px’;
                    var scale = l / (oDiv.offsetWidth – oDiv1.offsetWidth)
                    document.title = scale;
                    oDiv3.style.top = -(scale * (oDiv3.offsetHeight – oDiv2.offsetHeight)) + ‘px’;
                }
                oDiv1.onmouseup = function () {
                    document.onmousemove = null;
                    document.onmouseup = null;
                }
                return false;
            }
        }
    </script>
</body>
</html>

注意：
1.将多余文字部分overflow：hidden；
2.通过控制scale与top的乘机来控制文字的实际显示范围oDiv3.style.top=-(scale*(oDiv3.offsetHeight-oDiv2.offsetHeight))+’px’;
3.实例中因为方块只需要左右移动，无需上下移动，因此将所有与纵坐标有关项都不会出现。####

前端开发技能
web前端开发涉及的专业技能
web前端开发技能介绍
» 本文来自：前端开发者 » 《前端javascript自定义滚动条》
» 本文链接地址：https://www.rokub.com/6297.html
» 您也可以订阅本站：https://www.rokub.com
赞(0)
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论