                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /FullPage.js全屏滾動(dòng)插件

move.js問(wèn)題，下面代碼哪里有問(wèn)題

?$(function(){

? ? ? $("#fullpage").fullpage({

? ? ? verticalCentered:false,

? ? ? anchor:['page1','page2','page3','page4'],

? ? ? navigation:true,

? ? ? navigationTooltips:['特終于來(lái)了。','智能時(shí)代來(lái)到每個(gè)人的身邊','真正貼近每個(gè)人的設(shè)備','不同特點(diǎn)，找到適合你的風(fēng)格'],

? ? ? ? ? afterLoad:function(link,index){

? ? ? ? ? ? switch(index){

? ? ? ? ? ? ? case 1:

? ? ? ? ? ? ? move('.section1 h1').scale(1.5).end();

? ? ? ? ? ? ? move('.section1 p').set('margin-top','5%').end();

? ? ? ? ? ? ? break;

? ? ? ? ? ? ? case 2:

? ? ? ? ? ? ? move('.section2 h1').scale(0.7).end();

? ? ? ? ? ? ? break;

? ? ? ? ? ? ? case 3:

? ? ? ? ? ? ? break;

? ? ? ? ? ? ? case 4:

? ? ? ? ? ? ? break;

? ? ? ? ? ? ? default:

? ? ? ? ? ? ? break;

? ? ? ? ? ? }

? ? ? ? ? },

恒者遠(yuǎn)

2015-10-15

源自：FullPage.js全屏滾動(dòng)插件

關(guān)注問(wèn)題我要回答

814

操作

收起

2 回答

小王子抓貓咪回答被采納 +3 積分
2015-11-05

這段JS引用代碼需要放在Body標(biāo)簽內(nèi)部，如果不這樣放置，當(dāng)你用F12調(diào)試時(shí)會(huì)發(fā)現(xiàn)提示錯(cuò)誤，“document.body.style=null”

你把位置調(diào)整下就可以了。

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

#1

恒者遠(yuǎn) 提問(wèn)者

非常感謝！

2015-12-12 回復(fù) 有任何疑惑可以回復(fù)我~

#2

abracadabra

為什么我放在body里面了還是不行？

2016-03-20 回復(fù) 有任何疑惑可以回復(fù)我~

abracadabra
2016-03-20

<!DOCTYPE?HTML>
<html>
	<head>
	<meta?charset="UTF-8">
	<meta?name="viewport"?content="width=device-width,initial-scale=1,user-scalable=no"/>
		<title>
			蘋果表廣告
		</title>
		<link?href="jquery.fullPage.css"?rel="stylesheet"/>
		<link?href="style.css"?rel="stylesheet"?type="text/css"/>
	</head>
	<body>
		<div?id="fullPage">
			<div?class="section?section1">
				<h1>它，終于來(lái)了</h1>
				<p>為了充分發(fā)揮體積小巧以及佩戴于手腕的優(yōu)勢(shì)，Apple?Watch帶來(lái)全新的科技和互動(dòng)方式。它可以讓你更快便捷的完成一些早已習(xí)慣的事，也可實(shí)現(xiàn)
				過(guò)去根本無(wú)法企及的新功能。因此，這將會(huì)是煥然一新的使用體驗(yàn)，也將實(shí)現(xiàn)與你前所未有的貼近。
				</p>
				<a?href="#">進(jìn)一步了解</a>
			</div>
			<div?class="section?section2">
				<h1>真正與你貼近的個(gè)人設(shè)備</h1>
				<a?href="#">進(jìn)一步了解</a>
			</div>
			<div?class="section?section3">
				<h1>非同一般的精準(zhǔn)計(jì)時(shí)</h1>
				<p>高級(jí)手表向來(lái)以精準(zhǔn)計(jì)時(shí)為本，Apple?Watch更是如此，它與你的iphone配合使用，同全球的標(biāo)準(zhǔn)時(shí)差不超過(guò)50毫秒，
				而且，你可以對(duì)表盤進(jìn)行個(gè)性化設(shè)置，以更具個(gè)性和意義的方式顯示時(shí)間，使其更貼合你的生活要求。
				</p>
				<a?href="#">進(jìn)一步了解計(jì)時(shí)</a>
			</div>
			<div?class="section?section4">
				<h1>在三個(gè)特點(diǎn)鮮明的系列中找到你的風(fēng)格</h1>
				<div?class="row">
					<div?class="column">
					<img?src="./img/primary_large_2x.jpg"?class="primary">
					<h4?class="primary"></h4>
					<div?class="intro">
						<p>不銹鋼或深空黑色不銹鋼表殼，藍(lán)寶石水晶鏡面，搭配多款時(shí)尚表帶。</p>
						<a?href="#"?class="more">了解更多</a>?
					</div>
					</div>
					<div?class="column">
					<img?src="./img/sport_large_2x.jpg"?class="sport">
					<h4?class="sport"></h4>
					<div?class="intro">
						<p>銀色或深空灰色的金屬氧化鋁表殼，薔花I-onx玻璃，搭配亮色柔韌的表帶</p>
						<a?href="#"class="more">了解更多</a>?
					</div>
					</div>
					<div?class="column">
					<img?src="./img/edition_large_2x.jpg"?class="edition">
					<h4?class="edition"></h4>
					<div?class="intro">
						<p>黃金或玫瑰金表殼，藍(lán)寶石水晶鏡面，搭配精雕細(xì)琢的表帶和表扣。</p>
						<a?href="#"class="more">了解更多</a>?
					</div>
					</div>
				</div>
			</div>
		</div>
		<script?src="http://code.jquery.com/jquery-latest.js"?type="text/javascript"></script>
		<script?src="jquery.fullPage.js"?type="text/javascript"></script>
		<script?src="move.js"?type="text/javascript">?</script>?		
		<script?type="text/javascript">
			$(function(){
				$("#fullPage").fullpage({
					verticalCentered:false,
					anchors:['page1','page2','page3','page4'],
					navigation:true,
					navigationTooltips:['它，終于來(lái)了。','真正與你貼近的個(gè)人設(shè)備','非同一般的精準(zhǔn)計(jì)時(shí)','在三個(gè)特點(diǎn)鮮明的系列中找到你的風(fēng)格'],
					afterLoad:function(link,index){
						switch(index){
							case?1:
							move('.section1?h1').scale(1.5).end();
							move('.section1?p').set('margin-top','%5').end();
							break;
							case?2:
							move('.section2?h1').scale(0.7).end();
							break;
							case?3:
							move('.section3?h1').set('margin-left','%20').end();
							move('.section3?p').set('margin-left','%20').end();
							break;
							case?4:
							move('.section4?img.primary').rotate(360).end(function(){
								move('.section4?img.sport').rotate(360).end(function(){
									move('.section4?img.edition').rotate(360).end(function(){
										move('.section4?h4.primary').scale(1.3).end(function(){
											move('.section4?h4.sport').scale(1.3).end(function(){
												move('.section4?h4.edition').scale(1.3).end();
							});
							});
							});
							});
							});
							break;
							default:
							break;
						}
					},
					onLeave:function(link,index){
						switch(index){
							case?1:
							move('.section1?h1').scale(1).end();
							move('.section1?p').set('margin-top','800px').end();
							break;
							case?2:
							move('.section2?h1').scale(1).end();
							break;
							case?3:
							move('.section3?h1').set('margin-left','-1500px').end();
							move('.section3?p').set('margin-left','1500px').end();
							break;
							case?4:
							move('.section4?img.primary').rotate(-360).end();
							move('.section4?img.sport').rotate(-360).end();
							move('.section4?img.edition').rotate(-360).end();
							move('.section4?h4.primary').scale(1).end();
							move('.section4?h4.sport').scale(1).end();
							move('.section4?h4.edition').scale(1).end();
							break;
							default:
							break;
						}
					},
					afterRender:function(){
					
					},
				});
			});
		</script>
	</body>
</html>

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答