jquery——整屏滚动

最新推荐文章于 2024-03-21 09:57:25 发布

子非鱼1210

最新推荐文章于 2024-03-21 09:57:25 发布

阅读量183

点赞数

文章标签： javascript ui python ViewUI

原文链接：http://www.cnblogs.com/gaoquanquan/p/9214561.html

版权

从这里下载了滚轮事件插件：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;
    width: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{

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

.main_con .left_img{

    width: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{

    width: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{
    width: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{
    width: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{
    width: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{
    width: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{
    width: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{
    width:300px;
    height: 300px;
    position: relative;
    left:-93px;
    top:-433px;
    transition:all 1000ms ease 300ms;
}

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

.main_con .heart{
    width: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{
    width: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{
    width: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{
    width: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{
    width:200px;
    height:200px;
    position: relative;
    left:190px;
    top:-110px;
    transition:all 1000ms ease 300ms;
}

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

.main_con .end{
    width: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{
    width: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{
    width: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{
    width:16px;
    height:176px;
    position: fixed;
    right:20px;
    top:50%;
    margin-top: -88px;
}

.points li{
    width: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；不过下一次可不能再犯这个错误了！

转载于:https://www.cnblogs.com/gaoquanquan/p/9214561.html

子非鱼1210

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery——整屏滚动

从这里下载了滚轮事件插件：https://github.com/jquery/jquery-mousewheel 函数节流：js中有些事件的触发频率非常高，在短时间内多次触发执行绑定函数，比如mousemove（）然而这并不是我们想要的效果，解决方法就是通过使用定时器来减少触发的次数，实现函数节流。我做了一个这样的页面：<!DOCTYPE html&g...
复制链接

扫一扫