斯柯达野帝页面滚动插件multiscroll.js代码

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

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

以下是斯柯达野帝页面滚动插件multiscroll.js代码的示例演示效果:

当前平台(PC电脑)

平台:

HTML代码(index.html):

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="user-scalable=1.0,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
<title>斯柯达野帝页面滚动插件multiscroll.js</title>
<link rel="stylesheet" href="css/jquery.multiscroll.css">
<style>
* { margin: 0; padding: 0;}
body { font-size: 100%;}
h1, h2, h3, h4, h5, h6 { font-size: 100%;}

.loading { background: url(images/loading.gif) 50% no-repeat;}
.loading .dowebok-Wrap { opacity: 0;}
.dowebok-Wrap { -webkit-transition:opacity 1s; -moz-transition:opacity 1s; -o-transition:opacity 1s; transition: opacity 1s;}

.ms-section { font-family: "Microsoft Yahei"; color: #fff;}
.ms-section { background-position: 50% 50%; background-repeat: no-repeat; background-size: cover;}
.ms-section10 { background-color: #000;}

.ms-left .ms-section1 { background-image: url(images/l1.jpg);}
.ms-left .ms-section2 { background-image: url(images/l2.jpg);}
.ms-left .ms-section3 { background-color: #000;}
.ms-left .ms-section4 { background-image: url(images/l4.jpg);}
.ms-left .ms-section4.down { background-image: url(images/l4-2.jpg);}
.ms-left .ms-section5 { background-image: url(images/l5.jpg);}
.ms-left .ms-section6 { background-image: url(images/l6.jpg);}
.ms-left .ms-section7 { background-image: url(images/l7.jpg);}
.ms-left .ms-section8 { background-color: #000;}
.ms-left .ms-section9 { background-image: url(images/l9.jpg);}

.ms-right .ms-section1 { background-image: url(images/r1.jpg);}
.ms-right .ms-section2 { background-image: url(images/r2.jpg);}
.ms-right .ms-section3 { background-image: url(images/r3.jpg);}
.ms-right .ms-section3.turnOn { background-image: url(images/r3-2.jpg);}
.ms-right .ms-section4 { background-color: #000;}
.ms-right .ms-section5 { background-image: url(images/r5.jpg);}
.ms-right .ms-section6 { background-image: url(images/r6.jpg);}
.ms-right .ms-section7 { background-color: #000;}
.ms-right .ms-section8 { background-image: url(images/r8.jpg);}
.ms-right .ms-section9 { background-image: url(images/r9.jpg);}

.ms-left .ms-section1 h1 strong { line-height: 1.1em; font-size: 5em; text-transform: uppercase; text-shadow: -2px 2px 0 #a6acae;}
.ms-left .ms-section1 h1 span { display: block;}
.ms-section1 .txt { position: relative; left: -100%; top: 15%; opacity: 0; transition-duration: 0.5s;}
.green-box { display: inline-block; margin-top: 30px; padding: 6px 10px; line-height: 1.2em; font-size: 2.5em; background: url(images/bg-greenbox.png) 0 0 repeat; *display: inline; zoom: 1;}

.button { display: inline-block; margin-top: 30px; padding: 7px 73px 7px 25px; font-size: 1.5em; color: #fff; text-decoration: none; background: url(images/button.gif) right;}
.button2 { padding: 7px 25px 7px 60px; background: url(images/button-left.gif) 0 no-repeat;}

.ms-section .txt2 { position: relative; top: 20%; padding: 0 15%;}
.ms-section .txt2 h2 { margin-bottom: 30px; font-size: 4em; line-height: 1.1em; text-shadow: -2px 2px 0 #a6acae; text-transform: uppercase;}
.ms-section .txt2 h2 span { display: block;}
.ms-section .txt2 h3 { margin: 20px 0; font-size: 2em;}
.ms-section .txt2 p { font-size: 1.5em;}

.ms-section2 .txt2 { position: absolute; left: 0; top: 75%; width: 100%; padding: 0; text-align: center;}
.ms-left .txt2 { left: -100%; transition-duration: 0.5s;}
.ms-right .txt2 { left: 100%; transition-duration: 0.5s;}

.active .txt2 { left: 0; transition-delay: 1s;}
.active .txt { left: 20%; opacity: 1; transition-delay: 1s;}

#loading123 { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #fff url(images/loading.gif) 50% no-repeat;}
</style>
</head>

<body class="loading">
<div class="dowebok-Wrap">
	<div class="ms-left">
		<div class="ms-section ms-section1">
			<div class="txt">
				<h1><strong>斯柯达 <span>野帝</span></strong></h1>
				<p class="green-box">让自己忘乎所以！</p>
			</div>
		</div>
		<div class="ms-section ms-section2">
			<div class="txt2">
				<h2>Yeti</h2>
				<p>意气风发每一天</p>
			</div>
		</div>
		<div class="ms-section ms-section3">
			<div class="txt2">
				<h2>Nowe <span>REFLEKTORY</span> <span>i design</span></h2>
				<h3>SUV的惊心动魄的一天晚上</h3>
				<p>斯柯达野帝加入了新一代斯柯达车型，其动感的设计已经赢得了认可和普及。成熟的自信得到外表现。</p>
				<a class="button btn3l" href="javascript:">开灯</a>
			</div>
		</div>
		<div class="ms-section ms-section4">
		</div>
		<div class="ms-section ms-section5">
			<div class="txt2">
				<h2>Nowe <span>REFLEKTORY</span> <span>i design</span></h2>
				<h3>SUV的惊心动魄的一天晚上</h3>
				<p>斯柯达野帝加入了新一代斯柯达车型，其动感的设计已经赢得了认可和普及。成熟的自信得到外表现。</p>
				<a class="button" href="javascript:">一个按钮</a>
			</div>
		</div>
		<div class="ms-section ms-section6">
			<div class="txt2">
				<h2>Nowe <span>REFLEKTORY</span> <span>i design</span></h2>
				<h3>SUV的惊心动魄的一天晚上</h3>
				<p>斯柯达野帝加入了新一代斯柯达车型，其动感的设计已经赢得了认可和普及。成熟的自信得到外表现。</p>
			</div>
		</div>
		<div class="ms-section ms-section7"></div>
		<div class="ms-section ms-section8">
			<div class="txt2">
				<h2>Nowe <span>REFLEKTORY</span> <span>i design</span></h2>
				<h3>SUV的惊心动魄的一天晚上</h3>
				<p>斯柯达野帝加入了新一代斯柯达车型，其动感的设计已经赢得了认可和普及。成熟的自信得到外表现。</p>
				<a class="button" href="javascript:">一个按钮</a>
			</div>
		</div>
		<div class="ms-section ms-section9">
			<div class="txt2">
				<h2>Nowe <span>REFLEKTORY</span> <span>i design</span></h2>
				<h3>介绍的文字 介绍的文字</h3>
				<p>斯柯达野帝加入了新一代斯柯达车型，其动感的设计已经赢得了认可和普及。成熟的自信得到外表现。</p>
				<a class="button" href="javascript:">一个按钮</a>
			</div>
		</div>
		<div class="ms-section ms-section10">
			<div class="txt2">
				<h2>Nowe <span>REFLEKTORY</span> <span>i design</span></h2>
				<h3>最后一页</h3>
				<p>斯柯达野帝加入了新一代斯柯达车型，其动感的设计已经赢得了认可和普及。成熟的自信得到外表现。</p>
				<a class="button" href="http://www.dowebok.com/">一个按钮</a>
			</div>
		</div>
	</div>
	<div class="ms-right">
		<div class="ms-section ms-section1"></div>
		<div class="ms-section ms-section2">
			<div class="txt2">
				<h2>Yeti outdoor</h2>
				<p>抢你的地方远未知</p>
			</div>
		</div>
		<div class="ms-section ms-section3"></div>
		<div class="ms-section ms-section4">
			<div class="txt2">
				<h2>Bagaznik <span>i varioflex</span></h2>
				<h3>斯柯达野帝触目惊心的可压缩</h3>
				<p>当后排座椅折叠，这是很容易感谢Varioflex，收拾斯柯达雪人新建即使是非常大的不寻常的形状的物品。</p>
				<a class="button button2 btn42" href="javascript:">放倒座位</a>
			</div>
		</div>
		<div class="ms-section ms-section5"></div>
		<div class="ms-section ms-section6"></div>
		<div class="ms-section ms-section7">
			<div class="txt2">
				<h2>Nowe <span>REFLEKTORY</span> <span>i design</span></h2>
				<h3>SUV的惊心动魄的一天晚上</h3>
				<p>斯柯达野帝加入了新一代斯柯达车型，其动感的设计已经赢得了认可和普及。成熟的自信得到外表现。</p>
				<a class="button button2" href="javascript:">一个按钮</a>
			</div>
		</div>
		<div class="ms-section ms-section8"></div>
		<div class="ms-section ms-section9">
			<div class="txt2">
				<h2>Nowe <span>REFLEKTORY</span> <span>i design</span></h2>
				<h3>另一段介绍文字 另一段介绍文字</h3>
				<p>斯柯达野帝加入了新一代斯柯达车型，其动感的设计已经赢得了认可和普及。成熟的自信得到外表现。</p>
				<a class="button button2" href="javascript:">一个按钮</a>
			</div>
		</div>
		<div class="ms-section ms-section10"></div>
	</div>
</div>

<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/jquery.easing.min.js"></script>
<script src="js/jquery.multiscroll.min.js"></script>
<script>
$(function(){
	$('#dowebok-Wrap').multiscroll({
		verticalCentered: false
	});

	var $btn3l = $('.btn3l');
	$btn3l.on('click', function(){
		$('.ms-right').find('.ms-section3').toggleClass('turnOn');
		var $thisTxt = $(this).html();
		if($thisTxt == '开灯'){
			$(this).html('关灯');
		} else {
			$(this).html('开灯');
		}
		return false;
	});

	$('.btn42').on('click', function(){
		$('.ms-left').find('.ms-section4').toggleClass('down');
		var $thisTxt = $(this).html();
		if($thisTxt == '放倒座位'){
			$(this).html('竖起座位');
		} else {
			$(this).html('放倒座位');
		}
		return false;
	});
});

//页面加载时的 Loading 效果
$(window).load(function(){
	window.setTimeout(function(){
		$('body').removeClass('loading');
	}, 2000);
});
</script>
</body>
</html>

JS代码(jquery.multiscroll.min.js):

/** * multiscroll.js 0.1.2 Beta * https://github.com/alvarotrigo/multiscroll.js * MIT licensed * * Copyright (C) 2013 alvarotrigo.com - A project by Alvaro Trigo */
(function(a){
	a.fn.multiscroll=function(b){
	function w(){
	q=a(window).height();
	r();
	a.isFunction(b.afterResize)&&b.afterResize.call(this)}
function r(){
	b.css3?(m(a(".ms-left"),"translate3d(0px,-"+a(".ms-left").find(".ms-section.active").position().top+"px,0px)",!1),m(a(".ms-right"),"translate3d(0px,-"+a(".ms-right").find(".ms-section.active").position().top+"px,0px)",!1)):(a(".ms-left").css("top",-a(".ms-left").find(".ms-section.active").position().top),a(".ms-right").css("top",-a(".ms-right").find(".ms-section.active").position().top))}
function f(c){
	var d=c.index(),s=a(".ms-right").find(".ms-section").eq(x-1-d),e=c.data("anchor"),f=a(".ms-left .ms-section.active").index()+1,g=y(c);
	h=!0;
	b.anchors.length&&(location.hash=e);
	var k={
	left:c.position().top,right:s.position().top}
;
	s.addClass("active").siblings().removeClass("active");
	c.addClass("active").siblings().removeClass("active");
	b.css3?(a.isFunction(b.onLeave)&&b.onLeave.call(this,f,d+1,g),c="translate3d(0px,-"+k.left+"px,0px)",k="translate3d(0px,-"+k.right+"px,0px)",m(a(".ms-left"),c,!0),m(a(".ms-right"),k,!0),setTimeout(function(){
	a.isFunction(b.afterLoad)&&b.afterLoad.call(this,e,d+1);
	setTimeout(function(){
	h=!1}
,t)}
,b.scrollingSpeed)):(a.isFunction(b.onLeave)&&b.onLeave.call(this,f,d+1,g),a(".ms-left").animate({
	top:-k.left}
,b.scrollingSpeed,b.easing,function(){
	a.isFunction(b.afterLoad)&&b.afterLoad.call(this,e,d+1);
	setTimeout(function(){
	h=!1}
,t)}
),a(".ms-right").animate({
	top:-k.right}
,b.scrollingSpeed,b.easing));
	lastScrolledDestiny=e;
	z(e);
	A(e,d)}
function u(){
	document.addEventListener?(document.addEventListener("mousewheel",g,!1),document.addEventListener("wheel",g,!1)):document.attachEvent("onmousewheel",g)}
function g(c){
	c=window.event||c;
	c=Math.max(-1,Math.min(1,c.wheelDelta||-c.deltaY||-c.detail));
	h||(0>c?a.fn.multiscroll.moveSectionDown():a.fn.multiscroll.moveSectionUp());
	return!1}
function m(c,a,b){
	c.toggleClass("ms-easing",b);
	c.css({
	"-webkit-transform":a,"-moz-transform":a,"-ms-transform":a,transform:a}
)}
function A(c,d){
	b.navigation&&(a("#multiscroll-nav").find(".active").removeClass("active"),c?a("#multiscroll-nav").find('a[href="#'+c+'"]').addClass("active"):a("#multiscroll-nav").find("li").eq(d).find("a").addClass("active"))}
function z(c){
	b.menu&&(a(b.menu).find(".active").removeClass("active"),a(b.menu).find('[data-menuanchor="'+c+'"]').addClass("active"))}
function y(c){
	var b=a(".ms-left .ms-section.active").index();
	c=c.index();
	return b>c?"up":"down"}
function B(){
	var c=document.createElement("p"),a,b={
	webkitTransform:"-webkit-transform",OTransform:"-o-transform",msTransform:"-ms-transform",MozTransform:"-moz-transform",transform:"transform"}
;
	document.body.insertBefore(c,null);
	for(var e in b)void 0!==c.style[e]&&(c.style[e]="translate3d(1px,1px,1px)",a=window.getComputedStyle(c).getPropertyValue(b[e]));
	document.body.removeChild(c);
	return void 0!==a&&0<a.length&&"none"!==a}
function C(a){
	var d=q;
	if(b.paddingTop||b.paddingBottom)a=parseInt(a.css("padding-top"))+parseInt(a.css("padding-bottom")),d=q-a;
	return d}
function D(c){
	var d=c.originalEvent;
	c.preventDefault();
	a(".ms-left .ms-section.active");
	h||(n=v(d).y,Math.abs(p-n)>a(window).height()/100*b.touchSensitivity&&(p>n?a.fn.multiscroll.moveSectionDown():n>p&&a.fn.multiscroll.moveSectionUp()))}
function E(a){
	p=v(a.originalEvent).y}
function v(a){
	var b=[];
	window.navigator.msPointerEnabled?(b.y=a.pageY,b.x=a.pageX):(b.y=a.touches[0].pageY,b.x=a.touches[0].pageX);
	return b}
b=a.extend({
	verticalCentered:!0,scrollingSpeed:700,easing:"easeInQuart",menu:!1,sectionsColor:[],anchors:[],navigation:!1,navigationPosition:"right",navigationColor:"#000",navigationTooltips:[],loopBottom:!1,loopTop:!1,css3:!1,paddingTop:0,paddingBottom:0,fixedElements:null,normalScrollElements:null,keyboardScrolling:!0,touchSensitivity:5,afterLoad:null,onLeave:null,afterRender:null,afterResize:null}
,b);
	var t=600,F="ontouchstart"in window||0<navigator.msMaxTouchPoints,x=a(".ms-left").find(".ms-section").length,h=!1,l,q=a(window).height();
	u();
	F&&(a(document).off("touchstart MSPointerDown").on("touchstart MSPointerDown",E),a(document).off("touchmove MSPointerMove").on("touchmove MSPointerMove",D));
	b.css3&&(b.css3=B());
	a("html,body").css({
	overflow:"hidden",height:"100%"}
);
	b.navigation&&(a("body").append('<div id="multiscroll-nav"><ul></ul></div>'),l=a("#multiscroll-nav"),l.css("color",b.navigationColor),l.addClass(b.navigationPosition));
	a(".ms-right,.ms-left").css({
	width:"50%",position:"absolute",height:"100%","-ms-touch-action":"none"}
);
	a(".ms-right").css({
	right:"1px",top:"0"}
);
	a(".ms-left").css({
	left:"0",top:"0"}
);
	a(".ms-left .ms-section,.ms-right .ms-section").each(function(){
	var c=a(this).index();
	(b.paddingTop||b.paddingBottom)&&a(this).css("padding",b.paddingTop+" 0 "+b.paddingBottom+" 0");
	"undefined"!==typeof b.sectionsColor[c]&&a(this).css("background-color",b.sectionsColor[c]);
	"undefined"!==typeof b.anchors[c]&&a(this).attr("data-anchor",b.anchors[c]);
	if(b.verticalCentered){
	var d=a(this);
	d.addClass("ms-table").wrapInner('<div class="ms-tableCell" style="height:'+C(d)+'px" />')}
a(this).closest(".ms-left").length&&b.navigation&&(d="",b.anchors.length&&(d=b.anchors[c]),c=b.navigationTooltips[c],"undefined"===typeof c&&(c=""),b.navigation&&l.find("ul").append('<li data-tooltip="'+c+'"><a href="#'+d+'"><span></span></a></li>'))}
);
	a(".ms-right").html(a(".ms-right").find(".ms-section").get().reverse());
	a(".ms-left .ms-section,.ms-right .ms-section").each(function(){
	var c=a(this).index();
	a(this).css({
	height:"100%"}
);
	!c&&b.navigation&&l.find("li").eq(c).find("a").addClass("active")}
).promise().done(function(){
	a(".ms-left .ms-section.active").length||(a(".ms-right").find(".ms-section").last().addClass("active"),a(".ms-left").find(".ms-section").first().addClass("active"));
	a.isFunction(b.afterRender)&&b.afterRender.call(this);
	r();
	a(window).on("load",function(){
	var c=window.location.hash.replace("#",""),b=a('.ms-left .ms-section[data-anchor="'+c+'"]');
	c.length&&f(b)}
)}
);
	a(window).on("hashchange",function(){
	var c=window.location.hash.replace("#",""),b=a(".ms-left").find('[data-anchor="'+c+'"]');
	"undefined"!==typeof lastScrolledDestiny&&c===lastScrolledDestiny||f(b)}
);
	a(document).keydown(function(c){
	if(b.keyboardScrolling&&!h)switch(c.which){
	case 38:case 33:a.fn.multiscroll.moveSectionUp();
	break;
	case 40:case 34:a.fn.multiscroll.moveSectionDown()}
}
);
	a(document).mousedown(function(a){
	if(1==a.button)return a.preventDefault(),!1}
);
	a(document).on("click","#multiscroll-nav a",function(c){
	c.preventDefault();
	c=a(this).parent().index();
	f(a(".ms-left .ms-section").eq(c))}
);
	a(document).on({
	mouseenter:function(){
	var c=a(this).data("tooltip");
	a('<div class="multiscroll-tooltip '+b.navigationPosition+'">'+c+"</div>").hide().appendTo(a(this)).fadeIn(200)}
,mouseleave:function(){
	a(this).find(".multiscroll-tooltip").fadeOut().remove()}
}
,"#multiscroll-nav li");
	b.normalScrollElements&&(a(document).on("mouseover",b.normalScrollElements,function(){
	a.fn.multiscroll.setMouseWheelScrolling(!1)}
),a(document).on("mouseout",b.normalScrollElements,function(){
	a.fn.multiscroll.setMouseWheelScrolling(!0)}
));
	a(window).resize(function(){
	w()}
);
	a.fn.multiscroll.moveSectionUp=function(){
	var c=a(".ms-left .ms-section.active").prev(".ms-section");
	!c.length&&b.loopTop&&(c=a(".ms-left .ms-section").last());
	c.length&&f(c)}
;
	a.fn.multiscroll.moveSectionDown=function(){
	var c=a(".ms-left .ms-section.active").next(".ms-section");
	!c.length&&b.loopBottom&&(c=a(".ms-left .ms-section").first());
	c.length&&f(c)}
;
	a.fn.multiscroll.moveTo=function(c){
	var b="",b=isNaN(c)?a('.ms-left [data-anchor="'+c+'"]'):a(".ms-left .ms-section").eq(c-1);
	f(b)}
;
	a.fn.multiscroll.setKeyboardScrolling=function(a){
	b.keyboardScrolling=a}
;
	a.fn.multiscroll.setMouseWheelScrolling=function(a){
	a?u():document.addEventListener?(document.removeEventListener("mousewheel",g,!1),document.removeEventListener("wheel",g,!1)):document.detachEvent("onmousewheel",g)}
;
	a.fn.multiscroll.setScrollingSpeed=function(a){
	b.scrollingSpeed=a}
;
	var p=0,n=0}
}
)(jQuery);

CSS代码(jquery.multiscroll.css):

/** * multiscroll 0.0.5 Beta * https://github.com/alvarotrigo/multiscroll.js * MIT licensed * * Copyright (C) 2013 alvarotrigo.com - A project by Alvaro Trigo */
html,body{margin:0;padding:0;overflow:hidden;-webkit-tap-highlight-color:rgba(0,0,0,0);}
.ms-section{position:relative;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
.ms-section.ms-table{display:table;width:100%;}
.ms-tableCell{display:table-cell;vertical-align:middle;width:100%;height:100%;}
.ms-easing{-webkit-transition:all 0.7s ease-out;-moz-transition:all 0.7s ease-out;-o-transition:all 0.7s ease-out;transition:all 0.7s ease-out;}
#multiscroll-nav{position:fixed;z-index:100;margin-top:-32px;top:50%;opacity:1;}
#multiscroll-nav.right{right:17px;}
#multiscroll-nav.left{left:17px;}
#multiscroll-nav ul{margin:0;padding:0;}
#multiscroll-nav li{display:block;width:14px;height:13px;margin:7px;position:relative;}
#multiscroll-nav li a{display:block;position:relative;z-index:1;width:100%;height:100%;cursor:pointer;text-decoration:none;}
#multiscroll-nav li .active span{background:#333;}
#multiscroll-nav span{top:2px;left:2px;width:8px;height:8px;border:1px solid #000;background:rgba(0,0,0,0);-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;position:absolute;z-index:1;}
.multiscroll-tooltip{position:absolute;color:#fff;font-size:14px;font-family:arial,helvetica,sans-serif;top:-2px;}
.multiscroll-tooltip.right{right:20px;}
.multiscroll-tooltip.left{left:20px;}

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