jqueryui滑块图像宽度_Jquery_Jquery Ui_Uislider

jqueryui滑块图像宽度

jquery jquery-ui

jqueryui滑块图像宽度,jquery,jquery-ui,uislider,Jquery,Jquery Ui,Uislider,我正在尝试使图像在滑块移动时显示。例如，我有两个图像，其中一个图像有溢出：隐藏，宽度：0%。因此，当我移动滑块时，第一个图像必须在第二个图像上增加其宽度这是我的HTML <body> <div class="puppy"><img src="images/dog.jpg" /></div> <div class="kitten"><img src="images/cat.jpg" /></div>

我正在尝试使图像在滑块移动时显示。例如，我有两个图像，其中一个图像有溢出：隐藏，宽度：0%。因此，当我移动滑块时，第一个图像必须在第二个图像上增加其宽度

这是我的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>

这是我的css

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

下面是JSFIDLE：

如果有任何不清楚的地方，请让我知道

您需要将小狗图像宽度的更改附加到滑块的滚动上。而你没有这样做

我用它来改变画廊中每行图片数量的表单内容

$( "#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中

如果你想用滚动条显示小狗和隐藏小猫，你也可以额外计算宽度。

类似的方法

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

我已经设法得到了我需要的工作。以下是工作版本：

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

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