jquery ui滑块图像宽度

我试图让图像显示为滑块移动。例如，我有2个图像，一个图像溢出：隐藏和宽度：0％。所以当我移动滑块时，第一幅图像必须在第二幅图像上增加其宽度。jquery ui滑块图像宽度

这里是我的HTML

<body> 
    <div class="puppy"><img src="images/dog.jpg" /></div> 
    <div class="kitten"><img src="images/cat.jpg" /></div> 

    <div id="slider"></div> 
</body>

这里是我的JS

$(function() { 
    $("#slider").slider(); 
});

这里是我的CSS

.puppy { 
overflow: hidden; 
position: absolute; 
width: 0; 
}

这里是的jsfiddle：JSFIDDLE

如果有任何不清楚的东西请让我知道

来源

2014-03-26 user3323889

我设法得到我所需要的工作。这是工作版本：[JSFIDDLE]（http://jsfiddle.net/92ytK/12/） – user3323889

您需要附加宽度小狗图像滚动滑块。而你没有这样做。

我已经使用这个用于在库的每行的图像数形式的内容改变

$("#Slider").slider({ 
    value: $("#ImagesNumber").val(), 
    min: 1, 
    max: 10, 
    slide: function(event, ui) { 
     $("#ImagesNumber").val(ui.value); 
    } 
});

其中：

value: $("#ImagesNumber").val(),

设置初始数

min: 1,

设置最少编号

max: 10,

设置最多数量与滑块的滚动

slide: function(event, ui) {$("#ImagesNumber").val(ui.value);}

关系的变化。

你的情况，那就是：

$("#Slider").slider({ 
    value: $(".puppy").css('width'), 
    min: 0, 
    max: 100, 
    slide: function(event, ui) { 
     $(".puppy").css('width', ui.value); 
    } 
});

我的100％，这意味着建议100 - 因为它是情况好一点，如果图像将在像素具有不同的尺寸（当然，我想，最初可见和最初隐藏的图像具有相同的大小）。所以你需要做额外的计数来将百分比转换为像素。

我只会建议擦除绝对位置和隐藏溢出从你的CSS，除非它是绝对定位在整个文本 - 它是有非常有限的空间来显示。然后你可以让绝对位置和隐藏溢出在你的CSS。

如果你想显示小狗和隐藏小猫为滑块滚动，你会做宽度的附加计数了。

来源

2014-03-26 09:27:43

与此FIDDLE类似的方法。

将一张图片设置为div的背景，div中的另一张图片并用滑块改变宽度。

$("#slider").slider({ 
         value: 1, 
         min: 1, 
         max: 100, 
         step: 1, 
         slide: function(event, ui) { 
                $("#slidevalue").html(ui.value); 
                $('#mydog').css('width', (ui.value * 4)); 
                } 
         });

来源

2014-03-26 10:08:43 TimSPQR

jquery ui滑块图像宽度

回答

相关问题