基於範圍滑塊值從底部淡入淡入的背景

我不是很有經驗，但我想要做的是這樣。當頁面加載時，我沒有背景，但在頁面的右側我有一個從1到100的滑塊。我正在尋找一種方法來創建一個從容器底部開始出現的背景，然後去一直達到滑塊的值100時。基於範圍滑塊值從底部淡入淡入的背景

HTML

<section class= "pageContainer"> 
    <input type="range" min="0" max="100" step="1" value="0" name="slider" class="vSlider"> 
</section>

的問題是，我似乎無法找到什麼的JavaScript應該改變，讓我得到想要的效果正確的想法。誰能幫我？

$('input[name=slider]').on('change', function() { 
});

FINAL工作液：

// Variable declaration 
var heightStore = []; 
var heightProg = []; 
var rowHeight; 
var count = 0; 
heightProg[0] = 0; 

// Store each div height in an array 
$(document).ready(function(){ 
    $.each($('.row'),function(){ 
    rowHeight = $(this).height(); 
    heightStore[count] = rowHeight; 
    count++; 
    heightProg[count] = heightProg[count-1]+rowHeight; 
    }) 
}); 
heightProg.reverse(); 

// Calculate how many divs 
var ct = $('.pageContainer').children().size() - 1; 

// Function to execute on slider value change 
$('input[name=slider]').on('input', function() { 

if (!$("div").hasClass("pageContainer")) $("div").addClass("pageContainer"); 
    {for(var i=0;i<=ct;i++) 
     if($(this).val() == Math.round(100/ct)*i) 
     $("div").css({ "background-position" : "0px "+ heightProg[i] +"px" 
        }); 
    }; 
});

來源

2014-06-06 bogdanpol

如果您正在使用jQuery UI的滑塊，你可以使用[幻燈片變化事件（http://api.jqueryui.com/slider/#event-change ） – Pete

四個密切的投票，四個不同的密切的原因......這個問題有一個答案。猜猜我會收回我的近距離投票。 – Brilliand

也許你可以嘗試這樣的事情。經測試只有在FF壽

$('input[name=slider]').on('input', function() { 
    if (!$("body").hasClass("bg_img")) $("body").addClass("bg_img");  
    $("body").css({ "background-position" : "0px "+ ($(window).height() * (100 - $(this).val())/100) +"px"}); 
});

FIDDLE

來源

2014-06-06 12:31:51

正是我所期待的。只需要更新它爲我的代碼。謝謝，我會發布最終的工作解決方案 – bogdanpol

我創造了一些小提琴：http://jsfiddle.net/Y4rZq/

JS：

$('input[name=slider]').on('change', function() { 
    $('body').css('background-color', 'rgba(0,0,0,' + (this.value/100) + ')'); 
});

讓我知道，如果這是你在找什麼。

來源

2014-06-06 12:30:11

東西在相同的想法，但從容器的底部「擴展」到它所在的容器的頂部。 – bogdanpol

基於範圍滑塊值從底部淡入淡入的背景

回答

相關問題