邮箱大师支持html,fullPage.js制作网易邮箱大师页面
fullPage.js制作网易邮箱大师页面
分类:代码
日期:2016-08-02
点击(40,128)
下载(1)
来源:未知
收藏
简介
网易邮箱是国内著名的邮箱,多年的发展累积了大量用户,拥有不错的口碑。2014 年早期,网易邮箱推出了 6.0 版本,更加高大上,小D 也用 fullPage.js 制作了它的介绍页面(点击查看)。近期网易又推出了移动版邮箱客户端——邮箱大师(查看),介绍页面虽然和 6.0 的类似,但还是有较大的不同:邮箱大师使用了 flash,并且滚动后 flash 会重新播放,比较特别。今天小D 就再用 fullPage.js 来制作这个页面吧。
注意:本例无法在本地预览,需要上传到服务器才能预览。
浏览器兼容
IE6+ ✔
Chrome ✔
Firefox ✔
Opera ✔
Safari ✔
制作方法
1、引入文件
除了必须的文件外,我们还使用了 swfobject,这个插件用于处理 flash。
2、HTML
HTML 和以前一样,这里 div#cnt(*) 元素是空的,需要 SEO 的话,可以填入文本内容,这些内容会被 swfobject 处理变成 flash。
3、JavaScript
3.1、把 div#cnt(*) 替换成 flash:
var l = "i10/swf/1.swf?t=" + new Date().getTime(),
j = "i10/swf/2.swf?t=" + new Date().getTime(),
h = "i10/swf/3.swf?t=" + new Date().getTime(),
g = "i10/swf/4.swf?t=" + new Date().getTime(),
d = "i10/swf/5.swf?t=" + new Date().getTime();
var e = 1;
var f = {};
var i = {
wmode: "opaque"
};
var b = "100%",
q = "100%",
n = "9.0.0",
p = "i10/swf/expressInstall.swf";
var k = {};
swfobject.embedSWF(l, "cnt1", b, q, n, p, f, i, k, function(a) {});
swfobject.embedSWF(j, "cnt2", b, q, n, p, f, i, k, function() {});
swfobject.embedSWF(h, "cnt3", b, q, n, p, f, i, k, function() {});
swfobject.embedSWF(g, "cnt4", b, q, n, p, f, i, k, function() {});
swfobject.embedSWF(d, "cnt5", b, q, n, p, f, i, k, function() {});
3.2、使用 fullPage.js 处理页面,并在 onLeave 和 afterLoad 方法里给相应的对象加上 ntfocus() 和 ntunfocus() 方法,使页面滚动时 flash 可以重新播放:
$("#dowebok-Wrap").fullpage({
verticalCentered: false,
navigation: true,
navigationTooltips: ["1", "2", "3", "4", "5", "6"],
afterLoad: function(anchorLink, index){
if(index != 6){
swfobject.getObjectById("cnt" + index).ntfocus();
}
if (isIE6){
$("#fp-nav li a").css("background-position", "-15px 0");
$("#fp-nav li a.active").css("background-position", "0 0");
DD_belatedPNG.fix("#fp-nav li a");
}
},
onLeave: function(index, nextIndex, direction){
if(nextIndex == 6){
return false;
}
swfobject.getObjectById("cnt" + nextIndex).ntunfocus();
}
});
邮箱大师支持html,fullPage.js制作网易邮箱大师页面相关推荐
- HTML 网页制作 网易邮箱登录页面 关键代码
<p><meta http-equiv="Content-Type" content="text/html; charset=utf-8" / ...
- 手机app网易邮箱服务器设置,苹果手机iphone怎么设置网易邮箱 iphone设置网易邮箱教程【步骤】...
苹果手机iphone上有个很强大的邮件功能,可以实时接受邮件,对于商业化的邮箱来说,这个功能非常方便,以下就是苹果手机iphone怎么设置网易邮箱教程,温馨提醒:在添加账户之前,如果您的iphone使 ...
- java制作网易邮箱登录页面_Page Object实例(一) - Java + Selenium 登录163邮箱
Page Object 是什么: Page Object(selenium wiki)是Selenium2开始提供的一种代码设计模式. 其核心思想是把web页面的元素查找及操作和页面测试分离开. 这样 ...
- HTML+CSS项目课2:利用table和表单制作“网易邮箱注册页面”
知识点:html文档基本结构.table标签布局.表单标签的使用.img标签.a标签.p标签等常见标签的使用. 制作网页效果: 网页制作思路: 1.将整个网页分成4部分:3个表格+底部段落文字(3个表 ...
- java制作网易邮箱登录页面,java调用网易邮箱需要注意的点
1.需要开启客户端授权码 授权码开启 https://blog.csdn.net/jinwufeiyang/article/details/76400708?locationNum=7&fps ...
- 邮箱的收信服务器在哪里,网易邮箱帮助中心 - 收信
1. 如何收信? 2. 为什么收不到朋友的来信? 3. 如何删除邮箱中不需要的信件? 4. 如何拒收邮件? 5. POP3 收信有什么好处?如何设置? 6. 如何将信件转移到其他文件夹? 7. 如果收 ...
- 网易邮箱无法验证服务器身份,我的网易邮箱163无法验证是怎么回事?
2006-07-27 在mail.163.com中输入我的用户名和密码后,显示"该页无法显示".而在网易首页( )中却能够正常登陆我的邮箱.这是怎么回事啊?怎样在mail.163. ...
- mysql设计高考倒计时_HTML/CSS+JS制作一个高考倒计时页面
2020-07-09更新 修复倒计时归零后出现负数的bug 自动切换至下一年日期 效果展示 前言 在B站上找视频学习的,勉强搞出来了,写下此篇文章作为笔记,也希望有更多感兴趣的人能够有所收获. (萌新 ...
- 邮箱大师支持html,网易邮箱大师pc版
网易邮箱现在又推出一款新的邮箱客户端应用邮箱大师,是专为手机用户开发的移动终端应用.凭借着网易17年专业邮箱经验,拥有国内最高级别的邮件系统安全认证,能够支持所有的邮箱,自上线以来就受到了广大用户的好 ...
最新文章
- ProxyError: Conda cannot proceed due to an error in your proxy configuration
- Centos7.4安装kvm虚拟机(使用virt-manager管理)
- 如何生成文件夹目录树文件
- MySQL 集群方案介绍
- 1997年投稿,2021年发表!收到录用信那一刻,我即将退休……
- 运行报错:java.io.IOException: invalid constant type: 15
- 你了解部署流水线吗?
- 查看Linux连接数
- 1《游戏脚本高级编程》之命令脚本的随想
- Android Studio GPX文件解析显示地图轨迹和海拔示意(模拟沿轨迹前进)
- 邮编查询经纬度_行政区划省市区邮编区号拼音经纬度全面标准数据库 每月更新...
- View 添加阴影效果
- linux系统github全局加速
- OpenFOAM编程基础(2) -数据读取与保存
- 【项目实战】阿里云轻量云服务器中安装JDK1.8
- 强大易用!新一代爬虫利器 Playwright 的介绍
- 一个菜鸟实习生的月总结
- python输出200以内素数_用python输出100-200间的素数怎么输出?
- Mac系统 Terminal终端功能使用方法
- 戴森AB09洗烘一体机到底贵在哪儿?拆开看看!