Ширина изображения слайдера пользовательского интерфейса

Question

Ширина изображения слайдера пользовательского интерфейса

0

Я пытаюсь сделать изображение появляться, когда движется ползунок. Так, например, у меня есть 2 изображения, и у одного изображения есть переполнение: скрытое и ширина: 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>

Вот мой JS

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

И вот мой css

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

И вот JSFIDDLE: JSFIDDLE

Если есть что-то непонятное, пожалуйста, дайте мне знать

user3323889 26 март 2014, в 08:37

Источник

0

Мне удалось получить то, что мне нужно работать. Вот рабочая версия: JSFIDDLE
user3323889 26 март 2014, в 09:21

Теги:

jquery

jquery-ui

uislider

2 ответа

Ещё вопросы

Мне удалось получить то, что мне нужно работать. Вот рабочая версия: JSFIDDLE

TimSPQR · Answer 1 · 2014-03-26T07-17-00.000Z

Аналогичный подход с этим FIDDLE.

Установите одно изображение в качестве фона для div, другое изображение в div и измените ширину с помощью ползунка.

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

Václav · Answer 2 · 2014-03-26T06-38-00.000Z

Вам нужно приложить изменение ширины изображения щенка к прокрутке ползунка. И вы этого не сделали.

Я использовал это для изменения содержания формы для количества изображений в строке в галерее

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

И если вы хотите показать щенка и спрятать котенка в виде свитков слайдера, вы также сделаете дополнительный подсчет ширины.