Как изменить фоновое изображение, используя диапазон ввода?

Question

Я делаю небольшое веб-приложение для iOS только для личных нужд и мне нужна помощь с js. По сути, мне нужен слайдер (похожий на input type = "range", но работающий на iOS <5), который управляет фоном div. Другими словами, каждый из <em>n фонов должен быть связан с определенным диапазоном на шкале ползунка ввода. Поскольку у меня есть только самые базовые знания в 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/).