如何使用輸入範圍更改背景圖像？

Question

我正在製作一個適用於iOS的小型webbapp，只是爲了滿足我的私人需求，並且需要js的一些幫助。 基本上，我需要的是一個滑塊（類似於輸入類型=「範圍」，但工作在iOS < 5），它控制着div的背景。換句話說，在輸入滑動標尺上的每個應該與特定範圍相關聯的場地。由於我在javascript中只有非常基礎的知識，所以從頭開始編寫一個定製的東西是不可能的。也許有人可以指出現有的解決方案？先謝謝你。

Answer 1

您可以使用Jquery Mobile庫（http://jquerymobile.com/demos/1.0rc2/docs/forms/slider/）中的滑塊獲取基本滑塊功能，然後使用範圍更改背景。例如：

// if backgrounds are equally spread on the slider then you can just 
// divide slider value to the number of backgrounds and round the results 

var range = Math.round(your_range_from_slider/number_of_backgrounds); 

// then change background to the one you need. For example 
// in you named backgrounds background_1.jpg, background_2.jpg, etc. 
// And element to which you want to set it have id="bg" 

$("#bg").css("background-color", "background_" + range + ".jpg"); 

要了解更多有關JQuery的語法使用http://docs.jquery.com/Main_Page（趕上滑塊的變化，你可能需要使用的變化（）事件http://api.jquery.com/change/）。