move.js問題,下面代碼哪里有問題
?$(function(){
? ? ? $("#fullpage").fullpage({
? ? ? verticalCentered:false,
? ? ? anchor:['page1','page2','page3','page4'],
? ? ? navigation:true,
? ? ? navigationTooltips:['特終于來了。','智能時代來到每個人的身邊','真正貼近每個人的設備','不同特點,找到適合你的風格'],
? ? ? ? ? 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;
? ? ? ? ? ? }
? ? ? ? ? },
2015-11-05
<script src="move.js" type="text/javascript"></script>
這段JS引用代碼需要放在Body標簽內部,如果不這樣放置,當你用F12調試時會發現提示錯誤,“document.body.style=null”
你把位置調整下就可以了。
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>它,終于來了</h1> <p>為了充分發揮體積小巧以及佩戴于手腕的優勢,Apple?Watch帶來全新的科技和互動方式。它可以讓你更快便捷的完成一些早已習慣的事,也可實現 過去根本無法企及的新功能。因此,這將會是煥然一新的使用體驗,也將實現與你前所未有的貼近。 </p> <a?href="#">進一步了解</a> </div> <div?class="section?section2"> <h1>真正與你貼近的個人設備</h1> <a?href="#">進一步了解</a> </div> <div?class="section?section3"> <h1>非同一般的精準計時</h1> <p>高級手表向來以精準計時為本,Apple?Watch更是如此,它與你的iphone配合使用,同全球的標準時差不超過50毫秒, 而且,你可以對表盤進行個性化設置,以更具個性和意義的方式顯示時間,使其更貼合你的生活要求。 </p> <a?href="#">進一步了解計時</a> </div> <div?class="section?section4"> <h1>在三個特點鮮明的系列中找到你的風格</h1> <div?class="row"> <div?class="column"> <img?src="./img/primary_large_2x.jpg"?class="primary"> <h4?class="primary"></h4> <div?class="intro"> <p>不銹鋼或深空黑色不銹鋼表殼,藍寶石水晶鏡面,搭配多款時尚表帶。</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>黃金或玫瑰金表殼,藍寶石水晶鏡面,搭配精雕細琢的表帶和表扣。</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:['它,終于來了。','真正與你貼近的個人設備','非同一般的精準計時','在三個特點鮮明的系列中找到你的風格'], 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>