前端与移动开发项目一

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端与移动开发项目一相关的知识,希望对你有一定的参考价值。

购物网站宣传页面
案例目的:
复习---复习前面学过的html5+CSS3
综合---综合运用jquery完成案例
拓展---可以做宣传页面或者个人简历

fullpage 全屏插件
全屏滚动效果,原生js也很好实现,主要是用 mousewheel 鼠标滚轮滚动事件, 来判断上滚动还是下滚动,之后设置每次滚动的高度为屏幕的高度即可。但是,虽然效果简单,但是兼容性很差,要做很多兼容处理及比较麻烦啦!(了解一下,有兴趣的同学可以研究一下)
fullPage.js 是一个基于 jQuery 的插件,它能够帮你很方便、很轻松的制作出全屏网站。
github 官网 https://github.com/alvarotrigo/fullPage.js
中文演示地址 http://www.dowebok.com/demo/2014/77/
主要功能有:
支持鼠标滚动
支持前进后退和键盘控制
多个回调函数
支持手机、平板触摸事件
支持 CSS3 动画
支持窗口缩放
窗口缩放时自动调整
可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等等
引用文件

<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="section">第四屏</div>
</div>

javascript入口函数

$(function(){
    $(‘#fullpage‘).fullpage();
});

fullpage 详细参数 

技术分享图片
技术分享图片

以上是关于前端与移动开发项目一的主要内容,如果未能解决你的问题,请参考以下文章

FastBuilder 一款让人上瘾的新一代开发神器

FastBuilder 一款让人上瘾的新一代开发神器

FastBuilder 一款让人上瘾的新一代开发神器

前端与移动开发项目三

前端与移动开发项目二

拥抱下一代前端工具链-Vue老项目迁移Vite探索