-2

我希望點擊箭頭髮光圖像時，apDiv1被隱藏，橫幅在頁面上從右向左滑動。我應該添加哪些庫以及添加jqueryui庫說「jquery未定義」？我是很新的jQuery，請與提供幫助，讓我知道在我的代碼的變化... 由於事先我想滑動div id =「banner」？

http://jsfiddle.net/UVZw2/

html{ 
    height: 100%; 
} 
body { 
    margin:0; 
    padding:0; 
    background-color:Silver; 
} 

#apDiv1 { 
    position: absolute; 
    width: 800px; 
    z-index: 1; 
    padding: 0; 
    display:block; 
    color:#FFF; 
    left: 0px; 
} 
#apDiv2 { 
    min-width: 800px; 
    width: 100%; 
    position: absolute; 
    visibility: visible; 
    padding: 0; 
} 
#fontmain { 
    font-size:250px; 
    margin-left:400px; 
    padding: 0; 
} 
#fonttag { 
    font-size:30px; 
    margin-left:480px; 
    padding: 0; 
} 

#apDiv3 { 
    margin-top:260px; 
    font-size:90%; 
    margin-left:500px; 
} 
#apDiv4 { 
    margin-top:250px; 
    margin-left:1080px; 
} 

#banner { 
    margin-top:100px; 
    margin-left:175px; 
    background-color:Transparent; 
    display:none; 
    z-index:1; 
    position:relative; 
} 
#bannerbg { 
    width:930px; 
    height:380px; 
    margin-top:10px; 
    margin-right:10px; 
    display:block; 
    background-color:Teal; 
    z-index:-1; 
    position:absolute; 
} 
#left { 
    z-index:3; 
    margin-left:9px; 
    margin-top:280px; 
    position:absolute; 
} 
#right { 
    z-index:3; 
    position:absolute; 
    margin-top:280px; 
    margin-left:819px 
} 
#bot { 
    position:absolute; 
    top:0px; 
    left:0px; 
} 

<script> 
    $(document).ready(function(){ 
     $("#apDiv4").click(function(){ 
     $("#apDiv1").hide(); 
     // Set the effect type 
     var effect = 'slide'; 

     // Set the options for the effect type chosen 
     var options = { direction: 'left' }; 

     // Set the duration (default: 400 milliseconds) 
     var duration = 900; 
     $("#banner").show("slide") 
    }); 
}); 


    // function vb() 
    //{ 
    //document.getElementById("apDiv1").style.display="none"; 
    //document.getElementById("banner").style.display="block"; 
    //} 
</script> 
<link rel="stylesheet" href="frontpage.css"> 
</head> 
<body> 
    <form> 
     <div id="apDiv1"> 
      <div id="apDiv2"> 
       <div id="fontmain">xyzef</div> 
       <div id="fonttag">kljjhfghjkk</div> 
       <div id="apDiv3">Copyright © 2014 ___________.All rights reserved.</div> 
      </div> 
      <div id="apDiv4"> 
       <img src="icons/next-arrow-glow.png" width="200" height="200"> 
      </div> 
     </div> 
     <div id="banner"><img id="bot"src="icons/dark_slider_frame.png"/> 
      <img id="left" alt="previous" src="icons/left.png"/> 
      <img id="right" alt="next" src="icons/right.png"/> 
      <div id="bannerbg"></div> 
     </div> 
    </form> 
</body> 
</html>

來源

2014-01-20 aks007

必須包括jQuery的作爲一個單獨的腳本，然後才能使用它的方法。 – Blazemonger

在問這樣的問題之前，你應該總是谷歌錯誤。谷歌：「jquery未定義」。你可能會在你的第一擊中得到一個堆棧溢出的答案。 – RGB

如果它說「'jQuery'未定義」，那麼它會非常令人驚訝，因爲您在上面的任何地方都沒有引用符號「jQuery」。（現在，如果它說「'$'未定義」，那將是不同的......） –

編輯

檢查更新Fiddle example

我剛剛添加位置.banner選擇器並將jQuery更改爲：

$(document).ready(function(){ 
     $("#apDiv4").click(function(){ 
     $("#apDiv1").hide(); 
     $("#banner").show().animate({'right': '0'},900); 
    }); 
});

完整的CSS更新的靈活性

html{ 
height: 100%; 

} 
html, body { 
    margin:0; 
    padding:0; 
    background-color:Silver; width:100%; height:100% 
} 
.container{ max-width:80%; width:80%; height:800px; position:relative; margin:0px auto; overflow-x:hidden;} 
#apDiv1 { 
    position: relative; 
    width: 80%; 
    z-index: 1; 
    padding: 0; 
    display:block; 
    color:#FFF; 
    margin:0px auto; 

} 
#apDiv2 { 
    min-width: 800px; 
    width: 100%; 
    position: relative; 
    visibility: visible; 
    padding: 0; 
} 
#fontmain { 
    font-size:250px; 
    margin:0px auto; 
    padding: 0; 
} 
#fonttag { 
    font-size:30px; 
    padding: 0; 
} 

#apDiv3 { 
    margin-top:260px; 
    font-size:90%; 
    margin:0px auto; 
} 
#apDiv4 { 
    margin-top:250px; 
    float:left; margin:0 30px 0 0; 
} 

#banner { 
    margin-top:100px; 
    margin-left:0; 
    width:100%!important; 
    background-color:Transparent; 
    display:none; 
    z-index:1; 
    position:relative; 
    right:-100%;  
} 
#bannerbg { 
    width:100%; 
    height:380px; 
    margin-top:10px; 
    margin-right:10px; 
    display:block; 
    background-color:Teal; 
    z-index:-1; 
    position:relative; 

} 
#left { 
    z-index:3; 
    left:28px; 
    position:absolute; 
    bottom:50%; 
} 
#right { 
    z-index:3; 
    position:absolute; 
    margin-top:280px; 
    right:20px; 
    bottom:50%; 
} 
#bot { 
    position:absolute; 
    top:0px; 
    left:0px; 
}

新增集裝箱周圍的動畫DIV

<div class="container"> 
    <div id="banner"><img id="bot"src="icons/dark_slider_frame.png"/> 
     <img id="left" alt="previous" src="icons/left.png"/> 
     <img id="right" alt="next" src="icons/right.png"/> 
     <div id="bannerbg"></div> 
    </div> 
</div>

來源

2014-01-20 17:36:29 hsobhy

但橫幅仍然沒有滑動的點擊事件。 – aks007

我注意到與圖像的鏈接沒有關閉標籤，所以我在右側插入了一個鏈接（aa）。點擊它，橫幅將滑動。讓我知道你想點擊什麼對象來爲橫幅設置動畫。 – hsobhy

$（「#banner」）.show（）。animate（ {「left」：「 - = 1860px」}，「slow」）;代替right我左轉：-1860 – aks007

我想滑動div id =「banner」？

回答

編輯

完整的CSS更新的靈活性

新增集裝箱周圍的動畫DIV

相關問題