Question

我有一个无限垂直滑块，静态大小的图像可以很好地运行

但是，我必须创建标记的下一个滑块有点不同，所有图像的高度都不同。我试图动态抓住标签的高度并相应地移动，但我似乎还没有找到一个可行的解决方案。

备注
- 我不能更改HTML标记（我知道它很难看，但不幸的是我无法更改），我无法添加类或IDS
- 图像宽度都相同，只有高度变化

HTML

<div class="contain">
<a href="#" id="up">Up</a>
<span>
    <span>
        <a style="height: 90px;"><img /></a>
        <a style="background-color:blue; height: 69px;"><img /></a>
        <a style="height: 45px;"><img /></a>
        <a style="background-color:blue; height: 87px;"><img /></a>
        <a style="height: 43px;"><img /></a>
        <a style="background-color:blue; height: 72px;"><img /></a>
    </span>
</span>
<a href="#" id="down">Down</a>
</div>

的jQuery

$('.contain span > span a:first-of-type').before($('.contain span > span a:last-of-type'));

$('#up').click(function() {
    var a = $('.contain span > span a:first-of-type'); 
    var height = a.clientHeight;

    movement = parseInt($('.contain span > span').css('top')) + height;  

   $('.contain span > span:not(:animated)').animate({ 'top': movement }, 500, function () {
        $('.contain span > span a:first-of-type').before($('.contain span > span a:last-of-type'));
        $('.contain span > span').css({ 'top': height });
   });
});

$('#down').click(function() {
    var a = $('.contain span > span a:first-of-type'); 
    var height = a.clientHeight;

    movement = parseInt($('.contain span > span').css('top')) - height;  

   $('.contain span > span:not(:animated)').animate({ 'top': movement }, 500, function () {
        $('.contain span > span a:last-of-type').after($('.contain span > span a:first-of-type'));
        $('.contain span > span').css({ 'top': height });
   });
});

非工作小提琴：http://jsfiddle.net/RPeLK/2/

Answer 1

我以为我会为了好玩而努力。我无法使用span容器link完成此操作。它表现得很奇怪.. overflow:hidden似乎在span元素上效果不佳。但是当它改成div时它起作用了。

的jQuery

$('.contain span > div a:first-of-type').before($('.contain span > div a:last-of-type'));
$('.contain span > div').css('top','-'+$('.contain span > div a:first-of-type').height()+'px');

$('#up').click(function() {
    var a = $('.contain span > div a:first-of-type'); 
    var height = a.height();
    movement = parseInt($('.contain span > div').css('top')) + height;     
   $('.contain span > div:not(:animated)').animate({ 'top': movement }, 500, function () {
        $('.contain span > div a:first-of-type').before($('.contain span > div a:last-of-type'));
        height = $('.contain span > div a:first-of-type').height();
        $('.contain span > div').css({ 'top': '-'+height+'px' });
   });
});

$('#down').click(function() {
    var a = $('.contain span > div a:nth-child(2)'); 
    var height = a.height();
    movement = parseInt($('.contain span > div').css('top')) - height;  
   $('.contain span > div:not(:animated)').animate({ 'top': movement }, 500, function () {
        $('.contain span > div a:last-of-type').after($('.contain span > div a:first-of-type'));
        height = $('.contain span > div a:first-of-type').height();
        $('.contain span > div').css({ 'top': '-'+height+'px' });
   });
});

HTML

<div class="contain">
<a href="#" id="up">Up</a>
<span>
    <div>
        <a style="height: 90px;background-color:green;"><img /></a>
        <a style="background-color:blue; height: 69px;"><img /></a>
        <a style="height: 45px;background-color:green;"><img /></a>
        <a style="background-color:blue; height: 87px;"><img /></a>
        <a style="height: 43px;background-color:green;"><img /></a>
        <a style="background-color:blue; height: 72px;"><img /></a>
    </div>
</span>
<a href="#" id="down">Down</a>
</div>

CSS

.contain span { 
    display: block;height: 150px; border: 1px solid #d8d8d8; width: 50px; 
    margin: 0 auto; overflow: hidden; position: relative;
}
.contain span > div { 
    list-style: none; margin: 0; padding: 0; position: relative; border:none; 
    /*top: -?px; Needs to be dynamic based on first img*/
}
.contain span > div a { width: 100%;}

a { display: block; width: 50px; margin: 0 auto; }

实施例

http://jsfiddle.net/RPeLK/4/

垂直滑块，动态大小的图像

1 个答案: