全屏滚动(模仿fullPage.js)

效果可看:fullPage.js官网
1.添加布局、样式和引入jquery

2.鼠标滚动事件

3.处理移动端





5.识别访问浏览器,设置只有手机端才可进行触摸滑动
var browser = {    
    versions: function () {        
        var u = navigator.userAgent, app = navigator.appVersion;        
        return {            
            //移动终端浏览器版本信息            
            trident: u.indexOf('Trident') > -1, //IE内核            
            presto: u.indexOf('Presto') > -1, //opera内核            
            webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核            
            gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核            
            mobile: !!u.match(/AppleWebKit.*Mobile.*/) || !!u.match(/AppleWebKit/), //是否为移动终端            
            ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端            
            android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或者uc浏览器            
            iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1, //是否为iPhone或者QQHD浏览器            
            iPad: u.indexOf('iPad') > -1, //是否iPad            
            webApp: u.indexOf('Safari') == -1 //是否web应该程序,没有头部与底部        
        };    
    }(),    
    language: (navigator.browserLanguage || navigator.language).toLowerCase()
}
if (browser.versions.android || browser.versions.iPhone || browser.versions.iPad) {
//设置移动端处理,即第四点JavaScript代码
}

你可能感兴趣的:(全屏滚动(模仿fullPage.js))