move.js
动画这里总是出问题,不是网业滚动问题就是不能用,不知道那个环节出问题了,求高手解答。
代码还是看着老师的一步一步写的,不过看不见老师的外链。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utl-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
<title>无标题文档</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.4/jquery.fullPage.css" rel="stylesheet" />
<script src="jquery-2.0.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.4/jquery.fullPage.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.4/vendors/jquery.easings.min.js"></script>
<script src="visionmedia-move.js-5299f9d/move.js" type="text/javascript"></script>
<style type="text/css">
body{ color:#FFFFFF;}
.section1{ background:#0099CC;}
.section2{ background:#996633}
.section3{ background:#666633}
.section4{ background:#FF6666}
#section1 p{color: #CCFF33; margin:5% auto 0; font-size:18px; width:60%;
opacity:0.6; margin-top:800px;}
</style>
</head>
<body>
<div id="fullpage">
<div class="section" id="section1">
<h1>说甚的第四三的士大夫撒打算速度</h1>
<p>说甚的第四三的士大夫撒打算速度说甚的第四三的士大夫撒打算速度</p>
</div>
<div class="section section2">
<div class="slide">slide1</div>
<div class="slide">slide2</div>
<div class="slide">slide3</div>
<div class="slide">slide4</div>
</div>
<div class="section section3">第3屏</div>
<div class="section section4">第4屏</div>
</div>
<script>
$(function(){
$("#fullpage").fullpage({
verticalCentered:false,
anchors:["page1","page2","page3","page4"],
navigation:true,
navigationTooltips:["ss","ss","ss",
"ss"],
afterLoad:function(link,index){
switch(index){
case 1:move('.section1 h1').scale(1.5).end();
moce('#section1 p').set('margin-top','5%').end();
break;
default:
break;
}},
});
});
</script>
</body>
</html>