html5——全屏滚动
鼠标滚轮
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——全屏滚动的更多相关文章
- html5 全屏滚动活动页学习
先看几个具体的实例: 1.腾讯娱乐:http://ent.qq.com/zt2014/qqent/h5.htm?from=groupmessage&isappinstalled=0 2.苏宁互 ...
- pagePiling.js - 创建漂亮的全屏滚动效果
全屏滚动效果是最近非常流行的网页设计形式,带给用户良好的视觉和交互体验.pagePiling.js 这款 jQuery 插件可以帮助前端开发人员轻松实现这种效果.支持所有的主流浏览器,包括IE8+,支 ...
- FullPage.js-基于 jQuery 的插件全屏滚动插件
fullPage.js 是一个基于 jQuery 的插件,它能够很方便.很轻松的制作出全屏网站.如今我们经常能见到全屏网站,尤其是国外网站.这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容, ...
- H5活动全屏滚动页面在安卓智能电视TV调试
前段时间公司做一个线上活动,在电视上商品促销.产品的要求是每个商品介绍刚好满一屏,按下遥控器向下键可以整屏切换.这种功能如果实在PC端,实现起来非常容易,引用jQuery插件就能实现.但是在安卓智能电 ...
- fullpage.js全屏滚动插件使用小结
刚做好公司网站,通过全屏滚动,显著提高了官网的浏览体验.遂总结一下使用fullpage.js的方法.欢迎指正 一. fullpage.js简介 fullpage.js是一套实现浏览器全屏滚动的js插件 ...
- 自己用js实现全屏滚动
参照fullPage.js的效果,用自己的想法实现的. 实现的效果:1.全屏滚动,滚动一下齿轮就会滚动全屏. 2.自适应缩放,无论怎么改变窗口的大小,都会保证用一个元素占满全屏. 下一步计划: 1.改 ...
- AlloyTouch全屏滚动插件发布--30秒搞定顺滑H5页
原文链接:https://github.com/AlloyTeam/AlloyTouch/wiki/AlloyTouch-FullPage-Plugin 先验货 插件代码可以在这里找到. 注意,虽然是 ...
- 全屏滚动效果H5FullscreenPage.js
前提: 介于现在很多活动都使用了 类似全屏滚动效果 尤其在微信里面 我自己开发了一个快速构建 此类项目的控件 与市面上大部分控件不同的是此控件还支持元素的动画效果 并提供多种元素效果 基于zepto. ...
- FullPage.js – 轻松实现全屏滚动（单页网站）效果
FullPage.js 是一个简单而易于使用的插件,用来创建全屏滚动网站(也被称为单页网站).除了可以创建全屏滚动效果以外,也可以给网站添加一些水平的滑块效果.能够自适应不同的屏幕尺寸,包括平板电脑和 ...
随机推荐
- codevs3410 别墅房间
题目描述 Description 小浣熊松松到他的朋友家别墅去玩,发现他朋友的家非常大,而且布局很奇怪.具体来说,朋友家的别墅可以被看做一个N*M的矩形,有墙壁的地方被标记为’#’,其他地方被标记为’ ...
- java虚拟机（三）-- 虚拟机类加载机制
1.类加载的时机:类从被加载到虚拟机内存中开始,到卸载出内存为止.包含以下几个阶段: 1.加载 2.验证 3.准备 4.解析 5.初始化 6.使用 7.卸载 2.类加载器的种类 1.启动类加载器:这个 ...
- MEAN,从MONGO DB里弄出点东东来啦，以REST风格显示JSON
最近一直在弄弄的... javascript的风格弄熟了,我觉得肯定很快,,但心中有种感觉,DJANGO和MEAN这种结构,搞大的不行. 因为MVC这种结构感觉不如SPRING这些严谨,是不是我有偏见 ...
- Ubuntu 16.04安装BleachBit清理系统垃圾文件
在LInux下不同于Windows会产生系统垃圾,但是Linux会产生安装软件时的依赖包,比如卸载一个软件,其依赖包是不会删除的.但是可以通过以下命令解决: #清理旧版本的软件缓存 sudo apt- ...
- SiteMesh2-标签库
SiteMesh包括两大标签库. 一.Decorator Tags:被用于建立装饰器页面. 1.<decorator:head/> 插入原始页面(被包装页面)的head标签中的内容(不包 ...
- 【CV论文阅读】YOLO：Unified, Real-Time Object Detection
YOLO的一大特点就是快,在处理上可以达到完全的实时.原因在于它整个检测方法非常的简洁,使用回归的方法,直接在原图上进行目标检测与定位. 多任务检测: 网络把目标检测与定位统一到一个深度网络中,而且可 ...
- java 中public 类
java 中的文件名是以这个文件里面的public 的那个类命名的(也就是说文件名和这个文件里面的那个public 属性的class 名称一样), 同一个文件中不能放多个(超过2个)的pulic 类. ...
- Mac OS忘记password怎么办？无光盘破解Mac OS的管理员password
mac系统10.8.5升级10.10 出现故障,重新启动系统无法登陆,降级系统10.9 后更新10.9.3 finder无法打开,root权限没了,又再一次覆盖安装10.9(为了保护原系统文件.所以覆 ...
- Linux中grep命令的12个实践例子
grep是每个Linux发行版都预装的一个强有力的文件模式搜索工具.无论何种原因,如果你的系统没有预装它的话,你可以很容易的通过系统的包管理器来安装它(Debian/Ubuntu系中的apt-get和 ...
- 深入理解7816（3）-----关于T=0 【转】
本文转载自:http://blog.sina.com.cn/s/blog_4df8400a0102vcyp.html 深入理解7816(3)-----关于T=0 卡片和终端之间的数据传输是通过命令响应 ...