全屏滚动插进-兼容移动端（超出部分可配置）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title>fullpage插件</title>
<style type="text/css">
*{margin:0;padding: 0;box-sizing: border-box;}
html,body{width: 100%;height: 100%;overflow: hidden;}
#fullpage{position: absolute;top:0;left:0;width:100%;height: 100%;}
.section{position: relative;text-align: center;width: 100%;height: 100%;}
.section>p{width: 100%;padding-top: 20px;text-align: center;}
.scroll p{height: 40px;}
.section:nth-child(odd){background-color: #887171;}
.section:nth-child(even){background-color: #ccc;}
</style>
</head>
<body class="wrapper">
<div id="fullpage">
<div class="section"><p>第一页</p></div>
<div class="section"><p>第二页</p></div>
<div class="section"><p>第三页</p></div>
<div class="section scroll">
<p style="height: 50px;">需要特殊处理的一屏</p>
<div class="scroll_inner" style="height:90%;overflow-y: auto;border:1px solid #000;margin:0 20px;">
<p class="text" style="height:auto;line-height: 120px;">
滚动屏<br>滚动屏<br>滚动屏<br>滚动屏<br>滚动屏<br>滚动屏<br>
滚动屏<br>滚动屏<br>滚动屏<br>滚动屏<br>滚动屏<br>滚动屏<br>
滚动屏<br>滚动屏<br>滚动屏<br>滚动屏<br>滚动屏<br>滚动屏<br>
</p>
</div>
</div>
<div class="section"><p>第四页</p></div>
<div class="section"><p>第五页</p></div>
</div>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
(function(factory){if(typeof define==="function"&&define.amd){define(["jquery"],function($){return factory($)})}else{if(typeof module==="object"&&typeof module.exports==="object"){exports=factory(require("jquery"))}else{factory(jQuery)}}})(function($){$.easing.jswing=$.easing.swing;var pow=Math.pow,sqrt=Math.sqrt,sin=Math.sin,cos=Math.cos,PI=Math.PI,c1=1.70158,c2=c1*1.525,c3=c1+1,c4=2*PI/3,c5=2*PI/4.5;function bounceOut(x){var n1=7.5625,d1=2.75;if(x<1/d1){return n1*x*x}else{if(x<2/d1){return n1*(x-=1.5/d1)*x+0.75}else{if(x<2.5/d1){return n1*(x-=2.25/d1)*x+0.9375}else{return n1*(x-=2.625/d1)*x+0.984375}}}}$.extend($.easing,{def:"easeOutQuad",swing:function(x){return $.easing[$.easing.def](x)},easeInQuad:function(x){return x*x},easeOutQuad:function(x){return 1-(1-x)*(1-x)},easeInOutQuad:function(x){return x<0.5?2*x*x:1-pow(-2*x+2,2)/2},easeInCubic:function(x){return x*x*x},easeOutCubic:function(x){return 1-pow(1-x,3)},easeInOutCubic:function(x){return x<0.5?4*x*x*x:1-pow(-2*x+2,3)/2},easeInQuart:function(x){return x*x*x*x},easeOutQuart:function(x){return 1-pow(1-x,4)},easeInOutQuart:function(x){return x<0.5?8*x*x*x*x:1-pow(-2*x+2,4)/2},easeInQuint:function(x){return x*x*x*x*x},easeOutQuint:function(x){return 1-pow(1-x,5)},easeInOutQuint:function(x){return x<0.5?16*x*x*x*x*x:1-pow(-2*x+2,5)/2},easeInSine:function(x){return 1-cos(x*PI/2)},easeOutSine:function(x){return sin(x*PI/2)},easeInOutSine:function(x){return -(cos(PI*x)-1)/2},easeInExpo:function(x){return x===0?0:pow(2,10*x-10)},easeOutExpo:function(x){return x===1?1:1-pow(2,-10*x)},easeInOutExpo:function(x){return x===0?0:x===1?1:x<0.5?pow(2,20*x-10)/2:(2-pow(2,-20*x+10))/2},easeInCirc:function(x){return 1-sqrt(1-pow(x,2))},easeOutCirc:function(x){return sqrt(1-pow(x-1,2))},easeInOutCirc:function(x){return x<0.5?(1-sqrt(1-pow(2*x,2)))/2:(sqrt(1-pow(-2*x+2,2))+1)/2},easeInElastic:function(x){return x===0?0:x===1?1:-pow(2,10*x-10)*sin((x*10-10.75)*c4)},easeOutElastic:function(x){return x===0?0:x===1?1:pow(2,-10*x)*sin((x*10-0.75)*c4)+1},easeInOutElastic:function(x){return x===0?0:x===1?1:x<0.5?-(pow(2,20*x-10)*sin((20*x-11.125)*c5))/2:pow(2,-20*x+10)*sin((20*x-11.125)*c5)/2+1},easeInBack:function(x){return c3*x*x*x-c1*x*x},easeOutBack:function(x){return 1+c3*pow(x-1,3)+c1*pow(x-1,2)},easeInOutBack:function(x){return x<0.5?pow(2*x,2)*((c2+1)*2*x-c2)/2:(pow(2*x-2,2)*((c2+1)*(x*2-2)+c2)+2)/2},easeInBounce:function(x){return 1-bounceOut(1-x)},easeOutBounce:bounceOut,easeInOutBounce:function(x){return x<0.5?(1-bounceOut(1-2*x))/2:(1+bounceOut(2*x-1))/2}})});(function($,window,document,undefined){var pluginName="fullpage";var startX,startY,_height;var defaults={Wrapper:"#fullpage",pageSection:".section",release:"",releaseContent:"",inner:"",page:0,allPage:4};function Plugin(element,options){this.element=element;this.options=$.extend({},defaults,options);this._defaults=defaults;this._name=pluginName;this.size();this.sectionEvent()}Plugin.prototype.size=function(){var self=this;var _p=self.options;var len=$(_p.Wrapper).find(_p.pageSection).length;$(_p.Wrapper).height($(window).height()*len);$(_p.Wrapper).find(_p.pageSection).height($(window).height());_height=$(window).height();$(_p.Wrapper).css("top",-_p.page*$(_p.Wrapper).find(_p.pageSection).height())};Plugin.prototype.GetSlideAngle=function(dx,dy){return Math.atan2(dy,dx)*180/Math.PI};Plugin.prototype.GetSlideDirection=function(startX,startY,endX,endY){var dy=startY-endY;var dx=endX-startX;var result=0;if(Math.abs(dx)<2&&Math.abs(dy)<2){return result}var angle=this.GetSlideAngle(dx,dy);if(angle>=-45&&angle<45){result=4}else{if(angle>=45&&angle<135){result=1}else{if(angle>=-135&&angle<-45){result=2}else{if((angle>=135&&angle<=180)||(angle>=-180&&angle<-135)){result=3}}}}return result};Plugin.prototype.nextPage=function(){var self=this;var _p=self.options;self.unbindEvent($(_p.Wrapper).find(_p.pageSection));_p.page=_p.page>=(_p.allPage-1)?_p.page:_p.page+1;if(_p.page<=(_p.allPage-1)){self.animateEvent()}};Plugin.prototype.beforePage=function(){var self=this;var _p=self.options;self.unbindEvent($(_p.Wrapper).find(_p.pageSection));_p.page=_p.page<=0?0:_p.page-1;if(_p.page>=0){self.animateEvent()}};Plugin.prototype.animateEvent=function(){var self=this;var _p=self.options;$(_p.Wrapper).stop().animate({top:-_p.page*_height},300,"easeInQuart",function(){self.sectionEvent()})};Plugin.prototype.sectionEvent=function(){var self=this;var _p=self.options;$(_p.Wrapper).find(_p.pageSection).each(function(){$(this).on("touchstart",function(ev){var _touch=ev.originalEvent.targetTouches[0];startX=_touch.pageX;startY=_touch.pageY});$(this).on("touchend",function(ev){var endX,endY;var _touch=ev.originalEvent.changedTouches[0];endX=_touch.pageX;endY=_touch.pageY;var direction=self.GetSlideDirection(startX,startY,endX,endY);switch(direction){case 0:break;case 1:self.nextPage();break;case 2:self.beforePage();break}})});$(_p.Wrapper).find(_p.pageSection).each(function(){$(this).on("mousewheel",function(e){var delta=(e.originalEvent.wheelDelta&&(e.originalEvent.wheelDelta>0?1:-1))||(e.originalEvent.detail&&(e.originalEvent.detail>0?-1:1));if(delta>0){self.beforePage()}else{if(delta<0){self.nextPage()}}return false})});if(_p.release!=""){var scrollBox=$(_p.Wrapper).find(_p.release);var scrollInner=$(_p.release).find(_p.releaseContent);var scrTop,scrBottom;self.unbindEvent(scrollBox);scrollBox.on("mousewheel",function(e){scrTop=scrollInner.scrollTop();scrBottom=(scrTop+scrollInner.height())-scrollInner.find(_p.inner).height();var delta=(e.originalEvent.wheelDelta&&(e.originalEvent.wheelDelta>0?1:-1))||(e.originalEvent.detail&&(e.originalEvent.detail>0?-1:1));if(delta>0&&scrTop==0){self.beforePage()}else{if(delta<0&&scrBottom==0){self.nextPage()}}});scrollBox.on("touchstart",function(ev){scrTop=scrollInner.scrollTop();scrBottom=(scrTop+scrollInner.height())-scrollInner.find(_p.inner).height();var _touch=ev.originalEvent.targetTouches[0];startX=_touch.pageX;startY=_touch.pageY});scrollBox.on("touchend",function(ev){var endX,endY;var _touch=ev.originalEvent.changedTouches[0];endX=_touch.pageX;endY=_touch.pageY;var direction=self.GetSlideDirection(startX,startY,endX,endY);switch(direction){case 0:break;case 1:if(scrBottom==0){self.nextPage()}break;case 2:if(scrTop==0){self.beforePage()}break}})}$(window).resize(function(){self.size()})};Plugin.prototype.unbindEvent=function(elem){elem.unbind("touchstart");elem.unbind("touchend");elem.unbind("mousewheel")};$.fn[pluginName]=function(options){return this.each(function(){if(!$.data(this,"plugin_"+pluginName)){$.data(this,"plugin_"+pluginName,new Plugin(this,options))}})}})(jQuery,window,document);
</script>
<script type="text/javascript">
$('body').fullpage({
Wrapper: '#fullpage', //外层容器
pageSection: '.section', //整屏块
release: '.scroll', //可滚动页面
releaseContent: '.scroll_inner',//滚动的外层盒子
inner:'.text',//滚动的内容部分
page: 0, //初始停留页面,从0开始
allPage: 6 //总屏数
});
</script>
</body>
</html>

posted @ 2017-10-10 17:01  humility  阅读(489)  评论(0)  编辑  收藏  举报