這是HTML5頁面，上下切換頁面效果下載，，一個(gè)HTML5+CSS3技術(shù)的3D網(wǎng)頁內(nèi)容切換特效，查看本效果請?jiān)谥С諧SS3/HTML5標(biāo)簽的瀏覽器下運(yùn)行，比如IE9、火狐、Chrome等，ie8不支持本效果。 當(dāng)你打開網(wǎng)頁后，看到灰色背景，右下角會(huì)出現(xiàn)一個(gè)控制按鈕，可上下左右控制網(wǎng)頁向四個(gè)方向滾動(dòng)切換，視覺集中在頁面中央每次切換都是以滾動(dòng)的方式進(jìn)行;頁面不要太震撼，效果不要太絢麗，本人是陪奢華3D界面所征服，前端特效設(shè)計(jì)師可以參考下啊 。rxv紅軟基地

軟件介紹

HTML5頁面，上下切換頁面效果是一款65種全屏超炫頁面切換效果（Page Transitions）網(wǎng)頁特效，透明漸變切換、左右滑動(dòng)切換、3D旋轉(zhuǎn)切換、滾輪切換頁面jQuery插件源碼。請用支持HTML5+CSS3主流瀏覽器預(yù)覽效果。rxv紅軟基地

軟件說明

頁面整屏滑動(dòng)切換（jQuery+HTML5）是專為該需求用戶打造的源碼，適用瀏覽器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗。 不支持IE8及以下瀏覽器。歡迎下載。rxv紅軟基地

相關(guān)介紹

從監(jiān)聽開始，用一個(gè)變量記錄觸摸的起點(diǎn)位置，然后move的時(shí)候用move的觸發(fā)的clientY的值減去起點(diǎn)位置，讓頁面滑動(dòng)那個(gè)差值的距離，這個(gè)距離可能為負(fù)為正，然后end的時(shí)候判斷需要往哪邊修正位置。rxv紅軟基地
end的時(shí)候我做的處理是先判斷滑動(dòng)的方向，（這個(gè)怎么判斷呢？在move的時(shí)候用一個(gè)變量記錄move的位置，然后用最后一個(gè)減去start的時(shí)候記錄的位置，差值正負(fù)就是方向了）我預(yù)先計(jì)算了每一個(gè)div離頁面最頂部的位置，然后倒序找第一個(gè)為負(fù)的元素，如果同時(shí)是向上滑動(dòng)且下一個(gè)元素冒出頭來的距離大于六分之一屏幕，就把下面的拉上來，如果同時(shí)是向下滑動(dòng)且上一個(gè)元素冒出尾部的距離大于六分之一就把上面的拉下來。rxv紅軟基地
其中碰到的坑是move的時(shí)間通過return false無法阻擋默認(rèn)事件，只能e.preventDefault（），但是電腦上模擬移動(dòng)頁面可以使用return falserxv紅軟基地

軟件截圖

rxv紅軟基地