鼠标滚轮

window.onmousewheel=function(){};

基本描述

1、我们使用插件fullpage，为了更好的兼容性

2、动画效果是在滚动到这一屏时触发的，此时给当前屏幕加current类，其他的移除current类

3、动画的效果的过渡状态是必须在移除current类的时候移除，在添加current类的时候添加

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        * {

            padding: 0;

            margin: 0;

        }

        .first.current h3 {

            /*过渡  入场需要过渡 ，出场快速..*/

            transition: all 1s;

            transform: translateX(200px) translateY(200px);

        }

    </style>

</head>

<body>

<div id="dowebok">

    <div class="section first">

        <h3>第一屏</h3>

    </div>

    <div class="section second">

        <h3>第二屏</h3>

    </div>

    <div class="section third">

        <h3>第三屏</h3>

    </div>

    <div class="section four">

        <h3>第四屏</h3>

    </div>

    <div class="section five">

        <h3>第五屏</h3>

    </div>

</div>

<script src="js/jquery.min.js"></script>

<script src="js/jquery.fullPage.min.js"></script>

<script>

    //调用全屏的方法

    $(function () {

        $('#dowebok').fullpage({

            //设置每一屏幕的颜色

            sectionsColor: ['#0da5d6', '#2AB561', '#DE8910', '#16BA9D', '#0DA5D6'],

            //loopTop:true,

            // 滚到某一屏之后调用

            afterLoad: function (link, index) {

                // index 当前section的编号

                // current类加给谁 谁就做动画

                $('.section').removeClass('current');

                // 让动画 延迟执行100ms

                setTimeout(function () {

                    $('.section').eq(index - 1).addClass('current');

                }, 100);

            }

        });

    });

</script>

</body>

</html>

网址：http://www.dowebok.com/77.html

html5——全屏滚动的更多相关文章

  1. html5 全屏滚动活动页学习

    先看几个具体的实例: 1.腾讯娱乐:http://ent.qq.com/zt2014/qqent/h5.htm?from=groupmessage&isappinstalled=0 2.苏宁互 ...

  2. pagePiling.js - 创建漂亮的全屏滚动效果

    全屏滚动效果是最近非常流行的网页设计形式,带给用户良好的视觉和交互体验.pagePiling.js 这款 jQuery 插件可以帮助前端开发人员轻松实现这种效果.支持所有的主流浏览器,包括IE8+,支 ...

  3. FullPage.js-基于 jQuery 的插件全屏滚动插件

    fullPage.js 是一个基于 jQuery 的插件,它能够很方便.很轻松的制作出全屏网站.如今我们经常能见到全屏网站,尤其是国外网站.这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容, ...

  4. H5活动全屏滚动页面在安卓智能电视TV调试

    前段时间公司做一个线上活动,在电视上商品促销.产品的要求是每个商品介绍刚好满一屏,按下遥控器向下键可以整屏切换.这种功能如果实在PC端,实现起来非常容易,引用jQuery插件就能实现.但是在安卓智能电 ...

  5. fullpage.js全屏滚动插件使用小结

    刚做好公司网站,通过全屏滚动,显著提高了官网的浏览体验.遂总结一下使用fullpage.js的方法.欢迎指正 一. fullpage.js简介 fullpage.js是一套实现浏览器全屏滚动的js插件 ...

  6. 自己用js实现全屏滚动

    参照fullPage.js的效果,用自己的想法实现的. 实现的效果:1.全屏滚动,滚动一下齿轮就会滚动全屏. 2.自适应缩放,无论怎么改变窗口的大小,都会保证用一个元素占满全屏. 下一步计划: 1.改 ...

  7. AlloyTouch全屏滚动插件发布--30秒搞定顺滑H5页

    原文链接:https://github.com/AlloyTeam/AlloyTouch/wiki/AlloyTouch-FullPage-Plugin 先验货 插件代码可以在这里找到. 注意,虽然是 ...

  8. 全屏滚动效果H5FullscreenPage.js

    前提: 介于现在很多活动都使用了 类似全屏滚动效果 尤其在微信里面 我自己开发了一个快速构建 此类项目的控件 与市面上大部分控件不同的是此控件还支持元素的动画效果 并提供多种元素效果 基于zepto. ...

  9. FullPage.js – 轻松实现全屏滚动（单页网站）效果

    FullPage.js 是一个简单而易于使用的插件,用来创建全屏滚动网站(也被称为单页网站).除了可以创建全屏滚动效果以外,也可以给网站添加一些水平的滑块效果.能够自适应不同的屏幕尺寸,包括平板电脑和 ...

随机推荐

  1. 关于${ctx}拿不到值的问题

    当项目开发时我们喜欢用 <c:set var="ctx" value="${pageContext.request.contextPath}"/>来 ...

  2. 小L 的二叉树（洛谷 U4727）

    题目背景 勤奋又善于思考的小L接触了信息学竞赛,开始的学习十分顺利.但是,小L对数据结构的掌握实在十分渣渣. 所以,小L当时卡在了二叉树. 题目描述 在计算机科学中,二叉树是每个结点最多有两个子结点的 ...

  3. 【Eclipse】Eclipse 快捷键

    Eclipse 快捷键 关于快捷键 Eclipse 的很多操作都提供了快捷键功能,我们可以通过键盘就能很好的控制 Eclipse 各个功能: 使用快捷键关联菜单或菜单项 使用快捷键关联对话窗口或视图或 ...

  4. 洛谷—— P2176 [USACO14FEB]路障Roadblock

    https://www.luogu.org/problem/show?pid=2176 题目描述 每天早晨,FJ从家中穿过农场走到牛棚.农场由 N 块农田组成,农田通过 M 条双向道路连接,每条路有一 ...

  5. WCF 配置文件中的MaxStringContentLength & MaxReceivedMessageSize

    中午测试员在测试系统模块时发现无法通过WCF从服务器下载数据,检查配置文件后,建议开发人员修改站点的WEB.CONFIG文件,具体修改对比如下: 旧的: <binding name=" ...

  6. SpringMVC断言--Assert

    Web 应用在接受表单提交的数据后都需要对其进行合法性检查,如果表单数据不合法,请求将被驳回.类似的,当我们在编写类的方法时,也常常需要对方法入参进行合 法性检查,如果入参不符合要求,方法将通过抛出异 ...

  7. PS和AI软件差别

    首先.PS是处理位图图像的.AI是处理矢量图图形的．那就先说一下两者最主要的问题,位图与矢量图的差别和优缺点.  在计算机画图领域中.依据成图原理和绘制方法的不同.数字图形.图像分为"矢量图 ...

  8. keil编译后生成的M51文件解析

    通过*.m51文件我们能够清楚的看到单片机存储器的使用情况,以及能够看到每一个变量包含局部变量的位置. 之前碰到一个问题,相同的程序,在small模式下编译后执行没问题,但在large模式下能够编译. ...

  9. MySQL用户及数据安全专题

    1 简单介绍 1.1 概要 1.2 权限分类 2 加入用户     2.1 语法例如以下: CREATE USER user_specification [, user_specification] ...

  10. 怎样设置mysql远程訪问

     Mysql默认是不能够通过远程机器訪问的,通过以下的配置能够开启远程訪问 在MySQL Server端: 运行mysql 命令进入mysql 命令模式, mysql> use mysql; ...