onepage scorll全屏滚动插件特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 onepage scorll全屏滚动插件特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="JS代码,全屏广告,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为onepage scorll全屏滚动插件，属于站长常用代码" />
<title>onepage scorll全屏滚动插件</title>
<link href="css/lrtk.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<!-- 代码 开始 -->
<div class="wrap">
	<p>onepage-scroll 是一个基于 jQuery 的插件，它能够很方便、很轻松的制作出单页/全屏滚动页面。</p>
	<ul>
		<li><a href="index2.html" target="_blank">基本演示</a></li>
		<li><a href="index3.html" target="_blank">不显示项目导航</a></li>
		<li><a href="index4.html" target="_blank">显示命名锚记</a></li>
		<li><a href="index5.html" target="_blank">禁止循环滚动</a></li>
		<li><a href="index6.html" target="_blank">回退（使用浏览器自带滚动）</a></li>
		<li><a href="index7.html" target="_blank">指定回退</a></li>
		<li><a href="index8.html" target="_blank">水平/横向滚动</a></li>
		<li><a href="index9.html" target="_blank">回调函数</a></li>
	</ul>
</div>
<!-- 代码 结束 -->
</body>
</html>

HTML代码(index2.html):

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jQuery单页/全屏滚动插件onepage-scroll演示</title>
<link rel="stylesheet" href="css/onepage-scroll.css" />
<style>
.page1 { background-color: #1bbc9b;}
.page2 { background-color: #FF7F50;}
.page3 { background-color: #4BBFC3;}
.page4 { background-color: #f90;}
p.title { position: relative; top: 35%; font: 700 40px "Microsoft Yahei"; color: #fff; text-align: center;}
</style>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.onepage-scroll.min.js"></script>
<script>
$(function(){
	$('.main').onepage_scroll({
		sectionContainer: '.page'
	});
});
</script>
</head>

<body>
<div class="main">
	<div class="page page1">
		<p class="title">第一屏</p>
	</div>
	<div class="page page2">
		<p class="title">第二屏</p>
	</div>
	<div class="page page3">
		<p class="title">第三屏</p>
	</div>
	<div class="page page4">
		<p class="title">第四屏</p>
	</div>
</div>


</body>
</html>

HTML代码(index3.html):

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jQuery单页/全屏滚动插件onepage-scroll演示-不显示项目导航</title>
<link rel="stylesheet" href="css/onepage-scroll.css" />
<style>
.page1 { background-color: #1bbc9b;}
.page2 { background-color: #FF7F50;}
.page3 { background-color: #4BBFC3;}
.page4 { background-color: #f90;}
p.title { position: relative; top: 35%; font: 700 40px "Microsoft Yahei"; color: #fff; text-align: center;}
</style>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.onepage-scroll.min.js"></script>
<script>
$(function(){
	$('.main').onepage_scroll({
		sectionContainer: '.page',
		pagination: false
	});
});
</script>
</head>

<body>
<div class="main">
	<div class="page page1">
		<p class="title">右边的圆点项目导航不见了</p>
	</div>
	<div class="page page2">
		<p class="title">第二屏</p>
	</div>
	<div class="page page3">
		<p class="title">第三屏</p>
	</div>
	<div class="page page4">
		<p class="title">第四屏</p>
	</div>
</div>

</body>
</html>

HTML代码(index4.html):

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jQuery单页/全屏滚动插件onepage-scroll演示-显示命名锚记</title>
<link rel="stylesheet" href="css/onepage-scroll.css" />
<style>
.page1 { background-color: #1bbc9b;}
.page2 { background-color: #FF7F50;}
.page3 { background-color: #4BBFC3;}
.page4 { background-color: #f90;}
p.title { position: relative; top: 35%; font: 700 40px "Microsoft Yahei"; color: #fff; text-align: center;}
</style>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.onepage-scroll.min.js"></script>
<script>
$(function(){
	$('.main').onepage_scroll({
		sectionContainer: '.page',
		updateURL: true
	});
});
</script>
</head>

<body>
<div class="main">
	<div class="page page1">
		<p class="title">滚动时地址栏URL会显示命名锚记</p>
	</div>
	<div class="page page2">
		<p class="title">可惜点“后退”/“前进”按钮虽然命名锚记会改变，但却不会滚动</p>
	</div>
	<div class="page page3">
		<p class="title">不过刷新是有用的</p>
	</div>
	<div class="page page4">
		<p class="title">第四屏</p>
	</div>
</div>










</body>
</html>

JS代码(jquery.onepage-scroll.min.js):

!function(e){
	var t={
	sectionContainer:"section",easing:"ease",animationTime:1e3,pagination:true,updateURL:false,keyboard:true,beforeMove:null,afterMove:null,loop:true,responsiveFallback:false,direction:"vertical"}
;
	e.fn.swipeEvents=function(){
	return this.each(function(){
	function i(e){
	var i=e.originalEvent.touches;
	if(i&&i.length){
	t=i[0].pageX;
	n=i[0].pageY;
	r.bind("touchmove",s)}
}
function s(e){
	var i=e.originalEvent.touches;
	if(i&&i.length){
	var o=t-i[0].pageX;
	var u=n-i[0].pageY;
	if(o>=50){
	r.trigger("swipeLeft")}
if(o<=-50){
	r.trigger("swipeRight")}
if(u>=50){
	r.trigger("swipeUp")}
if(u<=-50){
	r.trigger("swipeDown")}
if(Math.abs(o)>=50||Math.abs(u)>=50){
	r.unbind("touchmove",s)}
}
}
var t,n,r=e(this);
	r.bind("touchstart",i)}
)}
;
	e.fn.onepage_scroll=function(n){
	function o(){
	var t=false;
	var n=typeof r.responsiveFallback;
	if(n=="number"){
	t=e(window).width()<r.responsiveFallback}
if(n=="boolean"){
	t=r.responsiveFallback}
if(n=="function"){
	valFunction=r.responsiveFallback();
	t=valFunction;
	typeOFv=typeof t;
	if(typeOFv=="number"){
	t=e(window).width()<valFunction}
}
if(t){
	e("body").addClass("disabled-onepage-scroll");
	e(document).unbind("mousewheel DOMMouseScroll MozMousePixelScroll");
	i.swipeEvents().unbind("swipeDown swipeUp")}
else{
	if(e("body").hasClass("disabled-onepage-scroll")){
	e("body").removeClass("disabled-onepage-scroll");
	e("html,body,.wrapper").animate({
	scrollTop:0}
,"fast")}
i.swipeEvents().bind("swipeDown",function(t){
	if(!e("body").hasClass("disabled-onepage-scroll"))t.preventDefault();
	i.moveUp()}
).bind("swipeUp",function(t){
	if(!e("body").hasClass("disabled-onepage-scroll"))t.preventDefault();
	i.moveDown()}
);
	e(document).bind("mousewheel DOMMouseScroll MozMousePixelScroll",function(e){
	e.preventDefault();
	var t=e.originalEvent.wheelDelta||-e.originalEvent.detail;
	u(e,t)}
)}
}
function u(e,t){
	deltaOfInterest=t;
	var n=(new Date).getTime();
	if(n-lastAnimation<quietPeriod+r.animationTime){
	e.preventDefault();
	return}
if(deltaOfInterest<0){
	i.moveDown()}
else{
	i.moveUp()}
lastAnimation=n}
var r=e.extend({
}
,t,n),i=e(this),s=e(r.sectionContainer);
	total=s.length,status="off",topPos=0,leftPos=0,lastAnimation=0,quietPeriod=500,paginationList="";
	e.fn.transformPage=function(t,n,r){
	if(typeof t.beforeMove=="function")t.beforeMove(r);
	e(this).css({
	"-webkit-transform":t.direction=="horizontal"?"translate3d("+n+"%,0,0)":"translate3d(0,"+n+"%,0)","-webkit-transition":"all "+t.animationTime+"ms "+t.easing,"-moz-transform":t.direction=="horizontal"?"translate3d("+n+"%,0,0)":"translate3d(0,"+n+"%,0)","-moz-transition":"all "+t.animationTime+"ms "+t.easing,"-ms-transform":t.direction=="horizontal"?"translate3d("+n+"%,0,0)":"translate3d(0,"+n+"%,0)","-ms-transition":"all "+t.animationTime+"ms "+t.easing,transform:t.direction=="horizontal"?"translate3d("+n+"%,0,0)":"translate3d(0,"+n+"%,0)",transition:"all "+t.animationTime+"ms "+t.easing}
);
	e(this).one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend",function(e){
	if(typeof t.afterMove=="function")t.afterMove(r)}
)}
;
	e.fn.moveDown=function(){
	var t=e(this);
	index=e(r.sectionContainer+".active").data("index");
	current=e(r.sectionContainer+"[data-index='"+index+"']");
	next=e(r.sectionContainer+"[data-index='"+(index+1)+"']");
	if(next.length<1){
	if(r.loop==true){
	pos=0;
	next=e(r.sectionContainer+"[data-index='1']")}
else{
	return}
}
else{
	pos=index*100*-1}
if(typeof r.beforeMove=="function")r.beforeMove(next.data("index"));
	current.removeClass("active");
	next.addClass("active");
	if(r.pagination==true){
	e(".onepage-pagination li a"+"[data-index='"+index+"']").removeClass("active");
	e(".onepage-pagination li a"+"[data-index='"+next.data("index")+"']").addClass("active")}
e("body")[0].className=e("body")[0].className.replace(/\bviewing-page-\d.*?\b/g,"");
	e("body").addClass("viewing-page-"+next.data("index"));
	if(history.replaceState&&r.updateURL==true){
	var n=window.location.href.substr(0,window.location.href.indexOf("#"))+"#"+(index+1);
	history.pushState({
}
,document.title,n)}
t.transformPage(r,pos,next.data("index"))}
;
	e.fn.moveUp=function(){
	var t=e(this);
	index=e(r.sectionContainer+".active").data("index");
	current=e(r.sectionContainer+"[data-index='"+index+"']");
	next=e(r.sectionContainer+"[data-index='"+(index-1)+"']");
	if(next.length<1){
	if(r.loop==true){
	pos=(total-1)*100*-1;
	next=e(r.sectionContainer+"[data-index='"+total+"']")}
else{
	return}
}
else{
	pos=(next.data("index")-1)*100*-1}
if(typeof r.beforeMove=="function")r.beforeMove(next.data("index"));
	current.removeClass("active");
	next.addClass("active");
	if(r.pagination==true){
	e(".onepage-pagination li a"+"[data-index='"+index+"']").removeClass("active");
	e(".onepage-pagination li a"+"[data-index='"+next.data("index")+"']").addClass("active")}
e("body")[0].className=e("body")[0].className.replace(/\bviewing-page-\d.*?\b/g,"");
	e("body").addClass("viewing-page-"+next.data("index"));
	if(history.replaceState&&r.updateURL==true){
	var n=window.location.href.substr(0,window.location.href.indexOf("#"))+"#"+(index-1);
	history.pushState({
}
,document.title,n)}
t.transformPage(r,pos,next.data("index"))}
;
	e.fn.moveTo=function(t){
	current=e(r.sectionContainer+".active");
	next=e(r.sectionContainer+"[data-index='"+t+"']");
	if(next.length>0){
	if(typeof r.beforeMove=="function")r.beforeMove(next.data("index"));
	current.removeClass("active");
	next.addClass("active");
	e(".onepage-pagination li a"+".active").removeClass("active");
	e(".onepage-pagination li a"+"[data-index='"+t+"']").addClass("active");
	e("body")[0].className=e("body")[0].className.replace(/\bviewing-page-\d.*?\b/g,"");
	e("body").addClass("viewing-page-"+next.data("index"));
	pos=(t-1)*100*-1;
	if(history.replaceState&&r.updateURL==true){
	var n=window.location.href.substr(0,window.location.href.indexOf("#"))+"#"+(t-1);
	history.pushState({
}
,document.title,n)}
i.transformPage(r,pos,t)}
}
;
	i.addClass("onepage-wrapper").css("position","relative");
	e.each(s,function(t){
	e(this).css({
	position:"absolute",top:topPos+"%"}
).addClass("section").attr("data-index",t+1);
	e(this).css({
	position:"absolute",left:r.direction=="horizontal"?leftPos+"%":0,top:r.direction=="vertical"||r.direction!="horizontal"?topPos+"%":0}
);
	if(r.direction=="horizontal")leftPos=leftPos+100;
	else topPos=topPos+100;
	if(r.pagination==true){
	paginationList+="<li><a data-index='"+(t+1)+"' href='#"+(t+1)+"'></a></li>"}
}
);
	i.swipeEvents().bind("swipeDown",function(t){
	if(!e("body").hasClass("disabled-onepage-scroll"))t.preventDefault();
	i.moveUp()}
).bind("swipeUp",function(t){
	if(!e("body").hasClass("disabled-onepage-scroll"))t.preventDefault();
	i.moveDown()}
);
	if(r.pagination==true){
	if(e("ul.onepage-pagination").length<1)e("<ul class='onepage-pagination'></ul>").prependTo("body");
	if(r.direction=="horizontal"){
	posLeft=i.find(".onepage-pagination").width()/2*-1;
	i.find(".onepage-pagination").css("margin-left",posLeft)}
else{
	posTop=i.find(".onepage-pagination").height()/2*-1;
	i.find(".onepage-pagination").css("margin-top",posTop)}
e("ul.onepage-pagination").html(paginationList)}
if(window.location.hash!=""&&window.location.hash!="#1"){
	init_index=window.location.hash.replace("#","");
	if(parseInt(init_index)<=total&&parseInt(init_index)>0){
	e(r.sectionContainer+"[data-index='"+init_index+"']").addClass("active");
	e("body").addClass("viewing-page-"+init_index);
	if(r.pagination==true)e(".onepage-pagination li a"+"[data-index='"+init_index+"']").addClass("active");
	next=e(r.sectionContainer+"[data-index='"+init_index+"']");
	if(next){
	next.addClass("active");
	if(r.pagination==true)e(".onepage-pagination li a"+"[data-index='"+init_index+"']").addClass("active");
	e("body")[0].className=e("body")[0].className.replace(/\bviewing-page-\d.*?\b/g,"");
	e("body").addClass("viewing-page-"+next.data("index"));
	if(history.replaceState&&r.updateURL==true){
	var a=window.location.href.substr(0,window.location.href.indexOf("#"))+"#"+init_index;
	history.pushState({
}
,document.title,a)}
}
pos=(init_index-1)*100*-1;
	i.transformPage(r,pos,init_index)}
else{
	e(r.sectionContainer+"[data-index='1']").addClass("active");
	e("body").addClass("viewing-page-1");
	if(r.pagination==true)e(".onepage-pagination li a"+"[data-index='1']").addClass("active")}
}
else{
	e(r.sectionContainer+"[data-index='1']").addClass("active");
	e("body").addClass("viewing-page-1");
	if(r.pagination==true)e(".onepage-pagination li a"+"[data-index='1']").addClass("active")}
if(r.pagination==true){
	e(".onepage-pagination li a").click(function(){
	var t=e(this).data("index");
	i.moveTo(t)}
)}
e(document).bind("mousewheel DOMMouseScroll MozMousePixelScroll",function(t){
	t.preventDefault();
	var n=t.originalEvent.wheelDelta||-t.originalEvent.detail;
	if(!e("body").hasClass("disabled-onepage-scroll"))u(t,n)}
);
	if(r.responsiveFallback!=false){
	e(window).resize(function(){
	o()}
);
	o()}
if(r.keyboard==true){
	e(document).keydown(function(t){
	var n=t.target.tagName.toLowerCase();
	if(!e("body").hasClass("disabled-onepage-scroll")){
	switch(t.which){
	case 38:if(n!="input"&&n!="textarea")i.moveUp();
	break;
	case 40:if(n!="input"&&n!="textarea")i.moveDown();
	break;
	case 33:if(n!="input"&&n!="textarea")i.moveUp();
	break;
	case 34:if(n!="input"&&n!="textarea")i.moveDown();
	break;
	case 36:i.moveTo(1);
	break;
	case 35:i.moveTo(total);
	break;
	default:return}
}
}
)}
return false}
}
(window.jQuery)

CSS代码(lrtk.css):

.wrap{width:960px;margin:0 auto;font:14px Tahoma,Helvetica,Arial,"����";}
p{text-align:center;}
ul{padding:0;list-style-type:none;overflow:hidden;zoom:1;}
li{float:left;width:300px;margin:20px 0 0 20px;}
ul a{float:left;width:300px;height:80px;line-height:80px;color:#333;text-align:center;text-decoration:none;background-color:#eee;}
.menu{height:30px;margin-bottom:30px;padding:10px;background-color:#f0f0f0;text-align:center;}
.menu a{display:inline-block;height:30px;padding:0 20px;line-height:30px;font-size:14px;color:#333;text-decoration:none;}
.menu a:hover{color:#000;background-color:#e9e9e9;}
.menu .cur{background-color:#ddd !important;color:#000;}
.vad{margin:80px 0 5px;font-family:arial,����,sans-serif;text-align:center;}
.vad a{display:inline-block;height:36px;line-height:36px;margin:0 5px;padding:0 50px;font-size:14px;text-align:center;color:#eee;text-decoration:none;background-color:#222;}
.vad a:hover{color:#fff;background-color:#000;}
.thead{width:728px;height:90px;margin:0 auto;}

附件:下载该文件资源,减少时间成本(增值服务)