js实现全屏滚动 --基于fullPage插件的研究

本文介绍了如何使用fullPage.js实现全屏滚动效果,包括Html、css和js代码的编写,并探讨了背景处理、滚轮事件的控制以及浏览器兼容性问题。通过对fullPage插件的研究,提出了一些优化思路。
摘要由CSDN通过智能技术生成

最近做个一个小项目首页是全屏滚动的,当时我们选择了fullPage.js的插件,当时觉得就是一个纵向的轮播图而已,实现起来应该是比较简单的,抽时间研究了一下,这里总结一下遇到的问题和收获.

Html代码(参考fullPage写的)

<!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">
    <!-- 引入css样式 -->
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./lib/index.css">
    <title>全屏滚动</title>
</head>
<body>
    <div class="fullPage">
        <!-- 头部区 -->
        <div class="header">
            <ul>
                <li><a href="javascript:;">首页</a></li>
                <li><a href="javascript:;">产品</a></li>
                <li><a href="javascript:;">新闻</a></li>
                <li><a href="javascript:;">周边</a></li>
                <li><a href="javascript:;">福利</a></li>
            </ul>
        </div>
        <!-- 内容区 -->
        <div class="full-box">
            <!-- 第一屏 -->
            <div class="full"></div>
            <!-- 第二屏 -->
            <div class="full"></div>
            <!-- 第三屏 -->
            <div class="full"></div>
            <!-- 第三屏 -->
            <div class="full"></div>
            <!-- 第四屏 -->
            <div class="full"></div>
            <!-- 第五屏 -->
            <div class="full"></div>
        </div>
        <!-- 导航区 -->
        <ol class="full-nav"></ol>
        <
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值