基于jquery实现全屏滚动效果


Posted in Javascript onNovember 26, 2015

那么今天就来介绍这款fullPage,与fullPage.js是不同的,fullpage兼容性更佳,能向下兼容到IE6, 不依赖任何 js 库,可独立使用。功能上虽然不如 fullPage.js 强大,但一般使用已经足够了,尤其是它的动画效果,你可以自由设定缩放、旋转以产生各种各样的动画效果。同时它还支持 fullPage.js 所没有的水平滚动。

  • 兼容桌面端(ie5.5+) 和 手机端
  • 你可以用它来构建你的个人主页或者网页应用
  • 这是一个不使用jQuery小巧的框架 不到9KB

再介绍之前先看一看运行效果图:

基于jquery实现全屏滚动效果

引入核心库,pagefull的依赖任何JS库,所以只需引入它本身就可以了

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

写入html

//请在head区加入以下代码,移动端使用
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
 
<!--[if lte IE 7]>  
<body scroll="no"> 
<![endif]-->
<!--[if gt IE 7]><!--> 
<body> 
<!--<![endif]-->
 <div id="pageContain">
   
  <div class="page page1 current">
   <div class="contain">
     
   </div>
  </div>
 
  <div class="page page2">
   <div class="contain">
     
   </div>
  </div>
 
  <div class="page page3" data-step="4">
   <div class="contain">
    <p class="demo-data-step">data-step可以让你在不切屏的情况下更换动画</p>
   </div>
  </div>
 
  <div class="page page4">
   <div class="contain">
     
   </div>
  </div>
 
  <div class="page page5">
   <div class="contain">
     
   </div>
  </div>
 
  <div class="page page6">
   <div class="contain">
     
   </div>
  </div> 
 </div>
 <ul id="navBar">
  <li>0</li>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
 </ul>
</body>

写入CSS,不熟悉CSS3的朋友请回去补下,这里不做解析了,CSS可以根据项目的需求自由的定义。

html {
 -ms-touch-action: none; /* 阻止windows Phone 的默认触摸事件 */
 }
 body,
 div,
 p {
  margin: 0;
  padding: 0;
 }
 ul {
  list-style: none;
 }
 body {
  width: 100%;
  *cursor: default;
  overflow: hidden;
  font: 16px/1.5 "Microsoft YaHei",Helvetica,STHeiti STXihei,Microsoft JhengHei,Arial;
 }
 #pageContain {
  overflow: hidden;
 }
 .page {
  display: none;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
 }
 .contain {
  width: 100%;
  height: 100%;
  display: none;
  position: relative;
  z-index: 0;
 }
 .current .contain,.slide .contain {
  display: block;
 }
 .current {
  display: block;
  z-index: 1;
 }
 .slide {
  display: block;
  z-index: 2;
 }
 .swipe {
  display: block;
  z-index: 3;
  transition-duration: 0ms !important;
  -webkit-transition-duration: 0ms !important;
 }
 .page1 {
  background: #37c1e3;
 }
 .page2 {
  background: #009922;
 }
 .page3 {
  background: #992211;
 }
 .page4 {
  background: #ff00ff;
 }
 .page5 {
  background: #00ff00;
 }
 .page6 {
  background: #22ffff;
 }
 #navBar {
  z-index: 3;
  position: absolute;
  top: 10%;
  right: 3%;
 }
 #navBar .active {
  background: #ccc;
 }
 #navBar li {
  cursor: pointer;
  margin-bottom: 10px;
  transition: all .7s ease;
  border-radius: 50%;
  line-height: 40px;
  text-align: center;
  width: 40px;
  height: 40px;
 }
 
 
 
 p {
  width: 200px;
  height: 100px;
  color:#fff;
  text-align: center;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -100px;
  margin-top: -50px;
  opacity: 1;
  transition: all .8s ease;
  transform-origin: 50% 50%;
 }
 .step1 p {
  transform: translate(0, -50px);
  -webkit-transform: translate(0, -50px);
 }
 .step2 p {
  opacity: 0;
  transform: scale(2);
  -webkit-transform: scale(2);
 }
 .step3 p {
  transform: scale(1);
  -webkit-transform: scale(1)
  opacity: 1;
 }
 .step4 p {
  -webkit-transform: rotate(360deg) translate(0,-200px) scale(.3);
  transform: rotate(360deg) translate(0,-200px) scale(.3);
  opacity: 0;
 }

写入JS,实现效果

var runPage;
 
runPage = new FullPage({
 
 id : 'pageContain',       // 容器id
 slideTime : 800,        // 每页切换时间,单位为毫秒
 continuous : false,       // 是否循环(即能从最后页跳到第一页面)
 effect : {          // 滚动效果
   transform : {
    translate : 'Y',     // 'X'|'Y'|'XY'|'none' X轴|Y轴|XY轴|无
    scale : [.1, 1],    // [scalefrom, scaleto] [起始缩放比例, 结束时缩放比例]
    rotate : [0, 0]      // [rotatefrom, rotateto] [起始旋转角度, 结束时旋转角度]
   },
   opacity : [0, 1]      // [opacityfrom, opacityto][起始透明度, 结束时透明度]
  },       
 mode : 'wheel,touch,nav:navBar',    // 转换模式 'wheel,touch,nav:navBar' 表示 '滚轮,触摸,导航条:导航条id'
 easing : 'ease'        // easing('ease','ease-in','ease-in-out' 或使用贝塞尔曲线 [.33, 1.81, 1, 1];
 // ,onSwipeStart : function(index, thisPage) { // 触摸开始时的回调函数
 // return 'stop';
 // }
 // ,beforeChange : function(index, thisPage) { // 滑动开始时的回调函数
 // return 'stop';
 // }
 // ,callback : function(index, thisPage) {  // 滑动结束后的回调函数
 // alert(index);
 // };
});

