fullpage中在slide里加個(gè)DIV ,怎樣可以在每一頁(yè)都有這個(gè)DIV
想了好多種辦法,調(diào)了一天了,都不行,所以來(lái)求助大神們,
我的思路:回調(diào)函數(shù) 加載時(shí)+1920px,(用的move.js里的add語(yǔ)句)離開時(shí)判斷如果是回到前面的頁(yè)面,就-1920px,但是不成功,只能加載時(shí)增加PX,離開時(shí)不能減少,不知道為什么.
最后還是決定用move.js里的set語(yǔ)句,但是不知道為什么死活就是運(yùn)行不出來(lái)效果,求大神幫忙看看,謝謝!!! ? ?
附代碼:
html:
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <meat name="viewport" content="widt=device-width, initial-scale=1,user-scalable=no/">
? ? <title>traval</title>
? ? <link rel="stylesheet" href="jquery.fullPage.css" />
? ? <link rel="stylesheet" href="style.css"/>
?</head>
<body>
? ? <div id="fullpage">
? ?
? ? ? ? <div class="section section1">
? ? ? ? <h1>TRAVAL </h1>
? ? ? ? <p></p>
? ? ? ? <a href="#"></a>
? ? ? ? </div>
? ? ? ? <div class="section section2">
? ? ? ??
? ??
? ? ? ? <div class="slide sectionslide"> ? ?
? ? ? ??
? ? ? ? <img src="sucai/bingdao/1.jpg">
? ? ? ? ?
? ? ? ? </div>
? ? ? ? <div class="slide sectionslide">
? ? ? ? ?
? ? ? ? ? <img src="sucai/bingdao/2.jpg">
? ? ? ? </div>
? ? ? ? <div class="slide sectionslide">
? ? ? ? <img src="sucai/bingdao/3.jpg">
? ? ? ?
? ? ? ? ?</div>
? ? ? ? <div class="slide sectionslide">
? ? ? ? <img src="sucai/bingdao/4.jpg">
? ? ? ?
? ? ? ? </div>
? ? ? ? <div class="slide sectionslide">
? ? ? ? <img src="sucai/bingdao/5.jpg">
? ? ? ?
? ? ? ? </div>
? ? ? ? <div class="slide sectionslide">
? ? ? ? <img src="sucai/bingdao/6.jpg">
? ? ? ?
? ? ? ? </div>
? ? ? ? <div class="slide sectionslide">
? ? ? ? <img src="sucai/bingdao/7.jpg">
? ? ? ? <div class="information">123123</div> ?
? ? ? ?
? ? ? ? </div>
? ? ? ??
? ? ? ? </div>
?
</div>
<script src="move.js"></script>
?<script src="jquery.js"></script>
<script src="jquery.fullPage.js"></script>
? ? <script type="text/javascript">
? ? ? ? $(document).ready(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)格"],
? ? ? ? ? ? ? ? paddingTop:60,
? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? ? afterSlideLoad:function(link,index,slideAnchor,slideIndex){
? ? ? ? ? ? ? ? ? ? ?switch(slideIndex){
? ? ? ? ? ? ? ? ? ? ? ? case 1:
? ? ? ? ? ? ? ? ? ? ? ? ?move(".information").set("margin-left",3370).end();
? ? ? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? ? ? ? ? case 2:
? ? ? ? ? ? ? ? ? ? ? ? ?move(".information").set("margin-left",5290).end();
? ? ? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? ? ? ? ? case 3:
? ? ? ? ? ? ? ? ? ? ? ? move(".information").set("margin-left",7210).end();
? ? ? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? ? ? ? ? case 4:
? ? ? ? ? ? ? ? ? ? ? ? ?move(".information").set("margin-left",9130).end();
? ? ? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? ? ? ? ? case 5:
? ? ? ? ? ? ? ? ? ? ? ? ?move(".information").set("margin-left",11050).end();
? ? ? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? ? ? ? ? case 6:
? ? ? ? ? ? ? ? ? ? ? ? ?move(".information").set("margin-left",12970).end();
? ? ? ? ? ? ? ? ? ? ? ? break; ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? default:
? ? ? ? ? ? ? ? break;}},?
? ? ? ? ? ? });
? ? ? ? });
? ? </script>
</body>
</html>
style.css(有關(guān)部分)
.section2{
position:?relative;
background-color:?#2b2b2b;
background-size:?100%;
}
.information{
background-color:#0F0F0F;
opacity:?0.8;
width:?320px;
height:?880px;
display:inline-block;??????????
position:?absolute;
left:1450px;
top:?1px;
}
.sectionslide?img{
width:?1920px;
height:?880px;
position:?relative;
left:?0px;
}
2016-12-07
使用fullpage的屬性：fixedElements:'#header' 保證每一頁(yè)都有這個(gè)div然后，使用slide加載時(shí)，調(diào)用動(dòng)畫move(".information").set("margin-left",根據(jù)情況設(shè)置).end();，slide離開時(shí)恢復(fù)到原先位置