jQuery滑块溢出可见性

Question

我有一个显示‘用户卡片’的jQuery滑块--当前的实现有一个水平的可拖动滚动条，它显示包含所有用户卡片的div的整个宽度。我想要的是一个div，它可以让用户看到上一张卡的一部分和下一张卡的相同部分(见图像附件)，在滑动跳转动画时，将显示与下一张和前一张卡相同部分的所需卡-我可以处理动画，但我在如何实现附加图像的视觉效果上遇到了困难。任何帮助都将不胜感激。

​

Answer 1

我刚刚为允许用户看到前一张卡的一部分和下一张卡的相同部分的部分做了一个小提琴，你可以添加滑块和动画逻辑。

http://jsfiddle.net/q4Yjh/

HTML

<div id="slider">
<div id="vcards">
    <div class="vcard">1</div>
    <div class="vcard">2</div>
    <div class="vcard">3</div>
    <div class="vcard">4</div>
    <div class="vcard">5</div>
</div>
</div>
<div id="next">Next</div>

CSS

#slider{
width:200px;
overflow:hidden;//remove overflow to see the actual logic
position:relative;
border:1px solid black;
height:100px;
}  

.vcard{
width:100px;
margin: 0 10px;
background-color:red;
height:100px;
float:left;
border:1px solid yellow;
}  

#vcards{
position:absolute;
top:0;
left:40px;
} 

JQUERY

$('#vcards').width(function(){
    var width = 0;                
    $('.vcard').each(function(){
        width += $(this).outerWidth(true);
    });
    return width;
}());
//set the width to contain all vcards 
//in a single horizontal strip
$('#next').on('click',function(){
    $('#vcards').animate({left : "-=122"});
    });

Answer 2

容纳“card”的content元素(div或其他任何元素)将足够容纳所有的card元素。视口的宽度是固定的。content元素将嵌套在viewport元素中，并且其绝对位置将随着某种后退/前进按钮元素的变化而改变。

有许多jquery插件可以做这类事情，包括伟大的jquery工具库，它具有滚动插件。

Answer 3

您将需要使用类似jquery cycle的滑块。然后，您将需要构建包含这些元素的div，并隐藏任何多余的元素。这将允许您仅显示卡的一部分，因为溢出是隐藏的。

<div class="wrapper" style="width:1200px; overflow: hidden">
  <div class="slider">
    <img class="img-1" src="" />
  </div>

  <div class="slider">
    <img class="img-2" src="" />
  </div>
</div>