详细参数设置

id String ? 外层包裹id

slideTime Integer (default:800) ? 每页切换时间(毫秒)

effect Object (default:{}) ? 效果参数

mode String (default:'') ? 转换模式 'wheel,touch,nav:navBar' 表示 '滚轮,触摸,导航条:导航条id'

callback Function ? 滑动结束后的回调函数

接口

Fullpage也提供了一些借口供使用此插件的开发者调用:

prev() 直接滑向上一页

next() 直接滑入下一页

thisPage() 返回当前的页码

go(num) 直接滑到第num页

以上就是关于实现类似网易邮箱全屏滚动的效果,希望大家可以制作一个适合于自己网站的全屏滚动效果。

Javascript 相关文章推荐
Prototype1.5 rc2版指南最后一篇之Position
Jan 10 Javascript
为什么Node.js会这么火呢?Node.js流行的原因
Dec 01 Javascript
JS实现下拉菜单赋值到文本框的方法
Aug 18 Javascript
JS延时器提示框的应用实例代码解析
Apr 27 Javascript
js实现人民币大写金额形式转换
Apr 27 Javascript
原生js获取元素样式的简单方法
Aug 06 Javascript
jquery实现的回旋滚动效果完整实例【附demo源码下载】
Sep 20 Javascript
node.js的事件机制
Feb 08 Javascript
简易Vue评论框架的实现(父组件的实现)
Jan 08 Javascript
JS实现从对象获取对象中单个键值的方法示例
Jun 05 Javascript
layui实现三级导航菜单
Jul 26 Javascript
javascript中layim之查找好友查找群组
Feb 06 Javascript
javascript给span标签赋值的方法
Nov 26 #Javascript
谈谈javascript中使用连等赋值操作带来的问题
Nov 26 #Javascript
jQuery实现的AJAX简单弹出层效果代码
Nov 26 #Javascript
js检测iframe是否加载完成的方法
Nov 26 #Javascript
学习JavaScript设计模式(策略模式)
Nov 26 #Javascript
深入浅析同源策略和跨域访问
Nov 26 #Javascript
js实现iframe框架取值的方法(兼容IE,firefox,chrome等)
Nov 26 #Javascript
You might like
开源SNS系统-ThinkSNS
2008/05/18 PHP
php在window iis的莫名问题的测试方法
2013/05/14 PHP
一个基于phpQuery的php通用采集类分享
2014/04/09 PHP
关于php支持分块与断点续传文件下载功能代码
2014/05/09 PHP
php截取指定2个字符之间字符串的方法
2015/04/15 PHP
php 中的closure用法详解
2017/06/12 PHP
YII2自动登录Cookie总是失效的解决方法
2017/06/28 PHP
Laravel框架搜索分页功能示例
2019/02/01 PHP
PHP asXML()函数讲解
2019/02/03 PHP
[原创]站长必须要知道的javascript广告代码
2007/05/30 Javascript
解决jquery的datepicker的本地化以及Today问题
2012/05/23 Javascript
遍历DOM对象内的元素属性示例代码
2014/02/08 Javascript
让JavaScript中setTimeout支持链式操作的方法
2015/06/19 Javascript
cocos2dx骨骼动画Armature源码剖析(一)
2015/09/08 Javascript
javascript随机抽取0-100之间不重复的10个数
2016/02/25 Javascript
浅谈js中的变量名和函数名重名
2017/02/13 Javascript
微信小程序实现动态设置placeholder提示文字及按钮选中/取消状态的方法
2017/12/14 Javascript
Vue 页面切换效果之 BubbleTransition(推荐)
2018/04/08 Javascript
vue使用v-for实现hover点击效果
2018/09/29 Javascript
微信小程序使用map组件实现解析经纬度功能示例
2019/01/22 Javascript
JavaScript实现缓动动画
2020/11/25 Javascript
[00:30]塑造者的传承礼包-戴泽“暗影之焰”套装展示视频
2014/04/04 DOTA
[49:30]DOTA2-DPC中国联赛正赛 Dragon vs Dynasty BO3 第二场 3月4日
2021/03/11 DOTA
Python中random模块用法实例分析
2015/05/19 Python
python实现n个数中选出m个数的方法
2018/11/13 Python
基于Python实现用户管理系统
2019/02/26 Python
python实现数字炸弹游戏程序
2020/07/17 Python
把Anaconda中的环境导入到Pycharm里面的方法步骤
2020/10/30 Python
HTML5学习笔记之html5与传统html区别
2016/01/06 HTML / CSS
西班牙汉普顿小姐:购买帆布鞋和太阳镜
2016/10/23 全球购物
求职信模版
2013/11/30 职场文书
国际贸易求职信
2014/07/05 职场文书
美术专业自荐信
2014/07/07 职场文书
群众路线剖析材料(四风)
2014/11/05 职场文书
2014年党务工作总结
2014/11/25 职场文书
医院党建工作总结2015
2015/05/26 职场文书