利用jQuery实现网易邮箱页面滚动切换代码



39 154 52



特效描述:利用jQuery实现 网易邮箱页面 滚动切换,利用jQuery实现网易邮箱页面滚动切换代码

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/jquery.fullPage.css">

2. 引入JS

<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/jquery.fullPage.min.js"></script>

3. 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://51qianduan.com/">163邮箱</a>
		<a class="mail-126" href="http://51qianduan.com/">126邮箱</a>
		<a class="mail-yeah" href="http://51qianduan.com/">yeah邮箱</a>
	</div>
	<div class="hgroup">
		<h1><a href="http://51qianduan.com/">网易邮箱6.0</a></h1>
		<h2>改变,不止所见。</h2>
	</div>
	<p class="p11">网易邮箱6.0版&mdash;&mdash;2014年最具创意气质的重量级新邮箱,重生光华,为之瞩目。唯美<br>的视觉设计和视觉化交互,无可替代的独创动态情景皮肤,多项国内创意产品专利技术,<br>成就无与伦比的出众品味,无可比拟的美妙体验。</p>
</div>
<div class="section section2">
	<div class="bg"><img src="images/section2.jpg" alt=""></div>
	<div class="bg21"></div>
	<div class="bg22"></div>
	<div class="bg23"></div>
	<strong>[ 视觉·简 ]</strong>
	<h3>华丽蜕变,尽享愉悦之美</h3>
	<p class="p1">秉承网易邮箱经典的清新简洁的设计风格,邮箱 6.0 版带来全新一代的设计理念,更追求极致唯美的视觉设计、传承更多人文和艺术底蕴,华丽蜕变,带来更舒服更爽心悦目的视觉享受。</p>
</div>
<div class="section section3">
	<div class="bg"><img src="images/section3.jpg" alt=""></div>
	<div class="bg31"></div>
	<div class="bg32"></div>
	<div class="bg33"></div>
	<strong>[ 视觉化交互设计 ]</strong>
	<h3>心随眼动,感官直接体验</h3>
	<p class="p3">邮箱 6.0 版采用了全新的视觉化交互设计,通过对界面的整体风格设计、重要信息的视觉化处理以及元素本身的视觉传达优化,来实现产品流程设计和交互行为塑造。从视觉的角度出发,让用户无需多想,直接通过感官与产品进行交互。</p>
</div>
<div class="section section4">
	<div class="bg"><img src="images/section4.jpg" alt=""></div>
	<div class="bg41"></div>
	<div class="bg42"></div>
	<div class="bg43"></div>
	<strong>[ 动态情景皮肤 ]</strong>
	<h3>美轮美奂,百变尽随你心</h3>
	<p class="p1">国内首创动态情景皮肤,可以随着早晚时光,季节主题的变幻而自动切换,实现了在邮箱里也能感受天气和心情的变化,带来完全不同的页面体验并且呈现最佳视觉感受,还特别针对原有邮箱皮肤的对比度和色彩进行了微调,减少视觉疲劳感。</p>
</div>
<div class="section section5">
	<div class="bg"><img src="images/section5.jpg" alt=""></div>
	<strong>[ 功能·创 ]</strong>
	<h3>灵活机变,全面为你而生</h3>
	<div class="bg51">
		<h4>新语音视频邮件</h4>
		<p>写信不再枯燥!在线录制和播放声音和视频邮件,比单纯的文字邮件更感性、更方便,更好玩。</p>
	</div>
	<div class="bg52">
		<h4>虚拟场景写信模式</h4>
		<p>写信可以选择自己喜欢的场景,配合美妙的背景音乐,让写信<br>变得更为有趣和生动。</p>
	</div>
	<div class="bg53">
		<h4>独创智能体检</h4>
		<p>网易邮箱6.0版帮你关注邮箱安全,提醒你及时清理邮件,打<br>造轻量级邮箱。</p>
	</div>
	<div class="bg54">
		<h4>全新多帐号关联</h4>
		<p>一键关联和切换多个网易邮箱,同时对于重要的邮箱帐号进行<br>密码验证保护。</p>
	</div>
