分享一款jQuery全屏滾動頁面特性案例
分享一款jQuery全屏滾動頁面特性案例。
我們在來往官網，或者小米官網都會看到全屏滾動頁面的一些例子。可以說全屏滾動頁面越來越受歡迎。它們就像是豎著的圖片輪轉一樣。
這樣的頁面有很多，如：iPhone 5C頁面：http://www.dowebok.com/demo/2014/77/index8.html
網易郵箱6.0：http://www.dowebok.com/demo/2014/97/
來往官網：http://www.laiwang.com
百度百科史記2013：http://www.dowebok.com/demo/2014/78/
搜狐快站：http://www.dowebok.com/demo/2014/80/
證券時報網移動產品：http://www.dowebok.com/demo/2014/77/index9.html
郵箱大師：http://www.dowebok.com/demo/126/
360安全路由：http://www.dowebok.com/demo/2014/77/index10.html
等等一些例子。看看實際程式碼：
我們在來往官網，或者小米官網都會看到全屏滾動頁面的一些例子。可以說全屏滾動頁面越來越受歡迎。它們就像是豎著的圖片輪轉一樣。
這樣的頁面有很多，如：iPhone 5C頁面：http://www.dowebok.com/demo/2014/77/index8.html
網易郵箱6.0：http://www.dowebok.com/demo/2014/97/
來往官網：http://www.laiwang.com
百度百科史記2013：http://www.dowebok.com/demo/2014/78/
搜狐快站：http://www.dowebok.com/demo/2014/80/
證券時報網移動產品：http://www.dowebok.com/demo/2014/77/index9.html
郵箱大師：http://www.dowebok.com/demo/126/
360安全路由：http://www.dowebok.com/demo/2014/77/index10.html
等等一些例子。看看實際程式碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Language" content="zh-CN">
<title>jQuery實現滾屏翻頁效果</title>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<style type="text/css">
/* css 重置 */
*{margin:0; padding:0; list-style:none; }
body{ color:#333;font:14px/150% "Microsoft YaHei", Arial,"宋體",sans-serif; text-align:center; background:#DCDCDC; }
img{ border:0; }
a{ text-decoration:none; color:#333; }
a:hover{ text-decoration:underline; }
/* 頂部導航條 - 可無視 */
#header{ position:fixed; _position:absolute; z-index:1; top:0; left:0; width:100%; height:32px; line-height:30px; color:#fff; text-align:left; overflow:hidden; background: #333;}
#header span{ float:right; padding-right:20px; }
#header span a{ margin:0 10px; color:#fff; text-decoration:underline; }
#header h1{ padding:0 10px; font-size:14px; float:left; }
#header .change{ text-align:center; position:absolute; top:0; left:50%; width:280px; margin-left:-140px; height:32px; }
#header .change a{ color:#fff; display:inline-block; *display:inline; zoom:1; padding:0 10px; background:#666; height:32px; line-height:32px; margin:0 5px; }
#header .change a:hover{ text-decoration:none; color:#ff0; }
#header .change a.on{ background:#e60; }
#footer{ height:34px; line-height:34px;}
</style>
<style type="text/css">
html{ overflow-x:hidden; overflow-y:hidden; _background-image:url(about:blank); _background-attachment:fixed; }/* html加上這段程式碼用於取消ie6滾動時候元素震動bug */
#content{ position:relative; z-index:0; }
.article{ background:#04caca; text-align:left; }
.article dt{ width:60%; padding-top:50px; margin:0 auto; font:normal 40px/200% "Microsoft YaHei"; color:#fff; text-shadow:1px 1px 1px #666; }
.article dt em{ font:italic 80px/150% Verdana; margin-right:10px; }
.article dd{ position:relative; z-index:1; width:60%; margin:20px auto 0 auto; }
.article dd .con{ position:relative; z-index:1; padding:30px; font:normal 16px/200% "Microsoft YaHei"; color:#fff; }
.article dd .con p{ text-indent:24px; margin-bottom:20px; }
#art2{ background:#7eb906; }
#art3{ background:#d68432; }
#art4{ background:#aa89d8; }
.sideGuide{ position:fixed; _position:absolute; z-index:1; left:50px; top:150px; width:150px; background:#fff; _top:expression(eval(document.documentElement.scrollTop+150)) }
.sideGuide h3{ height:40px; line-height:40px; background:#f50; font-weight:bold; color:#fff; }
.sideGuide ul{ padding:10px 0; }
.sideGuide li{ height:32px; line-height:32px; position:relative; border-bottom:1px solid #f4f4f4; vertical-align:middle; }
.sideGuide li s{ display:none; position:absolute; top:0; left:-10px; width:10px; background:#555; height:32px; }
.sideGuide li a{ display:block; color:#999; }
.sideGuide li a:hover{ text-decoration:none; color:#f50; }
.sideGuide li.on s{ display:block; }
.sideGuide li.on a{ background:#f4f4f4; color:#333; }
.ie6fixedTL{position:absolute;left:expression(eval(document.documentElement.scrollLeft));}
</style>
<div id="content">
<dl id="art1" class="article">
<dt><em>01</em>作者宣告</dt>
<dd>
<div class="con">
<p>jquery縱向定位滾屏特效程式碼,是個人業餘興趣愛好寫的，是基於jquery一個特效，沒有任何封裝，只是提供一種思考方式和實現方法，程式碼共享可隨便使用，可能存在bug，但本人不承擔任何修復bug的責任。</p>
</div>
</dd>
</dl>
<dl id="art2" class="article">
<dt><em>02</em>電影新聞</dt>
<dd>
<div class="con">
<p>喬治·R·R·馬丁用一部奇幻鉅著籠絡了億萬粉絲，終使得它被搬上小熒屏，卻炮製出了瑰麗如電影的史詩之作。緊接著，它創造高收視，成為金球與艾美的常客，以大投資獲得大回報，更吊足了“冰火迷”的胃口。自2011年暖春推出《權力的遊戲》以來，第一季的浩瀚鋪陳，第二季的華麗發展，至今年第三季的彪悍迴歸，HBO締造了美劇史上的一段奇蹟，贏得口碑與收視的大高潮。七國爭戰的壯烈、宮廷權謀的迂迴、人性與獸性的激烈碰撞，以及活色生香的情色場面，使得它光彩熠熠，且一直呈“漸入佳境”的趨勢。</p>
<p>如今《權力的遊戲》帶著它浩蕩的異鬼軍團，以及錯綜複雜的人際關係脈絡，再次讓觀眾一同見證輝煌，以彰顯其恢弘與細膩，美麗與殘酷。讓我們在此用圖解的形式回溯這部神作的“前世今生”，解讀它的偉大，並且一同期待它華麗的後續吧！</p>
<p>這場“權力的遊戲”，觀眾將奉陪到底！本專題將圖解“冰火”數字圖騰，換個輕鬆的角度，迎接冰火的迴歸。</p>
</div>
</dd>
</dl>
<dl id="art3" class="article">
<dt><em>03</em>人物新聞</dt>
<dd>
<div class="con">
<p>喬治·R·R·馬丁用一部奇幻鉅著籠絡了億萬粉絲，終使得它被搬上小熒屏，卻炮製出了瑰麗如電影的史詩之作。緊接著，它創造高收視，成為金球與艾美的常客，以大投資獲得大回報，更吊足了“冰火迷”的胃口。自2011年暖春推出《權力的遊戲》以來，第一季的浩瀚鋪陳，第二季的華麗發展，至今年第三季的彪悍迴歸，HBO締造了美劇史上的一段奇蹟，贏得口碑與收視的大高潮。七國爭戰的壯烈、宮廷權謀的迂迴、人性與獸性的激烈碰撞，以及活色生香的情色場面，使得它光彩熠熠，且一直呈“漸入佳境”的趨勢。</p>
<p>如今《權力的遊戲》帶著它浩蕩的異鬼軍團，以及錯綜複雜的人際關係脈絡，再次讓觀眾一同見證輝煌，以彰顯其恢弘與細膩，美麗與殘酷。讓我們在此用圖解的形式回溯這部神作的“前世今生”，解讀它的偉大，並且一同期待它華麗的後續吧！</p>
<p>這場“權力的遊戲”，觀眾將奉陪到底！本專題將圖解“冰火”數字圖騰，換個輕鬆的角度，迎接冰火的迴歸。</p>
</div>
</dd>
</dl>
<dl id="art4" class="article">
<dt><em>04</em>電視新聞</dt>
<dd>
<div class="con">
<p>喬治·R·R·馬丁用一部奇幻鉅著籠絡了億萬粉絲，終使得它被搬上小熒屏，卻炮製出了瑰麗如電影的史詩之作。緊接著，它創造高收視，成為金球與艾美的常客，以大投資獲得大回報，更吊足了“冰火迷”的胃口。自2011年暖春推出《權力的遊戲》以來，第一季的浩瀚鋪陳，第二季的華麗發展，至今年第三季的彪悍迴歸，HBO締造了美劇史上的一段奇蹟，贏得口碑與收視的大高潮。七國爭戰的壯烈、宮廷權謀的迂迴、人性與獸性的激烈碰撞，以及活色生香的情色場面，使得它光彩熠熠，且一直呈“漸入佳境”的趨勢。</p>
<p>如今《權力的遊戲》帶著它浩蕩的異鬼軍團，以及錯綜複雜的人際關係脈絡，再次讓觀眾一同見證輝煌，以彰顯其恢弘與細膩，美麗與殘酷。讓我們在此用圖解的形式回溯這部神作的“前世今生”，解讀它的偉大，並且一同期待它華麗的後續吧！</p>
<p>這場“權力的遊戲”，觀眾將奉陪到底！本專題將圖解“冰火”數字圖騰，換個輕鬆的角度，迎接冰火的迴歸。</p>
</div>
</dd>
</dl>
<div class="sideGuide">
<h3>導航</h3>
<ul>
<li class="on"><a href="javascript:void(0)">作者宣告</a><s></s></li>
<li><a href="javascript:void(0)">電影新聞</a><s></s></li>
<li><a href="javascript:void(0)">人物新聞</a><s></s></li>
<li><a href="javascript:void(0)">電視新聞</a><s></s></li>
</ul>
</div>
<script type="text/javascript">
(function($){
var goTo = $(".article");
var guide = $(".sideGuide");
var guideLi = $(".sideGuide li");
var index=0;
var direct=0;
//設定寬高
var resetFun = function(){ goTo.each(function(){ $(this).height( $(window).height() ) }); }
resetFun();
//螢幕滾動
var goToFun = function(){
direct=0;
if(index<0){ index=0; return }
if(index>=guideLi.size()){ index=guideLi.size()-1; return }
$("html,body").stop().animate({ scrollTop:$(window).height()*index },300,"swing",function(){direct=0; }); guideLi.removeClass("on").eq(index).addClass("on");
}
guideLi.each(function(i){ $(this).click(function(){ index=guideLi.index( $(this) ); goToFun(); }) });
$(window).resize(function(){ resetFun() });
/* 滾輪事件 */
var scrollFunc=function(e){
e=e || window.event;
if(e.wheelDelta){ direct+= (-e.wheelDelta/120); }else if(e.detail){ direct+=e.detail/3 ; }
if( direct>=8 ){ goToFun( index++ ) }
if( direct<=-8 ){ goToFun( index-- ) }
}
if( document.addEventListener){ document.addEventListener('DOMMouseScroll',scrollFunc,false); }
window.onmousewheel=document.onmousewheel=scrollFunc;
})(jQuery);
</script>
</div>
</body>
</html>執行效果：
如有不懂，請加qq群：135430763共同學習！
相關文章
- js頁面全屏垂直滾動效果JS
- 頁面全屏垂直平滑滾動程式碼例項
- jQuery 頁面滾動 吸頂 和 吸底jQuery
- 頁面圖片自動滾動
- 遮罩層禁止頁面滾動遮罩
- 禁止頁面滾動的方法
- 頁面滾動偵聽器
- 20 個用於處理頁面滾動效果的 jQuery 外掛jQuery
- vue頁面有彈層，禁止頁面滾動Vue
- vue 監聽頁面滾動事件Vue事件
- Flutter SingleChildScrollView 滾動頁面FlutterView
- 前端頁面自定義滾動條前端
- 滑鼠滾動固定js（jquery）例項分享JSjQuery
- 移動端頁面滾動--解決方法
- 直播平臺製作，禁止頁面滾動 / 滾動事件穿透事件穿透
- 好程式設計師技術分享jQuery實現類似fullpage外掛的全屏滾動效果程式設計師jQuery
- 關於頁面無限滾動思路
- 禁止頁面Body在後臺滾動
- 使用 jQuery Ajax 在頁面滾動時從伺服器載入資料jQuery伺服器
- angular 監聽 Windows 滾動事件 實現頁面滾動載入AngularWindows事件
- 移動端觸屏拖動頁面滾動效果
- 手持彈幕（全屏文字滾動）
- 禁止蒙層底部頁面跟隨滾動
- 滑鼠雙擊頁面實現自動滾動效果
- FullPage.js – 輕鬆實現全屏滾動（單頁網站）效果JS網站
- jQuery寫的文章內容頁右側浮動滾動jQuery
- JQuery iframe頁面jQuery
- H5頁面滾動阻尼效果實現H5
- Flutter 頁面滾動吸頂詳解（NestedScrollView）FlutterView
- jquery列印頁面（jquery.jqprint）jQuery
- 20個精巧走心的單頁滾動網頁設計案例網頁
- fullPage.js全屏滾動外掛APIJSAPI
- jQuery Mobile 頁面事件jQuery事件
- 10行程式碼實現頁面無限滾動行程
- 高效能滾動 scroll 及頁面渲染優化優化
- 解決html5全屏展示後頁面還是可以拖動HTML
- 用 ES6 寫全屏滾動外掛
- jquery “做頁面滾動到某屏時改變狀態標題” 所用知識點記錄jQuery