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

发布于 2024-12-12 03:57:07 字数 234 浏览 0 评论 0原文

我正在为 iOS 制作一个小型 Web 应用程序，只是为了满足我的私人需求，并且需要一些 js 方面的帮助。基本上，我需要的是一个滑块（类似于 input type="range"，但在 iOS <5 上工作），它控制 div 的背景。换句话说，n 个背景中的每一个都应与输入滑块刻度上的特定范围相关联。由于我对 javascript 只有非常基本的知识，因此从头开始编写自定义的东西是不可能的。也许有人可以指出现有的解决方案？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

贪恋 2024-12-19 03:57:07

您可以使用 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/< /a>）。

You can use slider from Jquery Mobile library ( http://jquerymobile.com/demos/1.0rc2/docs/forms/slider/ ) for basic slider functionality and then change background with a range. For example:

// 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");

To learn more about JQuery syntax use http://docs.jquery.com/Main_Page (to catch slider changes you will probably need to use change() event http://api.jquery.com/change/).

回复收藏 0 原文

~没有更多了~