基于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 相关文章推荐
ext form 表单提交数据的方法小结
Aug 08 Javascript
Javascript 读书笔记索引贴
Jan 11 Javascript
浅谈Javascript面向对象编程
Nov 15 Javascript
JQuery DataTable删除行后的页面更新利用Ajax解决
May 17 Javascript
使用jquery.qrcode生成彩色二维码实例
Aug 08 Javascript
js实现prototype扩展的方法(字符串,日期,数组扩展)
Jan 14 Javascript
Bootstrap CSS组件之按钮下拉菜单
Dec 17 Javascript
利用Node.js+Koa框架实现前后端交互的方法
Feb 27 Javascript
jquery实现提示语淡入效果
May 05 jQuery
使用vue制作探探滑动堆叠组件的实例代码
Mar 07 Javascript
在Vue-cli里应用Vuex的state和mutations方法
Sep 16 Javascript
使用Vue.js中的过滤器实现幂方求值的方法
Aug 27 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
PHP内存使用情况如何获取
2015/10/10 PHP
禁止直接访问php文件代码分享
2020/05/05 PHP
JavaScript中获取高度和宽度函数总结
2014/10/08 Javascript
JavaScript中匿名函数用法实例
2015/03/23 Javascript
JavaScript里四舍五入函数round用法实例
2015/04/06 Javascript
jquery动感漂浮导航菜单代码分享
2020/04/15 Javascript
JavaScript知识点总结(四)之逻辑OR运算符详解
2016/05/31 Javascript
jQuery数组处理函数整理
2016/08/03 Javascript
JS如何设置cookie有效期为当天24点并弹出欢迎登陆界面
2016/08/04 Javascript
Bootstrap table使用方法详细介绍
2016/12/09 Javascript
利用Vue.js实现checkbox的全选反选效果
2017/01/18 Javascript
详解vue.js全局组件和局部组件
2017/04/10 Javascript
Vue.2.0.5实现Class 与 Style 绑定的实例
2017/06/20 Javascript
详解在Vue中如何使用axios跨域访问数据
2017/07/07 Javascript
weex里Vuex state使用storage持久化详解
2017/09/09 Javascript
详解HTML5 使用video标签实现选择摄像头功能
2017/10/25 Javascript
浅谈手写node可读流之流动模式
2018/06/01 Javascript
JQuery判断radio单选框是否选中并获取值的方法
2019/01/17 jQuery
[03:28]2014DOTA2国际邀请赛 走近EG战队天才中单Arteezy
2014/07/12 DOTA
[10:53]2018DOTA2国际邀请赛寻真——EG
2018/08/11 DOTA
Python读写Excel文件的实例
2013/11/01 Python
python 图像处理画一个正弦函数代码实例
2019/09/10 Python
Python unittest 自动识别并执行测试用例方式
2020/03/09 Python
详解python中的lambda与sorted函数
2020/09/04 Python
python基于pygame实现飞机大作战小游戏
2020/11/19 Python
人事行政主管岗位职责
2013/12/22 职场文书
水利专业大学生职业生涯规划书范文
2014/09/17 职场文书
党的群众路线对照检查材料范文
2014/09/24 职场文书
餐饮食品安全责任书
2015/01/29 职场文书
综治目标管理责任书
2015/05/11 职场文书
node.js使用express-fileupload中间件实现文件上传
2021/07/16 Javascript
Python 键盘事件详解
2021/11/11 Python
Win11 S Mode版本泄露 正式上线后叫做Windows 11 SE
2021/11/21 数码科技
SpringBoot+Redis实现布隆过滤器的示例代码
2022/03/17 Java/Android
Python各协议下socket黏包问题原理
2022/04/12 Python
Go结合Gin导出Mysql数据到Excel表格
2022/08/05 Golang