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滑塊圖像寬度

回答

相關問題