JQuery 全屏滚动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>整页滚动</title>
    <link rel="stylesheet" type="text/css" href="css/test.css">
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="js/jquery.mousewheel.min.js"></script>
    <script type="text/javascript">
        $(function(){
            // !!!!!增加定时器之后,出效果会比较缓慢, 应该多些耐性,
            // 耗时:0.5h


            // .
            // 在pages_con中从上到下依次排列了五个页面. 在滚动滑轮或者点击导航点的时候切换索引,在完成切换之后增加moveing属性完成动画.
            var $screen = $('.pages_con')
            // var $screen = $('pages_con')
            // !!!!!!!!!! 在输入变量的时候一定确定是否把引入方式填写正确.
            // !!!!!!!!!! 此处浪费1.5h
            var $pages = $('.pages');
            // var $len = $($pages.length)
            // 此处不需要$() 引导.
            var $len = $pages.length;
            // alert($pages)
            // alert($len) 弹出5,5 个元素

            // 1.此布局中,没有设置高度,需要自己获取窗口高度,然后由此来定位每次页面移动距离.
            var $h = $(window).height();
            // alert($h) 

            $pages.css({'height':$h});

            // 刚开始的时候page1就要增加moving动画
            $pages.eq(0).addClass('moving');

            // -----滑轮事件向下滚动是-1, 用scrollBottom来衡量页数更方便些.----错误! 滚动事件只有-1和1,无所谓正负值方便与否. 更主要应该根据页数布局来衡量计算方式. 

            // 依次从上到下,从上到下浏览,就应该使用scrollTop.
            var $nowscreen = 0;

            var timer = null;
            // 占据变量符.

            //编辑导航点.
            var $points = $('.points li');
            // alert($points.length)

            // 默认激活页面1的导航点.
            $points.eq(0).addClass('active');
        
            // 当发生点击导航点事件时候, 切换页面, 且切换导航点激活状态.
            $points.click(function(){
                $nowscreen = $(this).index();
                $(this).addClass('active').siblings().removeClass('active');
                $screen.animate({'top':-$h*$nowscreen},300)
                $pages.eq($nowscreen).addClass('moving').siblings().removeClass('moving');
            })

            $(window).mousewheel(function(event,dat){
                // 此处单单添加dat不起作用, 需要增加event事件函数.    
                clearTimeout(timer);

                // var timer = setTimeout(function(){
                    // 定时器需要增加var ,  但是不能在每个函数内部分别设置变量.相当于有很多个变量
                timer = setTimeout(function(){

                    //判断滚动事件
                    if (dat==-1||dat<-1) {
                        $nowscreen++;
                    }

                    // else if(dat==1){
                    else if(dat==1||dat>1){
                        $nowscreen--;
                    }

                    // 限制上方屏幕
                    if ($nowscreen<0){
                        $nowscreen=0;
                    }

                    // 限制下方屏幕
                    if ($nowscreen>$len-1){
                        $nowscreen=$len-1;
                    }

                    // document.title=$nowscreen;
                    // $('html body').animate({'top':-$nowscreen*$h});
                    // $(document).scrollTop(-$nowscreen*$h);
                    // 此处因为pages_con的宽高设置都为原本属性的100%, 所以挪动document和htmlbody都没有用;


                    // 判断滚动事件后, 切换页面, 且 切换导航点激活状态.
                    $screen.animate({'top':-$h*$nowscreen},300)

                    $pages.eq($nowscreen).addClass('moving').siblings().removeClass('moving');

                    $points.eq($nowscreen).addClass('active').siblings().removeClass('active');

                },100)

            })

        })

    </script>    
</head>
<body>
    <div class="pages_con">

        <div class="pages page1">
            <div class="main_con">
                <div class="left_img"><img src="images/001.png"></div>
                <div class="right_info">
                Web前端开发是从网页制作演变而来的，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web1.0时代的产物，那时网站的主要内容都是静态的，用户使用网站的行为也以浏览为主。
                    
                </div>
            </div>
        </div>

        <div class="pages page2">
            <div class="main_con">
                <div class="right_img"><img src="images/002.png"></div>
                <div class="left_info">
                2005年以后，互联网进入Web2.0时代，各种类似桌面软件的Web应用大量涌现，网站的前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片，各种富媒体让网页的内容更加生动，网页上软件化的交互形式为用户提供了更好的使用体验，这些都是基于前端技术实现的。
                </div>
            </div>
            
        </div>

        <div class="pages page3">
            <div class="main_con">
                <div class="left_img"><img src="images/004.png"></div>
                <div class="right_info">
                以前会Photoshop和Dreamweaver就可以制作网页，现在只掌握这些已经远远不够了。无论是开发难度上，还是开发方式上，现在的网页制作都更接近传统的网站后台开发，所以现在不再叫网页制作，而是叫Web前端开发。

                </div>
            </div>            
        </div>

        <div class="pages page4">
            <div class="main_con">
                <div class="left_img"><img src="images/003.png"></div>
                <div class="right_info">
                    Web前端开发在产品开发环节中的作用变得越来越重要，而且需要专业的前端工程师才能做好，这方面的专业人才近几年来备受青睐。Web前端开发是一项很特殊的工作，涵盖的知识面非常广，既有具体的技术，又有抽象的理念。简单地说，它的主要职能就是把网站的界面更好地呈现给用户。
                </div>
            </div>            
        </div>

        <div class="pages page5">
            <div class="main_con">
                <div class="center_img"><img src="images/005.png"></div>        
            </div>
            
        </div>
    </div>
    <ul class="points">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>
posted @ 2019-08-13 20:38 Jrri 阅读(644) 评论(0) 收藏举报
刷新页面返回顶部