好程式設計師技術分享jQuery實現類似fullpage外掛的全屏滾動效果
好程式設計師技術分享jQuery實現類似fullpage外掛的全屏滾動效果。
結合網上的思路,加上我之前自己做的程式碼,程式碼有這幾種功能:
1.頭部和尾部的內容可以不用滾動,只要中間的滾動就行。
2.支援上一屏和下一屏的動畫觸發
3.支援下一頁和上一頁導航跳轉
4.支援小導航顯示和跳轉到某一頁
HTML程式碼:
<div class="header">header</div>
<div class="doc">
<div class="main">
<div class="page page1">page1</div>
<div class="page page2">page2</div>
<div class="page page3">page3</div>
<div class="page page4">page4</div>
</div>
<div class="page-nav"><i class="current"></i><i></i><i></i><i></i></div>
<a href="javascript:void(0)" class="nextPage">下一頁</a>
</div>
<div class="footer">footer</div>
<script src="http://js.3conline.com/min/temp/v1/lib-jquery1.10.2.js"></script>
<script src="http://js.3conline.com/pcbaby/2017/nianping/pc/jquery-mousewheel.js"></script>
CSS設定時,需要注意有兩個父類元素,最外面的要設定超出高度隱藏。
.doc{height:640px;position:relative;overflow:hidden}
.main{position:relative}
.doc .page{position:absolute;height:100%;width:100%;top:100%}
.doc.done .page{position:static;top:0}
JS程式碼,要注意滾動的相容程式碼用到了jQuery外掛jquery-mousewheel,不要漏掉這個外掛
JS:
$(function() {
var onScroll = false,
curIndex = 0,
len = $(".doc .page").length;
var winHeight = $(window).height();
// var boxHeight = winHeight- 60 >640 ? winHeight - 60 : 640; //當需要顯示所有內容,需要給外層一個固定高度,保證所有內容都能看到
var boxHeight = winHeight - 60;
var toPage = function(curIndex) {
onScroll = true;
var now = -curIndex * boxHeight;
$(".page").eq(curIndex).addClass("current").siblings(".page").removeClass("current");
$(".page-nav i").eq(curIndex).addClass("current").siblings("i").removeClass("current");
$(".main").animate({
top: now + "px"
},1000,function() {
onScroll = false;
});
};
$(".doc").css("height", boxHeight);
$(".main").css("height", boxHeight * len);
$(".page").css("height", boxHeight);
$(".doc").addClass("done");
var pageNext = function() {
if (curIndex == len - 1) return;
curIndex++;
toPage(curIndex);
}
var pagePrev = function() {
if (curIndex == 0) return;
curIndex--;
toPage(curIndex);
}
$(".doc").on("mousewheel",function(e, i) {
if (onScroll) return;
if (i < -.2) {
//向下滾動
pageNext();
} else {
//向上滾動
pagePrev();
}
});
$('.nextPage').on('click',function() {
if (onScroll) return;
pageNext();
});
$('.page-nav i').on('click',function() {
if (onScroll) return;
var index = $(this).index();
toPage(index);
})
開發十年,就只剩下這套架構體系了!
>>>
開發十年,就只剩下這套架構體系了!
>>>
<A href="http://www.goodprogrammer.org/" target="blank">ios培訓</A>------我的objective-c筆記,期待與您交流!
檔案是Objective-C程式設計中是比較重要的一個概念
我們在C語言中引用檔案,有時候會出現重複引用的情況,為了避免發生此種情況,我們想到了一個解決方案。程式碼如下:
#include <stdio.h>
#include "one.h"
#include "two.h"
int main(){
前面我們學習了通過指標遍歷一維陣列,現在我們來通過指標遍歷字串中的所有字元。先來通過陣列的方法進行遍歷,再通過直接字串的方法進行遍歷。程式碼如下:
#include <stdio.h>
#include <string.h>
int main(i
對於C語言中指標是非常重要的內容,也是C語言的魅力所在。下面我們來看一段程式碼理解指標:
#include <stdio.h>
int main(int argc, const char * argv[]) {
//定義int型別的變數a
C語言中的extern關鍵字不僅可以用變數還可以用於函式。當用於函式時,表示宣告函式,引用別人的“外部函式”;當用於變數時,表示宣告一個已經定義過的變數,必須結合定義變數使用。下面我們先來看一個extern用於函式的例子。
先來看一下檔案結構:
test.c中的程式碼如下
開發十年,就只剩下這套架構體系了!
>>>
好程式設計師教程分享關於ajax物件一些常見的問題總結最近比較空閒,於是抽個時間整理些關於a
好程式設計師教程分享Javascript設計模式
方法一 物件字面量表示法 在物件字面量表示法中,一個物件被描述為一組包含在
好程式設計師前端分享HTML5發展史,HTML5草案的前身名為WebApplications1.0,於2004年被WHATWG
好程式設計師Java分享Java案例_英漢字典,在寫程式碼的時候,當滑鼠懸浮在某一個單詞上面的時候,有道詞典點有時會彈出一個訊息氣
好程式設計師前端分享使用JS開發簡單的音樂播放器,最近,我們在教學生使用JavaScript,今天就帶大家開發一款簡單的音樂播放器
好程式設計師Java分享JVM結構,jvm的基本結構,也就是我們俗稱概述。內容很多,而且概念量也很大,關於概念方面,讓概念在你
let&&const
[size=0.9em]let與[size=0.9em]var的區別
let 變數名=變數值
使用let建立變數和使用var建立變數的區別
1、用var宣告的變數會變數提升,用let宣告的變數不會進行變數提升
相容性:
支援 IE8+ 及其他現代瀏覽器。
主要功能:
1.支援滑鼠滾動;
2.支援前進後退鍵盤控制;
3.多個回撥函式;
4.支援手機.移動裝置;
5.支援視窗縮放自動調整;
6.可設定滾動寬度、背景顏色、滾動速度、迴圈選項、回撥、文字對齊
問題:專案中遇到一個頁面,使用了全屏滾動外掛,如下有4屏畫面。使用了 fullpage.js,現在想要取消通過滑鼠滑輪滾動來定位頁面的功能,只通過點選左側選單欄來實現的定位頁面。
(此處前提條件是,原來的滑鼠事件有效,同時點選左側選單欄也能實現定位de)
好程式設計師分享HTML5精品技術文章--前端崗位需求分析,各位小夥伴大家好,根據多年豐富的面試經歷和崗位分析,對前端面試的技
web前端技術分享css盒模型
學習目標
1、認識盒子模型
2、盒子模型的組成部分
3、學習盒子模型的相關元素
好程式設計師web前端技術分享css3舊版彈性盒
1、display:box
說明:
(必須加字首)設定彈性 相關推薦
好程式設計師技術分享jQuery實現類似fullpage外掛的全屏滾動效果
好程式設計師技術分享淺談JavaScript中的閉包
【好程式設計師筆記分享】——檔案和目錄處理
【好程式設計師筆記分享】—— C語言中的檔案包含
【好程式設計師筆記分享】—— 通過指標遍歷字串中的所有字元
【好程式設計師筆記分享】—— C語言指標的理解
【好程式設計師筆記分享】—— C語言中的extern關鍵字
好程式設計師技術分析JavaScript閉包特性詳解
好程式設計師教程分享關於ajax物件一些常見的問題總結
好程式設計師教程分享Javascript設計模式
好程式設計師前端分享HTML5 發展史
好程式設計師Java分享Java案例_英漢字典
好程式設計師前端分享使用JS開發簡單的音樂播放器
好程式設計師Java分享JVM結構
好程式設計師JavaScript分享ES6相關知識
jquery.fullPage.js全屏滾動外掛的使用方法
jQuery fullpage.js 全屏滾動外掛取消滑鼠滾動事件,點選選單欄定位顯示頁面。
好程式設計師分享HTML5精品技術文章--前端崗位需求分析
好程式設計師web前端技術分享css盒模型
好程式設計師web前端技術分享css3舊版彈性盒