jQuery UI滑块图像宽度

Question

I'm trying to make an image appear as the slider moves. 我试图使图像随着滑块的移动而出现。 So for example I have 2 images and the one images has overflow:hidden and width:0%. 因此，举例来说，我有2张图片，其中一张图片溢出：隐藏且宽度：0％。 So when I move the slider the 1st image must increase its width over the 2nd image. 因此，当我移动滑块时，第一个图像必须在第二个图像上增加其宽度。

Here is my HTML 这是我的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>

Here is my JS 这是我的JS

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

And here is my css 这是我的CSS

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

And here is the JSFIDDLE: JSFIDDLE 这是JSFIDDLE： JSFIDDLE

If there is anything that isn't clear please let me know 如果有任何不清楚的地方，请告诉我

Answer 1

You need to attach change of width of puppy image to scrolling of slider. 您需要将小狗图像的宽度变化附加到滑块的滚动上。 And you have not done this. 而且您还没有这样做。

I have used this for changing of content of form for number of images per line in gallery 我已经使用它来更改表单内容，以改变画廊中每行的图像数量

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

where: 哪里：

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

sets initial number 设置初始编号

min: 1,

sets the least number 设置最少的数字

max: 10,

sets the highest number 设置最高的数字

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

ties change of number to scrolling of slider. 领带的数量随滑块的滚动而变化。

In your case it would be: 您的情况是：

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

I suggest 100 in meaning of 100% - because it is a little better for case if images would have various size in pixels (of course, I suppose that initially visible and initially hidden images have the same size). 我建议100代表100％的含义-因为如果图像的像素大小不同，则情况会更好一些（当然，我假设初始可见和初始隐藏的图像具有相同的大小）。 So you would need to do additional counting to convert percents to pixels. 因此，您需要进行额外的计数才能将百分比转换为像素。

I only would suggest to erase absolute position and hidden overflow from your css, unless it is absolutely positioned in whole text - and it is have very limited space to show. 我只建议删除CSS的绝对位置和隐藏的溢出，除非它在全文中绝对定位-并且显示的空间非常有限。 Then you may let absolute position and hidden overflow in your css. 然后，您可以在CSS中让绝对位置和隐藏溢出。

And if you would like to show puppy and hide kitten as slider scrolls, you would do additional counting of widths too. 而且，如果您想在滚动条中显示小狗并将小猫藏起来，那么您也需要额外计算宽度。

Answer 2

A similar approach with this FIDDLE . 此FIDDLE的类似方法。

Set one picture as the background to a div, the other picture in the div and vary the width with the slider. 将一张图片设为div的背景，将另一张图片设为div，然后使用滑块更改宽度。

JS JS

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

jQuery UI滑块图像宽度

问题描述

2 个解决方案

解决方案1
0 2014-03-26 09:27:43

解决方案2
0 2014-03-26 10:08:43

jQuery UI滑块图像宽度

问题描述

2 个解决方案

解决方案1 0 2014-03-26 09:27:43

解决方案2 0 2014-03-26 10:08:43

解决方案1
0 2014-03-26 09:27:43

解决方案2
0 2014-03-26 10:08:43