這是HTML5頁面,上下切換頁面效果下載,,一個HTML5+CSS3技術的3D網(wǎng)頁內容切換特效,查看本效果請在支持CSS3/HTML5標簽的瀏覽器下運行,比如IE9、火狐、Chrome等,ie8不支持本效果。 當你打開網(wǎng)頁后,看到灰色背景,右下角會出現(xiàn)一個控制按鈕,可上下左右控制網(wǎng)頁向四個方向滾動切換,視覺集中在頁面中央每次切換都是以滾動的方式進行;頁面不要太震撼,效果不要太絢麗,本人是陪奢華3D界面所征服,前端特效設計師可以參考下啊 。
HTML5頁面,上下切換頁面效果是一款65種全屏超炫頁面切換效果(Page Transitions)網(wǎng)頁特效,透明漸變切換、左右滑動切換、3D旋轉切換、滾輪切換頁面jQuery插件源碼。請用支持HTML5+CSS3主流瀏覽器預覽效果。
頁面整屏滑動切換(jQuery+HTML5)是專為該需求用戶打造的源碼,適用瀏覽器:360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗。 不支持IE8及以下瀏覽器。歡迎下載。
從監(jiān)聽開始,用一個變量記錄觸摸的起點位置,然后move的時候用move的觸發(fā)的clientY的值減去起點位置,讓頁面滑動那個差值的距離,這個距離可能為負為正,然后end的時候判斷需要往哪邊修正位置。
end的時候我做的處理是先判斷滑動的方向,(這個怎么判斷呢?在move的時候用一個變量記錄move的位置,然后用最后一個減去start的時候記錄的位置,差值正負就是方向了)我預先計算了每一個div離頁面最頂部的位置,然后倒序找第一個為負的元素,如果同時是向上滑動且下一個元素冒出頭來的距離大于六分之一屏幕,就把下面的拉上來,如果同時是向下滑動且上一個元素冒出尾部的距離大于六分之一就把上面的拉下來。
其中碰到的坑是move的時間通過return false無法阻擋默認事件,只能e.preventDefault(),但是電腦上模擬移動頁面可以使用return false