一种滑动右侧和左侧效果

我有一个下面的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

一种滑动右侧和左侧效果

回答

相关问题