jquery - 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;
} 

查询

$('#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

包含“卡片”的内容元素（div 或其他）将足够宽以容纳所有卡片元素。视口将是固定宽度。内容元素将嵌套在视口元素内，并且会根据某种后退/前进按钮元素改变其绝对定位。

有许多 jquery 插件可以做这种事情，包括具有可滚动插件的优秀 jquery 工具库。

Answer 3

您将需要使用某种类型的滑块，例如 jquery 循环。然后，您将需要构建包含这些元素并隐藏任何多余元素的 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>