一種滑動右側和左側效果

我有一個下面的HTML代碼：一種滑動右側和左側效果

<div class="menuTabs"> 
     <div class="mtabArrowLeft">Left</div> 

     <input class="menutabBTN" name="" type="button" value="a" /> 
     <input class="menutabBTN" name="" type="button" value="b" /> 
     <input class="menutabBTN" name="" type="button" value="c" /> 
     <input class="menutabBTN" name="" type="button" value="d" /> 
     <input class="menutabBTN" name="" type="button" value="e" /> 
     <input class="menutabBTN" name="" type="button" value="f"/> 
     <div class="mtabArrowRight">Right</div> 
     </div>

我想與值的前四個輸入從A至d被示出，並且當用戶點擊在div mtabArrowLeft節目其餘的隱藏輸入最多4個輸入。如果用戶點擊div mtabArrowRight將其逆轉回去。我不知道該怎麼做。

這裏是我的CSS代碼：

.menuTabs { 
    float: left; 
    width: 537px; 
} 

.mtabArrowLeft { 
    float: left; 
    height: 25px; 
    width: 35px; 
    margin-left: 15px; 
    margin-right: 4px; 
} 

.mtabArrowRight { 
    float: left; 
    height: 25px; 
    width: 35px; 
    margin-left: 3px; 
    margin-right: 15px; 

} 

.menutabBTN { 
    float: left; 
    height: 25px; 
    width: 65px; 
    margin-right: 3px; 
    margin-left: 3px; 
    padding: 0px; 
    border-top-width: 0px; 
    border-right-width: 0px; 
    border-bottom-width: 0px; 
    border-left-width: 0px; 
    font-family: Tahoma, Geneva, sans-serif; 
    font-size: 12px; 
    color: #000; 
    text-align: center; 
    line-height: 25px; 
}

你的援助事先了解

來源

2010-08-31 Webo

我不明白你的要求，但看看成J個查詢的效果（http://api.jquery.com/category/effects/，他們有演示）。我建議在那裏尋找並嘗試邁出第一步。如果遇到障礙，請回答更具體的問題。 – 2010-08-31 08:41:25

您需要使用類似這樣的方法： http://www.sohtanaka.com/web-design/automatic-image-slider-w-css-jquery/

你也可以看到代碼正被用於將圖像縮略圖左右滑動到這裏： http://www.skandium.com/product-viewer.asp?id=1400

基於代碼從第二站點爲您的方案的一些代碼：

<!doctype html> 
<html> 
<head> 
    <title></title> 
    <style type="text/css"> 
.menuTabs { 
    float: left; 
    width: 284px; 
    overflow:hidden; 
    position:relative; 
    height:50px; 
} 

.img-reel { position:absolute; left:0; top:0; height:50px; } 

.mtabArrowLeft { 
    float: left; 
    height: 25px; 
    width: 35px; 
    margin-left: 15px; 
    margin-right: 4px; 
} 

.mtabArrowRight { 
    float: left; 
    height: 25px; 
    width: 35px; 
    margin-left: 3px; 
    margin-right: 15px; 

} 

.menutabBTN { 
    float: left; 
    height: 25px; 
    width: 65px; 
    margin-right: 3px; 
    margin-left: 3px; 
    padding: 0px; 
    border-top-width: 0px; 
    border-right-width: 0px; 
    border-bottom-width: 0px; 
    border-left-width: 0px; 
    font-family: Tahoma, Geneva, sans-serif; 
    font-size: 12px; 
    color: #000; 
    text-align: center; 
    line-height: 25px; 
} 

    </style> 
</head> 
<body> 

<div class="mtabArrowLeft">Left</div> 
<div class="menuTabs"> 
     <div class="img-reel"> 
      <input class="menutabBTN" name="" type="button" value="a" /> 
      <input class="menutabBTN" name="" type="button" value="b" /> 
      <input class="menutabBTN" name="" type="button" value="c" /> 
      <input class="menutabBTN" name="" type="button" value="d" /> 
      <input class="menutabBTN" name="" type="button" value="e" /> 
      <input class="menutabBTN" name="" type="button" value="f"/> 
     </div> 
</div> 
<div class="mtabArrowRight">Right</div> 


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript" charset="utf-8"></script> 
<script type="text/javascript"> 


    $(function() { 
      var imageWidth = 71; 
      var reelSize = 4; 
      var imageSum = $('.img-reel input').size(); 
      var imageReelWidth = imageWidth * imageSum; 
      $('.img-reel').css({'width' : imageReelWidth}); 

      rotate = function(){ 
       var trigger = $btn.attr('class'); 
       var image_reelPosition = (trigger=='mtabArrowLeft') ? -imageWidth : imageWidth; 
       var reel_currentPosition = $('.img-reel').css('left').replace('px',''); 
       var pos = reel_currentPosition-image_reelPosition; 
       var maxPos = (imageSum-reelSize)*-imageWidth; 
       //console.log('pos='+pos+', max='+maxPos); 
       if(pos>=maxPos && pos<=0){ 
        $('.img-reel').animate({left:pos},300); 
        $('.mtabArrowLeft,.mtabArrowRight').fadeTo(250,1); 
        //console.log('move'); 
        if(pos==maxPos){$('.mtabArrowRight').fadeTo(250,0.5);} 
        else if(pos==0){$('.mtabArrowLeft').fadeTo(250,0.5);} 
       } 
      }; 
      if (imageSum > 4) { 
       $('.mtabArrowLeft,.mtabArrowRight').click(function(){ 
        $btn = $(this); 
        rotate(); 
        return false; 
       }); 
      } 
      else { 
       $('.mtabArrowLeft,.mtabArrowRight').fadeTo(0,0.5).click(function(){return false}); 
      } 
    }) 
</script> 
</body> 
</html>

來源

2010-08-31 08:46:42

謝謝Moin，你能幫我把你的代碼應用到我的代碼上嗎？我試過了，但它不起作用。謝謝 – Webo 2010-08-31 09:42:36

我已經編輯了代碼，它可以與您的HTML一起工作。 – 2010-08-31 19:14:34

http://flowplayer.org/tools/demos/scrollable/index.html

滾動是一種多用途和防呆解決方案做滑...檢查出的教程（並下載腳本）從上面的鏈接 - 這HTML/CSS/jQuery幾乎直接從網站採取。

您必須更改CSS中元素的寬度以適合您的設計。希望有所幫助。

HTML

<div class="mtabArrowLeft prev left">Left</div> 

    <div class="menuTabs scrollable">  
     <div class="items"> 
      <input class="menutabBTN" name="" type="button" value="a" /> 
      <input class="menutabBTN" name="" type="button" value="b" /> 
      <input class="menutabBTN" name="" type="button" value="c" /> 
      <input class="menutabBTN" name="" type="button" value="d" /> 
      <input class="menutabBTN" name="" type="button" value="e" /> 
      <input class="menutabBTN" name="" type="button" value="f"/> 
     </div> 
    </div> 

    <div class="mtabArrowRight next right">Right</div>

CSS

.scrollable { 
    position:relative; 
    overflow:hidden; 
    width: 660px; 
    height:90px; 
} 

.scrollable .items { 
    width:20000em; 
    position:absolute; 
} 

.items input { 
    float:left; 
}

jQuery的

$(function() { 

    // initialize scrollable 
    $(".scrollable").scrollable(); 

});

來源

2010-08-31 19:45:24

一種滑動右側和左側效果

回答

相關問題