基于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 相关文章推荐
StringTemplate遇见jQuery冲突的解决方法
Sep 22 Javascript
js解析与序列化json数据(一)json.stringify()的基本用法
Feb 01 Javascript
js比较和逻辑运算符的介绍
Mar 10 Javascript
jquery获取tagName再进行判断
May 29 Javascript
jQuery学习笔记之jQuery.fn.init()的参数分析
Jun 09 Javascript
页面内容排序插件jSort使用方法
Oct 10 Javascript
JavaScript必知必会(二) null 和undefined
Jun 08 Javascript
总结在前端排序中遇到的问题
Jul 19 Javascript
js replace()去除代码中空格的实例
Feb 14 Javascript
使用原生js写ajax实例(推荐)
May 31 Javascript
Vue表单及表单绑定方法
Sep 04 Javascript
angular5 子组件监听父组件传入值的变化方法
Sep 30 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
Email+URL的判断和自动转换函数
2006/10/09 PHP
关于Zend Studio 配色方案插件的介绍
2013/06/24 PHP
PHP中的替代语法介绍
2015/01/09 PHP
详解PHP匿名函数与注意事项
2016/03/29 PHP
Symfony2针对输入时间进行查询的方法分析
2017/06/28 PHP
php查看一个变量的占用内存的实例代码
2020/03/29 PHP
javascript的事件描述
2006/09/08 Javascript
图片连续滚动代码[兼容IE/firefox]
2009/06/11 Javascript
JavaScript Event学习第二章 Event浏览器兼容性
2010/02/07 Javascript
使用jquery插件实现图片延迟加载技术详细说明
2011/03/12 Javascript
jquery的冒泡事件的阻止与允许(三种实现方法)
2013/02/01 Javascript
JQuery动画animate的stop方法使用详解
2014/05/09 Javascript
bootstrapfileinput实现文件自动上传
2016/11/08 Javascript
详解bootstrap的modal-remote两种加载方式【强化】
2017/01/27 Javascript
nodeJs链接Mysql做增删改查的简单操作
2017/02/04 NodeJs
强大的 Angular 表单验证功能详细介绍
2017/05/23 Javascript
create-react-app修改为多页面支持的方法
2018/05/17 Javascript
详解如何在Vue项目中导出Excel
2019/04/19 Javascript
微信小程序绑定手机号获取验证码功能
2019/10/22 Javascript
WebStorm无法正确识别Vue3组合式API的解决方案
2021/02/18 Vue.js
[02:06]DOTA2英雄基础教程 暗影萨满
2013/12/16 DOTA
python RabbitMQ 使用详细介绍(小结)
2018/11/08 Python
Tensorflow 实现释放内存
2020/02/03 Python
Python无损压缩图片的示例代码
2020/08/06 Python
HTML5中如何显示视频呢 HTML5视频播放demo
2013/06/08 HTML / CSS
如何估计一张表的大小(假设该表中有1万条数据)
2016/03/27 面试题
中学家长会邀请函
2014/01/17 职场文书
初一家长会邀请函
2014/01/31 职场文书
学习全国两会精神心得体会范文
2014/03/17 职场文书
百日安全活动总结
2014/05/04 职场文书
办理收楼委托书范本
2014/10/09 职场文书
法务专员岗位职责
2015/02/14 职场文书
副总经理岗位职责范本
2015/04/08 职场文书
Python字符串对齐方法使用(ljust()、rjust()和center())
2021/04/26 Python
SpringBoot整合RabbitMQ的5种模式实战
2021/08/02 Java/Android
DIV CSS实现网页背景半透明效果
2021/12/06 HTML / CSS