基于JQuery实现仿网易邮箱全屏动感滚动插件fullPage


Posted in Javascript onSeptember 20, 2015

先给大家展示效果图如下所示:

基于JQuery实现仿网易邮箱全屏动感滚动插件fullPage

使用方法:

首先在head区引入jquery.js,jquery-ui.js,fullPage.js以及样式文件jquery.fullPage.css

<link rel="stylesheet" href="css/jquery.fullPage.css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/jquery.fullPage.min.js"></script>

接着构建html代码,这里的代码较长,所以中间用…代替

<div class="section section1">
<div class="bg"><img src="images/section1.jpg" alt=""></div>
<div class="bg11"></div>
<div class="bg12"></div>
<div class="bg13"></div>
<div class="mail">
<a class="mail-163" href="http://www.jqcool.net/">163邮箱</a>
<a class="mail-126" href="http://www.jqcool.net/">126邮箱</a>
<a class="mail-yeah" href="http://www.jqcool.net/">yeah邮箱</a>
</div>
<div class="hgroup">
<h1><a href="http://www.jq22.com/">网易邮箱6.0</a></h1>
<h2>改变,不止所见。</h2>
</div>
<p class="p11">网易邮箱6.0版——2014年最具创意气质的重量级新邮箱,重生光华,为之瞩目。唯美<br>的视觉设计和视觉化交互,无可替代的独创动态情景皮肤,多项国内创意产品专利技术,<br>成就无与伦比的出众品味,无可比拟的美妙体验。</p>
</div>
<div class="section section2">内容</div>
<div class="section section3">内容</div>
...
<div class="section section9">内容</div>
<div class="section section10">
 <div class="bg"><img src="images/section10.jpg" alt=""></div>
 <div class="bg101"></div>
 <div class="bg102"></div>
 <div class="bg103"></div>
 <a class="go" href="http://www.jqcool.net/">马上体验</a>
 <p class="copyright">
 <a href="javascript:">关于网易</a>
 <a href="javascript:">关于网易免费邮</a>
 <a href="javascript:">邮箱官方博客</a>
 <a href="javascript:">客户服务</a>
 <a href="javascript:">隐私政策</a>
 <span>|</span>
 <span>网易公司版权所有 © 1997-2014 </span>
 </p>
</div>

为了兼容 IE 低版本,“大背景”使用的是 img 方式(section1.jpg),并在 CSS 中设置 img 宽度和高度 100%,以填满整个屏幕。

JavaScript

$(function(){
 if($.browser.msie && $.browser.version < 10){
 $('body').addClass('ltie10');
 }
 $.fn.fullpage({
 verticalCentered: false,
 anchors: ['page1', 'page2', 'page3', 'page4', 'page5', 'page6', 'page7', 'page8', 'page9', 'page10'],
 navigation: true,
 navigationTooltips: ['首页', '视觉', '交互', '皮肤', '功能', '待办邮件', '联系人邮件', '科技', '连接易信', '马上体验']
 });
});

为了在不支持 CSS3 动画的低版本 IE 中有更好的体验,我们对浏览器进行判断,如果 IE 版本低于 10,就给 body 加上一个 ltie10 类。这个类的主要作用是解决低版本 IE 在滚动时,背景图片立刻隐藏的问题。

Javascript 相关文章推荐
JQuery CSS样式控制 学习笔记
Jul 23 Javascript
jQuery操作select的实例代码
Jun 14 Javascript
JS弹出窗口代码大全(详细整理)
Dec 21 Javascript
可在线编辑网页文字效果代码(单击)
Mar 02 Javascript
基于jQuery.Hz2Py.js插件实现的汉字转拼音特效
May 07 Javascript
JS实现生成会变大变小的圆环实例
Aug 05 Javascript
深入理解javascript作用域第二篇之词法作用域和动态作用域
Jul 24 Javascript
移动端点击图片放大特效PhotoSwipe.js插件实现
Aug 25 Javascript
Vue.js快速入门实例教程
Oct 15 Javascript
使用weixin-java-tools完成微信授权登录、微信支付的示例
Sep 26 Javascript
解决node.js含有%百分号时发送get请求时浏览器地址自动编码的问题
Nov 20 Javascript
js实现旋转木马轮播图效果
Jan 10 Javascript
用户代理字符串userAgent可实现的四个识别
Sep 20 #Javascript
jquery+正则实现统一的表单验证
Sep 20 #Javascript
基于JavaScript实现生成名片、链接等二维码
Sep 20 #Javascript
jQuery实现单击弹出Div层窗口效果(可关闭可拖动)
Sep 19 #Javascript
JS+CSS实现简单滑动门(滑动菜单)效果
Sep 19 #Javascript
jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果
Sep 19 #Javascript
jQuery实现点击按钮弹出可关闭层的浮动层插件
Sep 19 #Javascript
You might like
PHP3 safe_mode 失效漏洞
2006/10/09 PHP
利用PHP访问MySql数据库的逻辑操作以及增删改查的实例讲解
2017/08/30 PHP
php实现数字补零的方法总结
2018/09/12 PHP
PHP+Apache实现二级域名之间共享cookie的方法
2019/07/24 PHP
php集成开发环境详解
2019/09/24 PHP
利用jQuery 实现GridView异步排序、分页的代码
2010/02/06 Javascript
基于JQuery的asp.net树实现代码
2010/11/30 Javascript
javascript时区函数介绍
2012/09/14 Javascript
javascript dom追加内容实现示例
2013/09/21 Javascript
JavaScript立即执行函数的三种不同写法
2014/09/05 Javascript
利用n工具轻松管理Node.js的版本
2017/04/21 Javascript
nuxt.js 缓存实践
2018/06/25 Javascript
vue框架搭建之axios使用教程
2018/07/11 Javascript
Vue.js项目实战之多语种网站的功能实现(租车)
2019/08/07 Javascript
Layui Form 自定义验证的实例代码
2019/09/14 Javascript
微信小程序多列表渲染数据开关互不影响的实现
2020/06/05 Javascript
python进程管理工具supervisor的安装与使用教程
2017/09/05 Python
Python中将变量按行写入txt文本中的方法
2018/04/03 Python
python采集微信公众号文章
2018/12/20 Python
python 怎样将dataframe中的字符串日期转化为日期的方法
2019/09/26 Python
python jenkins 打包构建代码的示例代码
2019/11/29 Python
利用Python脚本实现自动刷网课
2020/02/03 Python
python上下文管理器异常问题解决方法
2021/02/07 Python
巧用 CSS3的webkit-box-reflect 倒影实现各类动效
2021/03/05 HTML / CSS
详解WebSocket跨域问题解决
2018/08/06 HTML / CSS
eBay法国购物网站:eBay.fr
2017/10/21 全球购物
美国用餐电影院:Alamo Drafthouse Cinema
2020/01/23 全球购物
运动会入场词60字
2014/02/15 职场文书
食品安全演讲稿
2014/09/01 职场文书
个人批评与自我批评总结
2014/10/17 职场文书
社区党风廉政建设调研报告
2015/01/01 职场文书
2015年推普周活动总结
2015/03/27 职场文书
少先队入队仪式主持词
2015/07/04 职场文书
2016年寒假生活小结
2015/10/10 职场文书
大学学习委员竞选稿
2015/11/20 职场文书
MySQL 中如何归档数据的实现方法
2022/03/16 SQL Server