HTML5购物商城案例

Joker1148

于 2019-03-27 21:48:41 发布

阅读量5k

点赞数

文章标签： HTML5

本文链接：https://blog.youkuaiyun.com/Joker1148/article/details/88854459

版权

本文介绍了一个使用HTML5和fullpage.js构建的购物商城案例，讲解了全屏滚动的实现，包括设置全屏滚动参数、CSS样式修改、动画效果、回调函数的应用以及jQuery相关操作，如show函数、animate函数等。通过这些技巧，实现了丰富的页面过渡和交互效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

用到的技术：fullpage.js—全屏滚动插件
引用的文件

<link rel="stylesheet" href="css/jquery.fullPage.css">
<script src="js/jquery.min.js"></script>
 <!-- jquery.easings.min.js 是必须的，用于 easing 参数，也可以使用完整的 jQuery UI 代替 -->
<script src="js/jquery.easings.min.js"></script>
 <script src="js/jquery.fullPage.js"></script>

HTML结构

<div id="fullpage">
    <div class="section">第一屏</div>
    <div class="section">第二屏</div>
    <div class="section">
        <div class="slide">第三屏的第一屏</div>
        <div class="slide">第三屏的第二屏</div>
        <div class="slide">第三屏的第三屏</div>
        <div class="slide">第三屏的第四屏</div>
    </div>
    <div class="sectio

最低0.47元/天解锁文章