js自定义滚动轴

最新推荐文章于 2024-08-21 11:07:47 发布
yl107
最新推荐文章于 2024-08-21 11:07:47 发布
阅读量932
点赞数
分类专栏： js
本文链接：https://blog.csdn.net/yl107/article/details/75136729
版权
js 专栏收录该内容
20 篇文章 1 订阅
订阅专栏
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义滚动轴</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #outer{
            width: 400px;
            height: 400px;
            background:url(img/bg1.png) 0 0 repeat-x;
            margin:100px auto;
            overflow: hidden;
        }
        #l{
            float:left;
            width: 369px;
            height: 100%;
            position: relative;
        }
        #r{
            float:right;
            width: 30px;
            border-left: 1px solid green;
            height: 100%;
            position: relative;
        }
        #contener{
            position: absolute;
        }
        #boy{
            position: absolute;
        }
    </style>
</head>
<body>
    <div id="outer">
        <div id="l">
            <p id="contener">
                夜已深，漆黑一片，景物不可见。但山中并不宁静，猛兽咆哮，震动山河，万木摇颤，乱叶簌簌坠落。

群山万壑间，洪荒猛兽横行，太古遗种出没，各种可怕的声音在黑暗中此起彼伏，直欲裂开这天地。

山脉中，远远望去有一团柔和的光隐现，在这黑暗无尽的夜幕下与万山间犹如一点烛火在摇曳，随时会熄灭。

渐渐接近，可以看清那里有半截巨大的枯木，树干直径足有十几米，通体焦黑。除却半截主干外，它只剩下了一条柔弱的枝条，但却在散发着生机，枝叶晶莹如绿玉刻成，点点柔和的光扩散，将一个村子笼罩。

确切的说，这是一株雷击木，在很多年前曾经遭遇过通天的闪电，老柳树巨大的树冠与旺盛的生机被摧毁了。如今地表上只剩下**米高的一段树桩，粗的惊人，而那仅有的一条柳枝如绿霞神链般，光晕弥漫，笼罩与守护住了整个村子，令这片栖居地朦朦胧胧，犹若一片仙乡，在这大荒中显得很神秘。

村中各户都是石屋，夜深人静，这里祥和而安谧，像是与外界的黑暗还有兽吼隔绝了。

“呜……”

一阵狂风吹过，一片巨大的乌云横空，遮住了整片夜空，挡住了那仅有的一点星华，山脉中更加黑暗了。

一声凶戾的禽鸣自高天传来，穿金裂石，竟源自那片乌云，细看它居然是一只庞大到不可思议的巨鸟，遮天蔽月，长也不知多少里。

路过石村，它俯视下方，两只眼睛宛若两轮血月般，凶气滔天，盯着老柳木看了片刻，最终飞向了山脉最深处。

平静了很长一段时间，直到后半夜，大地颤动了起来，一条模糊的身影从远方走来，竟与群山齐高！

莫名气息散发，群山万壑死一般的寂静，凶禽猛兽皆蛰伏，不敢发出一点声音。

近了，这是一个拥有人形的生物，直立行走，庞大的惊人，身高比肩山岳，浑身没有毛发，通体密布着金色的鳞片，熠熠生辉。面部很平，只有一只竖眼，开合间像是一道金色的闪电划过，犀利慑人。整体血气如海，宛如一尊神魔！

它路过此地，看了一眼老柳木，稍作停留后，似乎急于赶路，最终快速远去，许多山峰被其脚步震的轰鸣，山地剧烈颤抖。

黎明，一条十米长、水桶粗、银光灿灿的蜈蚣在山中蜿蜒而行，像是白银浇铸而成，每一节都锃亮而狰狞，划过山石时铿锵作响，火星飞溅。但最终它却避过了石村，没有侵入，所过之处黑雾翻腾，万兽避退。

一根散发着莹莹绿霞的柔弱柳条在风中轻轻摇曳……


            </p>
        </div>
        <div id="r">
            <img id="boy" src="img/icon1.png">
        </div>
    </div>

    <script>
        var outer = document.getElementById('outer');
        var l = document.getElementById('l');
        var r = document.getElementById('r');
        var contener = document.getElementById('contener');
        var boy = document.getElementById('boy');
        // 鼠标拖动小人
        boy.onmousedown = function(e){
            var e = e || window.event;
            // 阻止默认事件
            if(e.preventDefault){
                e.preventDefault();
            }else{
                e.returnValue = false;
            }
            // 获取鼠标点击时相对小人顶部距离
            var start = e.clientY - outer.offsetTop - boy.offsetTop;
            document.onmousemove = function(e){
                var e = e || window.event;
                // 获取鼠标移动过程中，小人头顶到r div顶部的距离
                var y = e.clientY - outer.offsetTop - start;
                var maxY = r.clientHeight - boy.offsetHeight;
                // 设置y的临界值
                if(y >= maxY){
                    y = maxY;
                }
                if(y <= 0){
                    y = 0;
                }
                boy.style.top = y + 'px';
                // 设置超出部分文字高度与小人可移动距离的比值
                var scaler = (contener.offsetHeight - l.clientHeight) / (r.clientHeight - boy.clientHeight);
                contener.style.top = -scaler*y + 'px';
            }
        }
        document.onmouseup = function(){
            document.onmousemove = null;
        }
        // 添加滚轮功能
        outer.onmousewheel = move;
        outer.addEventListener('DOMMouseScroll',move,false);
        function move(e){
            var e = e||window.event;
            // 获取小人的位置
            var y = boy.offsetTop;
            if(e.detail){
                // 火狐
                if(e.detail > 0){
                    y+=10;
                }else{
                    y-=10;
                }
            }else{
                if(e.wheelDelta > 0){
                    y-=10;
                }else{
                    y+=10;
                }
            }
            if(y >= r.clientHeight - boy.offsetHeight){
                y = r.clientHeight - boy.offsetHeight;
            }
            if(y <= 0){
                y = 0;
            }
            boy.style.top = y + 'px';
            // 设置超出部分文字高度与小人可移动距离的比值
            var scaler = (contener.offsetHeight - l.clientHeight) / (r.clientHeight - boy.clientHeight);
            contener.style.top = -scaler*y + 'px';
        }
    </script>
</body>
</html>