JavaScript实现 下拉框更换背景图片

最新推荐文章于 2022-08-20 16:18:42 发布
最新推荐文章于 2022-08-20 16:18:42 发布
阅读量1.6k 收藏 3
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44317900/article/details/102667964
版权 
<body>

<select id="q" onchange="changebg(this)" >
    <option disabled selected value>请选择</option>
    <option value="url('春意绵绵.png')">春意绵绵</option>
    <option value="url('夏日炎炎.png')">夏日炎炎</option>
    <option value="url('秋风瑟瑟.png')">秋风瑟瑟</option>
    <option value="url('冬雪皑皑.png')">冬雪皑皑</option>
<script>



function changebg(selObj) {
    selindex=selObj.selectedIndex
    bgsrc=selObj.options[selindex].value
    document.body.style.background=bgsrc
}
</script>
</select>
</body>

将图片路径填入下拉框选项的value值中，只要选中，就将value取出设定为背景图片路径

weixin_44317900
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js实现下拉框选择要显示图片的方法
10-24
主要介绍了js实现下拉框选择要显示图片的方法,涉及针对js操作select的技巧,非常具有实用价值,需要的朋友可以参考下
超简短JS实现下拉菜单改变网页背景图片
weixin_30565327的博客
07-25 851
<html> <head> <title>石家庄水刀切割</title> </head> <body> <SELECT onChange="changebg(this)"> <OPTION SELECTED>没有背景 <OPTION VALUE="url('/images/20...
HTML+JS根据下拉列表内容改变图片
qq_41255880的博客
10-15 2565
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <select onchange="changePic(this.value)"> <...
JS实现点击按钮图片左右切换、点击图片按钮出现下拉菜单
征程
05-20 8353
前天帮祥哥他女票做个网页作业，大概要求就是使用两个按钮控制图片的切换，在页面右上角出现一个图片按钮，点击这个按钮出现下拉菜单。 第一个要求还是很简单的，第二个多花了我几个小时的时间，因为我只做过select下拉菜单,这种使用图片按钮的还真没整过。不过后来找到一种方法就是对下拉菜单单独放置一个div，设置style=”display:none”，当点击图片按钮的时候更改style=”display:
JavaScript实现更换图片的小例子
java天气
06-07 259
开始学习JavaScript脚本语言了，经过了几天专门的学习。我了解到了JavaScript是一种基于原型的开发语言。具体怎样基于原型呢？尽管查了很多资料，我还是不是很清楚它的概念。 今天我们先不讨论基于原型的问题，我们用JavaScript语言实现一个更换图片的小例子。 下面开始： 一、设计界面： 首先，准备两张图片： 然后添加一个一行三列的Table，进...
使用javascript实现下拉框的动态控制
07-22
资源名称：使用Javaｓｃｒｉｐｔ实现下拉框的动态控制   内容简介： 使用Javaｓｃｒｉｐｔ实现下拉框的动态控制 一、前言 下拉框是常用的一种web页面控件。它很简单实用，便于 操作者从…组选项...
jQuery实现下拉框选择图片功能实例
10-23
主要介绍了jQuery实现下拉框选择图片功能,可实现带图片的下拉列表功能,涉及jquery插件imageselect.js的使用,需要的朋友可以参考下
基于JavaScript实现树形下拉框
11-23
平时会经常遇到树形结构的问题，比如显示目录结构等。 大多数情况下后台会返回这样的数据，如下： [ { id: 19, pid: 0, name: 'nodejs' },...{ id: 70, pid: 59, name: 'javascript' }, { id: 71, pid: 59, name: 'cs
《javascript实现下拉框表单美化的详细实例教程》源码
04-01
本文件属于文章《javascript实现下拉框表单美化的详细实例教程》的完整代码，在读完原创文章之后可以下载查看代码。代码中有详细的注释说明。html、css、js代码都在同一个文件中。也可以供有需要的朋友在开发中直接...
使用JavaScript来实现图片的切换
Librae33的博客
06-04 2885
最终实现的效果如图： 设计的思路是这样的：    1.上面的图片个数是变化的，初始化为0  -> num   2.图片要动态的加进去，不是一开始就定好的，通过传递的参数确定，将图片都放到一个数组中去 ->imgArr   3.图片对应的li也是变化的，根据传入的图片的个数来定   4.图片对应的文本也是变化的 textArr   5.事件也是变化的，通过参数传进去 ->evt
基于javascript实现图片切换效果_javascript技巧
01-08 3705
基于javascript实现图片切换效果_javascript技巧 本文实例为大家分享了js实现图片切换效果，供大家参考，具体内容如下 用js实现点击按钮，图片切换的效果： 结构：用一个固定宽高的div来做最外层的容器，设置overflow为hidden， 然后内层img_box设置宽度为四倍box的宽度，高度相同，也就是说img_box里面盛放四张img，但是可见的只有一张，下面的两个div，left和right是充当按钮实现点击切换图片，切换图片也就是改变img_box的left属
能够动态根据下拉列表的选项变化，更新图片
m0_47708359的博客
06-23 582
自己换图片
JavaScript：点击图片后更换图片
weixin_43203591的博客
08-12 6303
背景 单击图片实现更换图片。本例中代码实现单击图片后交替显示两张图片。 实现 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>灯泡</title> </head> <body> <img id = "pic" src = "on.png"> <!--此处应注意图片位置，确保图片在当前
下拉列表框实现图像切换
Bule_daze的博客
03-15 3102
下拉列表框实现图像切换。代码如下所示： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>下拉菜单</title> <script language="javascript"> function $(id) {return d...
JavaScript十五：表单六：图片，下拉列表框选不同值显示不同的图片
小枯林的博客
12-29 2446
需求：改变列表框的值时候，图片发生改变：、 程序代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!--add()方法输出中文出现了乱码，这儿指定下编码方式--> <title>js</title> <script type="text/javascript" src="index.js"></script&gt
JavaScript练习---[JS动态切换图片效果；JS完成简易计算器, 下拉框切换头像, JS 制作简易文本编辑器]
从零开始的异世界JAVA学习
09-13 796
ML1.在页面上输出格式如：2016年07月19日 12时23分34秒 星期二 的格式2. 在页面创建一个按钮名称为“摇奖”每点击一次在页面显示出三个0-9之间的随机数。3.创建两个按钮分别为“显示”“隐藏”，使用两个按钮对一个标签进行隐藏，显示操作。4.完成图片切换功能,当鼠标移入到图片上时,在图片左右两侧各显示一个按钮,点击按钮对图片进行切换,到达第一张或最后一张时分别又回到最后一张或第一张,重复操作。5.完成简单的计算器 1.在页面上输出格式如：2016年07月19日 12时23分34秒 星期二
JSP实现下拉菜单选择背景颜色
m0_63581039的博客
01-27 2708
问题：该网站首页用一个下拉菜单选择背景颜色，提交，到达页面1，背景颜色为用户选择的颜色。下次用户直接访问页面1时，立即显示上一次选择的颜色，无需重新选择。 主要代码如下 <body> <form action="jsp2(2).jsp" method="post" > 请选择背景: <select name="s"> <option value="blue">蓝色<option> <option value="...
02下拉框切换图片
m0_3549的博客
08-20 440
通过下拉框切换显示不同的图片
用js实现下拉框跳转和下拉框选择图片
Earl_86
12-17 2981
用js实现下拉框跳转和下拉框选择图片 Ghost 发表于 [2005-11-11 23:27] 下拉框跳转 MP3音乐下载 中国音乐网 九天音乐网 下拉框选择图片 看看图片1 看看图片2 看看图片3 看看图片4 ...
html5select下拉框实现背景切换
最新发布
04-10
使用HTML5的select下拉框实现背景切换，需要通过JavaScript监听select值的变化事件，根据不同的值切换不同的背景图片或CSS样式。可以使用CSS实现背景图片的切换，或在JavaScript中修改元素的className实现CSS样式的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值