利用jQuery實現網易郵箱頁面滾動切換代碼



43 169 57



特效描述:利用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

加群請備注:從官網了解到

老夫子电子