2012-01-27 487 views
0

我一直在嘗試在JQuery中的滑塊實現。我被困在一個地方。這是我的代碼到目前爲止。JQuery滑塊實現問題

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Experimentation</title> 
    <style type="text/css"> 

#container { 
overflow:hidden; 
height: 200px; 
margin: 0 auto; 
width: 800px; 
background-color: white; 
} 


.box1, .box2, .box3, .box4, .box5 { 
    width: 200px; 
    height: 200px; 
    background-color: gray; 
    z-index: 10000; 
    position: relative; 
    float: left; 
    overflow:hidden; 
    } 


.information1, .information2, .information3, .information4, .information5 { 
    position: absolute; 
    width: 200px; 
    height:200px; 
    background-color: black; 
    opacity: 0.2; 
    top: 150px; 
    color: #FFF; 
} 

.information1 h3, .information2 h3,.information3 h3, .information4 h3, .information5 h3 { 
margin: 3px 3px; 
text-align: center; 
} 

.leftbutton img { 
cursor:pointer; 
} 

.rightbutton img { 
cursor:pointer; 
} 

    </style> 
    <script type="text/javascript" src="jquery-1.4.js"></script> 
    <script type="text/javascript"> 
     var topInitial = "0"; 
     var topAfter = "150px"; 

     $(function() { 

     $(".box1").mouseenter(function() {  
     $(".information1").animate({ 
     top: topInitial }, "normal"); }); 

     $(".box1").mouseleave(function() { 
     $(".information1").animate({ 
     top: topAfter }, "normal"); }); 


     $(".box2").mouseenter(function() {  
     $(".information2").animate({ 
     top: topInitial }, "normal"); }); 

     $(".box2").mouseleave(function() { 
     $(".information2").animate({ 
     top: topAfter }, "normal"); }); 

     $(".box3").mouseenter(function() { 
     $(".information3").animate({ 
     top: topInitial }, "normal"); }); 

     $(".box3").mouseleave(function() { 
     $(".information3").animate({ 
     top: topAfter }, "normal"); }); 

     $(".box4").mouseenter(function() { 
     $(".information4").animate({ 
     top: topInitial }, "normal"); }); 

     $(".box4").mouseleave(function() { 
     $(".information4").animate({ 
     top: topAfter }, "normal"); }); 

     $(".box5").mouseenter(function() {  
     $(".information5").animate({ 
     top: topInitial }, "normal"); }); 

     $(".box5").mouseleave(function() { 
     $(".information5").animate({ 
     top: topAfter }, "normal"); }); 

     $(".leftbutton img").click(function() { 
     $(".box1").animate({ 
     marginLeft: "-=200px" }, "fast"); }); 

     $(".rightbutton img").click(function() { 
     $(".box1").animate({ 
     marginLeft: "+=200px" }, "fast"); }); 

    }); 
    </script> 
    </head> 

    <body> 
    <div class="leftbutton"><img src="left.gif"/></div> 
    <div id="container"> 

    <span class="box1"> 
    <div class="information1"> 
    <h3> Criminal Penguins Having a Ball </h3> 
    <p> You have never seen something like this before!</p> 
    </div> 
    </span> 

    <span class="box2"> 
    <div class="information2"> 
    <h3> Criminal Penguins Having a Ball </h3> 
    <p> You have never seen something like this before!</p> 
    </div> 
    </span> 

    <span class="box3"> 
    <div class="information3"> 
    <h3> Criminal Penguins Having a Ball </h3> 
    <p> You have never seen something like this before!</p> 
    </div> 
    </span> 

    <span class="box4"> 
    <div class="information4"> 
    <h3> Criminal Penguins Having a Ball </h3> 
    <p> You have never seen something like this before!</p> 
    </div> 
    </span> 


    <span class="box5"> 
    <div class="information5"> 
    <h3> Criminal Penguins Having a Ball </h3> 
    <p> You have never seen something like this before!</p> 
    </div> 
    </span> 

    </div> 
    <span class="rightbutton"><img src="right.gif"/></span> 
    </body> 
</html> 

刪除class =「box5」中的註釋給了我在上面註釋中突出顯示的一些問題。我想知道我要去哪裏錯了。此外,對於滑塊,我打算更改邊距左/右屬性。這是一個滑塊實施的正確方法嗎?幫幫我!!

回答

0

那麼,對我來說,真的很難說出它是你想要的結果。

我甚至一起扔this jsFiddle一起試圖弄明白。方框5在小提琴中不可見。但是,然後,jsFiddle被設置爲1.7。你爲什麼使用jQuery 1.4?

+0

是的,是了Box5用戶不可見的。如果你確實檢查它在螢火蟲中的位置,它會出現在box1的底部。我希望它溢出到右側,以便我可以實現滑塊功能。你明白我的意思了嗎?另外,我現在提到的書使用jQuery 1.4。 – Cafecorridor 2012-01-27 10:11:52

+0

好的,我對代碼做了一些修改。現在檢查出來。滑塊似乎給了我想要的效果。我會做一些修改,看看我是否遇到任何其他問題。謝謝。設計是不正確的,但是這不是我現在關心的問題。我只關注功能。 – Cafecorridor 2012-01-27 10:21:32