如何使用输入范围更改背景图像？

Question

我正在为iOS制作一个小型webbapp，仅仅是为了我的私人需求，需要一些js的帮助。 基本上，我需要的是一个滑块（类似于输入类型=“范围”，但在iOS＆lt; 5上工作），它控制div的背景。换句话说， n bacgrounds中的每一个都应与输入滑块刻度上的特定范围相关联。由于我只有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（要捕获滑块更改，您可能需要使用change（）事件http://api.jquery.com/change/）。