</div>
<div class="section section6">
	<div class="bg"><img src="images/section6.jpg" alt=""></div>
	<div class="bg61"></div>
	<div class="bg62"></div>
	<strong>[ 待办邮件 ]</strong>
	<h3>办公利器,工作更高效顺手</h3>
	<div class="txt6">
		<p>独家首创邮件管理方式:待办邮件<br>采用日程的方式第一时间分配和提醒邮件!</p>
		<p>对于需要后续处理的重要邮件,如果正忙来不及处理和回复,只需设置为待办邮件,在待办时间到期时,邮件会在文件夹置顶提示或采用短信方式提醒。</p>
		<p>如此高效迅速处理邮件,让邮件处理过程变成更轻松和快捷。</p>
	</div>
</div>
<div class="section section7">
	<div class="bg"><img src="images/section7.jpg" alt=""></div>
	<div class="bg71"></div>
	<div class="bg72"></div>
	<div class="bg73"></div>
	<strong>[ 联系人邮件 ]</strong>
	<h3>一目了然,来往邮件更清晰</h3>
	<div class="txt7">
		<p>邮箱6.0版带来一种极其简便的方式,管理你和联系人的<br>邮件往来,帮助你精准定位到以联系人为维度的邮件列表。</p>
		<p>同时支持以联系组方式来管理邮件,方便以群或相同关系<br>的群体间的邮件管理,比如:同学组,客户组,公司组等。</p>
	</div>
	<div class="bg74"><img src="images/bg74.png" alt=""></div>
</div>
<div class="section section8">
	<div class="bg"><img src="images/section8.jpg" alt=""></div>
	<div class="bg81"></div>
	<div class="bg82"></div>
	<div class="bg83"></div>
	<div class="bg84"></div>
	<strong>[ 科技.聚 ]</strong>
	<h3>厚积薄发,大幅度提速创新标</h3>
	<p class="p8">邮箱6.0版带来“飞”一般的访问体验,速度提升达30%。采用全新base基础库bjs,更加轻量级,性能更加优化,完全兼容国内用户使用的所有浏览器,以及基于"多核"多线程的核心js引擎,性能和访问速度大幅提升。</p>
</div>
<div class="section section9">
	<div class="bg"><img src="images/section9.jpg" alt=""></div>
	<strong>[ 让沟通更有趣 ]</strong>
	<h3><span></span>沟通无界,连接易信无缝整合</h3>
	<div class="bg91">
		<p>易信扫描二维码即可登录网易<br>邮箱6.0版,“扫一扫”让邮<br>箱登录更方便。</p>
	</div>
	<div class="bg92">
		<p>登录邮箱后,可直接使用Web<br>易信和好友聊天,还可以发图<br>片,让聊天更有趣。</p>
	</div>
	<div class="bg93">
		<p>易信和邮箱新邮件同步提醒,<br>在易信可以直接查看和回复<br>邮件,手机收发邮件更快捷。</p>
	</div>
</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://51qianduan.com/">马上体验</a>
	<p class="copyright">
		<a href="javascript:"></a>
		<span>|</span>
	</p>
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动 滚动条 页面滚动 滚动插件 滚动条插件 滚动条美化 二维码 头像上传 图片上传 图片全屏 图片淡出淡进 图片淡出 图片淡进 图片延迟加载 图片延迟 图片加载 图片翻转 图片旋转 图片叠加 图片层叠 图片放大镜 图片拖动 图片拖拽 图片广告 地图 中国地图 世界地图 带缩略图的幻灯片 h5图片动画 h5图标动画 html5图片动画 html5图标动画 flash焦点图 flash幻灯片 flashbanner flash图片轮播 滚动切换 滚动条切换 滑动选项卡 滑动切换 图片放大缩小 图片缩放 图片大小 图片放大 图片缩小 图片变大 图片变小 图片滑动 图片滑块 图片收缩展开 图片收缩 图片展开 图片切换 图片选项卡 图标选项卡 图片滚动 图片滚动条 旋转木马 图片旋转木马 文字旋转木马 旋转木马插件 纯图片轮播 图片轮播 图标导航 图标菜单 自动滚动图片轮播 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 背景切换 大图切换 滑动手风琴 手风琴 水平手风琴 垂直手风琴 图片手风琴 文字手风琴 手风琴插件 图表 焦点图 幻灯片 轮播图 bar焦点图 图片 图片插件 头像截图 全屏滚动 全屏焦点图 全屏切换 响应式图片 图片切换 切换图片

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到