zoukankan      html  css  js  c++  java

  • jquery——整屏滚动

    从这里下载了滚轮事件插件：https://github.com/jquery/jquery-mousewheel

            函数节流：js中有些事件的触发频率非常高，在短时间内多次触发执行绑定函数，比如mousemove（）然而这并不是我们想要的效果，解决方法就是通过使用定时器来减少触发的次数，实现函数节流。

    我做了一个这样的页面：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>整页滚动</title>
    <link rel="stylesheet" type="text/css" href="1.css">
    <script type="text/javascript" src="jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="jquery.mousewheel.js"></script>
    <script type="text/javascript">
        $(function(){
            var nowscreen = 0;
            var $h = $(window).height();
            var $points = $('.points li');
            var $pages = $('.pages');
            var len =$('.pages').length;
            var timer = null;

            $pages.eq(0).addClass('moving');
            $pages.css({height:$h});
            //-1 是向下滑动，1是 像上滑动
            $(window).mousewheel(function (event,dat) {

                clearTimeout(timer);

                timer=setTimeout(function () {
                    if(dat==-1)
                    {
                        nowscreen++;
                        if(nowscreen>len-1){
                            nowscreen = len-1;
                        }
                    }
                    else{
                        nowscreen--;
                        if(nowscreen<0)
                        {
                            nowscreen = 0;
                        }
                    }
                    $('.pages_con').animate({top:-$h*nowscreen},300);

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

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

            $points.click(function () {
                $(this).addClass('active').siblings().removeClass('active');
                $('.pages_con').animate({top:-$h*$(this).index()},300);
                $pages.eq($(this).index()).addClass('moving').
                    siblings().removeClass('moving');
            })

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

        <div class="pages page1">
            <div class="main_con">
                <div class="left_img"><img src="images/chicken.png" alt="chicken"></div>
                <div class="right_info">
                    在青青草原上，住着一只外表美丽大方，端庄优雅，
                    内心天真可爱，善良纯真的小chicken，她的名字叫圈圈，
                    虽然不是计算机专业，但是却自学了
                    python、h5、css、js、linux、算法与数据结构，她是
                    真的！真的！真的！真的很不错！
                </div>
            </div>
        </div>

        <div class="pages page2">
            <div class="main_con">
                <div class="left_img1"><img src="images/eat1.png" alt="food"></div>
                <div class="left_img2"><img src="images/eat2.png" alt="food"></div>
                <div class="left_img3"><img src="images/travel1.png" alt="travel"></div>
                <div class="left_img4"><img src="images/travel2.png" alt="travel"></div>
                <div class="info2">
                    她一个人<br>吃饭<br>旅行<br>到处走走停停
                </div>
            </div>
        </div>

        <div class="pages page3">
            <div class="main_con">
                <div class="duck"><img src="images/duck.png" alt="duck"></div>
                <div class="info3">
                    <p>突然有一天，她遇到了他！<br></p>
                    <p>帅气的扁嘴巴，个性的三根头发，小小的眼睛<br></p>
                    <p>他是那么的与众不同</p>
                    <p>仿佛天上掉下来的小天使<br></p>
                    <p>透露着不寻常的智慧与成熟<br></p>
                    <p> 这一刻,圈圈想把头上的小心心摘下来给他！</p>
                </div>
                <div class="heart"><img src="images/heart.png" alt="heart"></div>
                <div class="me"><img src="images/me.png" alt="me"></div>
            </div>
        </div>

        <div class="pages page4">
            <div class="main_con">
                <div class="end_img1"><img src="images/duck_02.png" alt="duck"></div>
                <div class="end_img2"><img src="images/chicken.png" alt="chicken"></div>
                <div class="end">
                    最后，两只可爱的小东西幸福的生活在了一起
                </div>
                <div class="ending">ending...</div>
                <div class="paint paint1"><img src="images/flower.png" alt="love"></div>
                <div class="paint paint2"><img src="images/flower.png" alt="love"></div>
                <div class="paint paint3"><img src="images/flower.png" alt="love"></div>
                <div class="paint paint4"><img src="images/flower.png" alt="love"></div>
                <div class="paint paint5"><img src="images/flower.png" alt="love"></div>
                <div class="paint paint6"><img src="images/flower.png" alt="love"></div>
            </div>
        </div>
    </div>

    <ul class="points">
        <li class="active"></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>

    css:

    body, ul{
    margin: 0;
    padding:0;
}

ul{
    list-style: none;
}

.pages_con{
    position: fixed;
    left:0;
    top:0;
    100%;
    overflow:hidden;
}
.pages{
    position:relative;
}
.page1{background:url("images/background.jpg")top center no-repeat; background-size:cover;}
.page2{background-color: cornflowerblue}
.page3{background-color: hotpink}
.page4{background-color: salmon}

.main_con{

    1262px;
    height:615px;
    /*position:relative;*/
    /*left:50%;*/
    /*top:50%;*/
    /*margin-left:631px;*/
    /*margin-top:-307px;*/
}

.main_con .left_img{

    320px;
    height:360px;
    float:left;
    position:relative;
    left: 80px;
    top:90px;
    opacity: 0;
    filter:alpha(opacity=0);
    transition:all 1000ms ease 300ms;
}

.moving .main_con .left_img{
    left:236px;
    opacity: 1;
    filter:alpha(opacity=100);
}

.main_con .right_info{

    500px;
    height:300px;
    margin-top:50px;
    float:right;
    font-family: "Microsoft YaHei UI";
    font-size:20px;
    line-height: 50px;
    color:#fff;
    text-indent:2em;
    text-align:justify;
    position: relative;
    left:-50px;
    top:38px;
    opacity: 0;
    filter:alpha(opacity=0);
    transition:all 1000ms ease 300ms;
}

.moving .main_con .right_info{
    left:-200px;
    opacity: 1;
    filter:alpha(opacity=1);
}

.main_con .left_img1{
    200px;
    height:200px;
    position: relative;
    left:0;
    top:0;
    transition:all 5000ms ease 300ms;
}

.moving .main_con .left_img1{
    left:121px;
    top:464px;
}

.main_con .left_img2{
    200px;
    height:200px;
    position: relative;
    left:200px;
    top:-200px;
    transition:all 5000ms ease 300ms;
}

.moving .main_con .left_img2{
    left:308px;
    top:80px;
}

.main_con .left_img3{
    200px;
    height:200px;
    position: relative;
    left:400px;
    top:-400px;
    transition:all 5000ms ease 300ms;
}

.moving .main_con .left_img3{
    left:627px;
    top:-15px;
}

.main_con .left_img4{
    200px;
    height:200px;
    position: relative;
    left:945px;
    top:-293px;
    transition:all 5000ms ease 300ms;
}

.moving .main_con .left_img4{
    left:600px;
    top:-600px;
}

.main_con .info2{
    500px;
    height:200px;
    position: relative;
    left:344px;
    top:-539px;
    font: bold 30px/40px 'Microsoft YaHei UI';
    color:#fff;
    text-align: center;
    opacity: 0;
    filter:alpha(opacity=0);
    transition:all 1000ms ease 300ms;
}

.moving .main_con .info2{
    opacity: 1;
    filter: alpha(opacity=1);
}

.main_con .me{
    300px;
    height: 300px;
    position: relative;
    left:-93px;
    top:-433px;
    transition:all 1000ms ease 300ms;
}

.moving .main_con .me{
    left:79px;
}

.main_con .heart{
    200px;
    height:150px;
    position: relative;
    left:400px;
    top:-9px;
    transition:all 5000ms ease 300ms;
}

.moving .main_con .heart{
    top:-426px;
    left:591px;
}

.main_con .duck{
    233px;
    height:300px;
    position: relative;
    left:918px;
    top:141px;
    transition:all 1000ms ease 300ms;
}

.moving .main_con .duck{
    left:695px;
    transition:all 1000ms ease 300ms;
}

.main_con .info3{
    400px;
    height:300px;

    position: relative;
    left:250px;
    top:-164px;
    transition:all 1000ms ease 300ms;

}

.info3 p{
    font-size: 20px;
    font-family: "Microsoft YaHei UI";
    text-align: center;
    color:#fff;
}

.main_con .end_img1{
    200px;
    height:200px;
    position: relative;
    left:719px;
    top:70px;
    transition:all 1000ms ease 300ms;
}

.moving .main_con .end_img1{
    left:548px;
}

.main_con .end_img2{
    200px;
    height:200px;
    position: relative;
    left:190px;
    top:-110px;
    transition:all 1000ms ease 300ms;
}

.moving .main_con .end_img2{
    left:325px;
}

.main_con .end{
    600px;
    height:50px;
    position: relative;
    left:386px;
    top:-18px;
    font-family: "Microsoft YaHei UI";
    font-size:20px;
    line-height: 50px;
    color:#fff;
    transition:all 1000ms ease 300ms;
}

.main_con .ending{
    600px;
    height:50px;
    position: relative;
    left:386px;
    top:0px;
    font-family: "Microsoft YaHei UI";
    font-size:20px;
    line-height: 50px;
    color:#fff;
}

.main_con .paint{
    200px;
    height:200px;
    position: relative;
    transition:all 4000ms ease 300ms;
}
.main_con .paint1{
    left:841px;
    top:-126px;
}

.moving .main_con .paint1{
    transform: rotate(500deg);
}

.main_con .paint2{
    left:12px;
    top:-683px;
}

.moving .main_con .paint2{
    transform: rotate(500deg);
}

.main_con .paint3{
    left:147px;
    top:-643px;
}

.moving .main_con .paint3{
    transform: rotate(500deg);
}

.main_con .paint4{
    left:98px;
    top:-716px;
}

.moving .main_con .paint4{
    transform: rotate(600deg);
}

.main_con .paint5{
    left:799px;
    top:-1226px;
}

.moving .main_con .paint5{
    transform: rotate(600deg);
}

.main_con .paint6{
    left:500px;
    top:-1080px;
}

.moving .main_con .paint6{
    transform: rotate(500deg);
}

.points{
    16px;
    height:176px;
    position: fixed;
    right:20px;
    top:50%;
    margin-top: -88px;
}

.points li{
    13px;
    height:13px;
    margin:16px 0;
    border-radius: 50%;
    border:1px solid #666;
    /*鼠标放上去会出现手形*/
    cursor:pointer;
}
.points li.active{
    background-color: #666;
}

    效果展示：（这几个页面放在一个gif里太大了，所以只能分成四个gif展示）

    总结:

    　　过程中遇到一个问题，在用position定位的时候我算好了left和top，但是每次出来的效果都和我想的不一样，每个特效的left和top值我都是用谷歌浏览器的开发者模式调试出来的，这花费了很长时间。今天研究了一下发现是我用错了position！

    　　在给元素定位的时候，父级使用position：relative；子级使用position：absolute；这样就不会出现上面的问题了。如果子级使用的是position：relative就意味着同级的div在定位之后该位置的占用会影响接下来的left和top，总之之后的position就不只是根据父级元素而定的了。

    　　上面的代码没有改，还是用的position：relative；不过下一次可不能再犯这个错误了！
  • 相关阅读:
    173. Binary Search Tree Iterator
    199. Binary Tree Right Side View
    230. Kth Smallest Element in a BST
    236. Lowest Common Ancestor of a Binary Tree
    337. House Robber III
    449. Serialize and Deserialize BST
    508. Most Frequent Subtree Sum
    513. Find Bottom Left Tree Value
    129. Sum Root to Leaf Numbers
    652. Find Duplicate Subtrees
  • 原文地址：https://www.cnblogs.com/gaoquanquan/p/9214561.html
Copyright © 2011-2022 走看看