全图滚动demo

最新推荐文章于 2019-09-15 20:25:12 发布

hr226

最新推荐文章于 2019-09-15 20:25:12 发布

阅读量88

点赞数

分类专栏： demo 文章标签：全图滚动demo

本文链接：https://blog.csdn.net/hr226/article/details/100694182

版权

demo 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

三种方式实现全图滚动：
1、css
2、jQuery
3、SmoothScroll插件

三种方式实现全图滚动.html 文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>三种方式实现全图滚动</title>
    <link rel="stylesheet" href="./三种方式实现全图滚动.css">
</head>
<body>
    <div class="container">
        <!-- 导航 -->
        <nav class="navbar">
            <ul>
                <li><a href="#home">主页</a></li>
                <li><a href="#about">关于我们</a></li>
                <li><a href="#service">服务</a></li>
                <li><a href="#contact">联系我们</a></li>
            </ul>
        </nav>
        <!-- 内容 -->
        <section id="home">
            <h1>欢迎大家学习米斯特吴的课程</h1>
            <p class="lead">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique dignissimos ratione eum odit nesciunt nisi!
            </p>
        </section>
        <section id="about">
            <h1>米斯特吴的课程的关于</h1>
            <p class="lead">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique dignissimos ratione eum odit nesciunt nisi!
            </p>
        </section>
        <section id="service">
            <h1>米斯特吴的课程的服务</h1>
            <p class="lead">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique dignissimos ratione eum odit nesciunt nisi!
            </p>
        </section>
        <section id="contact">
            <h1>米斯特吴的联系方式是：27732357</h1>
            <p class="lead">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique dignissimos ratione eum odit nesciunt nisi!
            </p>
        </section>
    </div>
    <!-- <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> -->
    <script src="https://cdn.bootcss.com/smooth-scroll/16.1.0/smooth-scroll.min.js"></script>
    <script src="./三种方式实现全图滚动.js"></script>
</body>
</html>

三种方式实现全图滚动.css 文件

/* 全局样式初始化 */
* {
    margin: 0;
    padding: 0;
}
body {
    font-family: Arial, Helvetica, sans-serif;
    background: #333;
    color: #fff;
    height: 100vh;
    line-height: 1.6;
    overflow: hidden;
}
.container {
    width: 100%;
    height: 100%;
    /* 使用css实现全图滚动 */
    /* overflow-y: scroll;
    scroll-behavior: smooth;
    scroll-snap-type: y mandatory; */
}
.navbar {
    position: fixed;
    top: 0;
    z-index: 1;
    width: 100%;
    height: 60px;
    background: rgba(0, 0, 0, 0.7);
}
.navbar ul {
    display: flex;
    list-style: none;
    width: 100%;
    justify-content: center;
}
.navbar ul li {
    margin: 0 1rem;
    padding: 1rem;
}
.navbar ul li a {
    text-decoration: none;
    color: #f4f4f4;
}
.navbar ul li a:hover {
    color: skyblue;
}
section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
    height: 100vh;
    /* scroll snap 滚动时两屏的高度哪个最多就展示那一屏 */
    /* scroll-snap-align: center; */
}
section h1 {
    font-size: 4rem;
}
section p {
    font-size: 1.5rem;
}
section#home {
    background: url("https://images.pexels.com/photos/34140/pexels-photo.jpg?auto=compress&cs=tinysrgb&dpr=1&w=500") no-repeat center center/cover;
}
section#about {
    background: url("https://images.pexels.com/photos/1591060/pexels-photo-1591060.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500") no-repeat center center/cover;
}
section#service {
    background: url("https://images.pexels.com/photos/1591061/pexels-photo-1591061.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500") no-repeat center center/cover;
}
section#contact {
    background: url("https://images.pexels.com/photos/1591057/pexels-photo-1591057.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500") no-repeat center center/cover;
}

三种方式实现全图滚动.js 文件

// 第二种全图滚动
/* $(".navbar a").on('click', function (e) {
    // console.log(e); //可以用es6语法
    // console.log(this.hash); //不可用es6语法
    if (this.hash !== '') {
        e.preventDefault();
        const hash = this.hash;
        $('html,body').animate({
            scrollTop: $(hash).offset().top
        }, 800);
    }
}); */

// 第三种全图滚动
const scroll = new SmoothScroll(".navbar a[href*='#']", {
    speed: 500
});

hr226

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
全图滚动demo

三种方式实现全图滚动：1、css2、jQuery3、SmoothScroll插件三种方式实现全图滚动.html 文件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=d...
复制链接

扫一扫