从下拉菜单设置背景图像 – JavaScript

我想制作一个菜单，为一个关于我的艺术品的网站选择不同的背景。

这（链接适用于背景颜色，我能够很好地复制它.http：//www.javascripter.net/faq/backgrou.htm

我知道该属性是bgImg但我无法弄清楚如何实现它。 如果有人可以做一个简单的小提示，告诉我这个看似简单的技巧，我真的很感激。

谢谢！ 罗林

Answer 1

在这里，您只需在下拉列表中添加更多选项，并将图片url作为值，以提供更多背景选项。

HTML：

 Select a background Background 1 Background 2  

脚本：

 $(document).ready(function() { var body = $(document.body); $('#backgrounds').bind('change', function(event){ var bg = $(this).val(); if(bg == null || typeof bg === 'undefined' || $.trim(bg) === '') body.css('background-image', ''); else body.css('background-image', "url('" + bg + "')"); }); }); 

http://jsfiddle.net/Wg2AU/

要允许背景图像和背景颜色的组合，您可以使用以下代码：

HTML：

  Select a background Background Image 1 Background Image 2 Black Red  

脚本：

 $(document).ready(function() { var body = $(document.body); $('#backgrounds').bind('change', function(event){ var bg = $(this).val(); if(bg == null || typeof bg === 'undefined' || $.trim(bg) === '') body.css('background', 'none transparent'); else body.css('background', bg); }); }); 

http://jsfiddle.net/hKBtp/4/

Answer 2

jsFiddle演示

使用背景图像选项而不仅仅是颜色。

 
View my artwork:  A Wedding Photo Beautiful Sunset Canyon Lights Morning Dew My Wife's Ugly Wart My Beautiful Children  
 $(function () { $('#backArt').on('change', function () { var backImg = $('option:selected', this).val(); $('body').css('background-image', 'url(' + backImg + ')'); }); });