基于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 相关文章推荐
jquery api参考 visualjquery 中国线路 速度快
Nov 30 Javascript
合并table相同单元格的jquery插件分享(很精简)
Jun 20 Javascript
Javascript中setTimeOut和setInterval的定时器用法
Jun 12 Javascript
jquery+CSS3模拟Path2.0动画菜单效果代码
Aug 31 Javascript
详解Node.js包的工程目录与NPM包管理器的使用
Feb 16 Javascript
jquery.zclip轻量级复制失效问题
Jan 08 Javascript
Node.js搭建小程序后台服务
Jan 03 Javascript
Vue一次性简洁明了引入所有公共组件的方法
Nov 28 Javascript
JS实现继承的几种常用方式示例
Jun 22 Javascript
ES6中Symbol、Set和Map用法详解
Aug 20 Javascript
微信小程序swiper使用网络图片不显示问题解决
Dec 13 Javascript
浅析TypeScript 命名空间
Mar 19 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入门学习的几个不错的实例代码
2008/07/13 PHP
php数组函数序列之array_key_exists() - 查找数组键名是否存在
2011/10/29 PHP
安装PHP扩展时解压官方 tgz 文件后没有configure文件无法进行配置编译的问题
2020/08/26 PHP
js简单实现用户注册信息的校验代码
2013/11/15 Javascript
js跳转页面方法总结
2014/01/29 Javascript
javascript实现文本域写入字符时限定字数
2014/02/12 Javascript
js判断ie版本号的简单实现代码
2014/03/05 Javascript
JavaScript实现的一个日期格式化函数分享
2014/12/06 Javascript
jquery事件preventDefault()方法用法实例
2015/01/16 Javascript
BootStrop前端框架入门教程详解
2016/12/25 Javascript
基于vue2.0实现简单轮播图
2017/11/27 Javascript
解决Vue2.x父组件与子组件之间的双向绑定问题
2018/03/06 Javascript
python中使用smtplib和email模块发送邮件实例
2014/04/22 Python
Python中3种内建数据结构:列表、元组和字典
2014/11/30 Python
Python中的匿名函数使用简介
2015/04/27 Python
Python中基本的日期时间处理的学习教程
2015/10/16 Python
Python解析树及树的遍历
2016/02/03 Python
python如何在终端里面显示一张图片
2016/08/17 Python
python实现数据导出到excel的示例--普通格式
2018/05/03 Python
python程序封装为win32服务的方法
2021/03/07 Python
python GUI实现小球满屏乱跑效果
2019/05/09 Python
django实现web接口 python3模拟Post请求方式
2019/11/19 Python
探秘TensorFlow 和 NumPy 的 Broadcasting 机制
2020/03/13 Python
Python要求O(n)复杂度求无序列表中第K的大元素实例
2020/04/02 Python
美国家用电器和电子产品商店:Abt
2016/09/06 全球购物
REISS美国官网:伦敦最受欢迎的时尚品牌
2019/08/16 全球购物
Unix如何在一行中运行多个命令
2015/05/29 面试题
优秀小学生家长评语
2014/01/30 职场文书
护士求职信范文
2014/05/24 职场文书
2015年办公室文秘工作总结
2015/04/30 职场文书
2015年酒店年度工作总结
2015/05/23 职场文书
辣妈辣妹观后感
2015/06/10 职场文书
致运动员的广播稿
2015/08/19 职场文书
2016十一国庆节慰问信
2015/12/01 职场文书
关于销售人员的年终工作总结要点
2019/08/15 职场文书
postgreSQL数据库基础知识介绍
2022/04/12 PostgreSQL