滚轮事件

最新推荐文章于 2024-10-12 10:41:56 发布

chepiaozhe2754

最新推荐文章于 2024-10-12 10:41:56 发布

阅读量87

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/ZHANSHIMEIYOU/blog/609017

版权

<!DOCTYPE html>

<html>
<head>
    <meta charset="UTF-8">
    <title>展示</title>
    <script src="js/jquery.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        body {
            width: 100%;
            height: 100%;
        }
        .main {
            height: 100%;
            width: 100%;
            overflow: hidden;
        }
        .main .main-contant {
            position: relative;
        }
        .main .main-contant div {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
            width: 100%;
            color: white;
            text-align: center;
        }
        .main-list-1 {
            background: chocolate;
        }
        .main-list-2 {
            background: goldenrod;
        }
        .main-list-3 {
            background: cadetblue;
        }
        .main-list-4 {
            background: #007aff;
        }
        .main-list-5 {
            background:darkorchid;
        }
    </style>
</head>
<body>
    <!--
        1,元素撑满整个屏幕,并做窗口适配
        2,主体函数编写
        3,mousewheel/DOMMouseScroll事件监听
    -->
    <div class="main">
        <div class="main-contant">
            <div class="main-list-1">
                <h1>第一屏</h1>
            </div>
            <div class="main-list-2">
                <h1>第二屏</h1>
            </div>
            <div class="main-list-3">
                <h1>第三屏</h1>
            </div>
            <div class="main-list-4">
                <h1>第四屏</h1>
            </div>
            <div class="main-list-5">
                <h1>第五屏</h1>
            </div>
        </div>
    </div>
    <script>
        $(function(){
            var mainFunction = {
                valData: function(){
                    var anMain = $('.main'),
                        mainChild = anMain.children('div'),
                        mainChildChild = mainChild[0].children('div'),
                        nub = 5 ,
                        index = 0,
                        falseTrue = true,
                        clientHeight = document.documentElement.clientHeight,
                        clientWidth = document.documentElement.clientWidth;
                    return {
                        anMain : anMain,
                        mainChild : mainChild,
                        mainChildChild : mainChildChild,
                        nub : nub,
                        index : index,
                        falseTrue : falseTrue,
                        clHeight : clientHeight,
                        clWidth : clientWidth
                    }
                },
                fullPage: function (){
                    var daval = mainFunction.valData();
                    daval.mainChild.css({'height': (daval.nub * daval.clHeight), 'width': daval.clWidth});
                    daval.mainChildChild.css({'height': daval.clHeight, 'width': daval.clWidth});
                    daval.anMain.css({'height':daval.clHeight, 'width': daval.clWidth})
                },
                main: function(direction, daval){
                    var index = daval.index+direction,
                        lT = daval.falseTrue;
                    // 判断 index 是否在范围内
                    if(index >= 0 && index < daval.nub ){
                        daval.mainChild.animate({'top': -index * daval.clHeight },100,function(){
                            var cc = true;
                            if (cc == lT){
                                // 重新赋值 deval.index
                                daval.index = index;
                            }
                        });
                    }
                }
            };
            var daval = mainFunction.valData();
            mainFunction.fullPage();
            $(window).on('resize', function(){
                mainFunction.fullPage();
            });
            $('.main-contant').on('document.getBoxObjectFor ? mousewheel : DOMMouseScroll', function(event){
                    var wheelDelta = event.originalEvent.wheelDelta || event.originalEvent.detail,
                        direction = wheelDelta < 0 ? 1 : -1;
                    mainFunction.main(direction, daval);
            });

        });
    </script>
</body>
</html>

转载于:https://my.oschina.net/ZHANSHIMEIYOU/blog/609017