超简短JS实现下拉菜单改变网页背景图片

最新推荐文章于 2022-03-04 08:56:03 发布
最新推荐文章于 2022-03-04 08:56:03 发布
阅读量872 收藏 1
点赞数
文章标签： javascript 前端 ViewUI
原文链接：http://www.cnblogs.com/youtianxia/p/3867418.html
版权 
<html>
<head>
<title>石家庄水刀切割</title>
</head>
<body>
<SELECT onChange="changebg(this)"> 
<OPTION SELECTED>没有背景
<OPTION VALUE="url('/images/20130704/bgdemo1.jpg')">雪花背景 
<OPTION VALUE="url('/images/20130704/bgdemo2.jpg')"> 纹理背景 
<OPTION VALUE="url('/images/20130704/bgdemo3.jpg')"> 方格背景
</select>
</body>
</html>
<script language=javascript>
function changebg(obj){
selindex=obj.selectedIndex    //取得选定选项的序号
bgsrc=obj.options[selindex].value    //取得背景图片的路径
document.body.style.background=bgsrc //设定style.background属性，改变页面背景
}
</script>

<br />

转载于:https://www.cnblogs.com/youtianxia/p/3867418.html

weixin_30565327
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript练习---[JS动态切换图片效果；JS完成简易计算器, 下拉框切换头像, JS 制作简易文本编辑器]
从零开始的异世界JAVA学习
09-13 819
ML1.在页面上输出格式如：2016年07月19日 12时23分34秒 星期二 的格式2. 在页面创建一个按钮名称为“摇奖”每点击一次在页面显示出三个0-9之间的随机数。3.创建两个按钮分别为“显示”“隐藏”，使用两个按钮对一个标签进行隐藏，显示操作。4.完成图片切换功能,当鼠标移入到图片上时,在图片左右两侧各显示一个按钮,点击按钮对图片进行切换,到达第一张或最后一张时分别又回到最后一张或第一张,重复操作。5.完成简单的计算器 1.在页面上输出格式如：2016年07月19日 12时23分34秒 星期二
JavaScript实现 下拉框更换背景图片
weixin_44317900的博客
10-21 1666
<body> <select id="q" onchange="changebg(this)" > <option disabled selected value>请选择</option> <option value="url('春意绵绵.png')">春意绵绵</option> <option...
下拉列表框实现图像切换
Bule_daze的博客
03-15 3169
下拉列表框实现图像切换。代码如下所示： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>下拉菜单</title> <script language="javascript"> function $(id) {return d...
js 多选框，（切换的是背景图片）
责任与担当
06-29 512
多选框，（切换的是背景图片） //------------多选框代码–开始-------------- class CheckBox{ _checked=false; // 构造函数,new的时候执行这个函数 constructor(){ this.elem=this.createCheck(); } ...
[js]点击更换背景颜色/图片
dududu01的专栏
06-26 8778
1，按钮样式 org_Color=document.bgColor.substring(1.10) 2，下拉样式 灰色的 黑的色 淡紫蓝 太阳黄 淡红橘 苹果绿 草原绿 橄榄色 天空蓝 蓝绿色 墨绿色 米白色 3，触碰样式 function backcolor(form){ temp = "" for (v
js 下拉菜单实现代码
10-29
JavaScript下拉菜单是前端开发中常见的交互组件，它允许用户通过鼠标悬停在菜单项上来展开或隐藏子菜单。本文提供的代码示例包含了一段简单的JavaScript代码，用于控制下拉菜单的显示与隐藏，同时提供了一段基础的...
漂亮的大背景图片CSS和jQuery导航栏特效代码
03-20
在这个项目中，jQuery可能用于实现导航栏的响应式行为，如鼠标悬停时的下拉菜单、导航链接的平滑滚动效果，或者背景图片的动态加载效果。 4. **导航栏**：在CSS中，可以使用`nav`元素创建导航栏。通过`display: ...
web前端期末大作业——HTML+CSS简单的旅游网页设计与实现
08-10
2. **下拉导航栏**：通过监听鼠标事件来控制下拉菜单的显示和隐藏。 3. **鼠标划过效果**：比如改变链接的颜色或背景颜色等。 4. **表单验证**：使用JavaScript对用户提交的信息进行初步验证，确保格式正确。 综上...
简单社区介绍功能菜单html模板下载
04-02
10. **交互元素（Interactive Elements）**：如按钮、表单、下拉菜单等，应有良好的用户体验，确保用户能轻松操作。 在开发这个HTML模板时，开发者可能会使用HTML5语义化标签来提高可读性和SEO优化，同时结合CSS3...
淘宝菜单栏
11-13
9. JavaScript交互：虽然标签和描述没有提到，但在实际应用中，淘宝菜单栏可能还包含JavaScript代码，用于实现下拉菜单、动画效果或者更复杂的交互功能。 总的来说，这个“淘宝菜单栏”示例可能包括基础的HTML结构...
js实现下拉框选择要显示图片的方法
10-24
主要介绍了js实现下拉框选择要显示图片的方法,涉及针对js操作select的技巧,非常具有实用价值,需要的朋友可以参考下
HTML+JS根据下拉列表内容改变图片
qq_41255880的博客
10-15 2660
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <select onchange="changePic(this.value)"> <...
JS实现点击按钮图片左右切换、点击图片按钮出现下拉菜单
征程
05-20 8423
前天帮祥哥他女票做个网页作业，大概要求就是使用两个按钮控制图片的切换，在页面右上角出现一个图片按钮，点击这个按钮出现下拉菜单。 第一个要求还是很简单的，第二个多花了我几个小时的时间，因为我只做过select下拉菜单,这种使用图片按钮的还真没整过。不过后来找到一种方法就是对下拉菜单单独放置一个div，设置style=”display:none”，当点击图片按钮的时候更改style=”display:
将select的默认小三角替换成别的图片，且实现点击图片出现下拉框选择option
weixin_30954607的博客
05-31 650
最近做项目，要求修改select下拉框的默认三角样式，因为它在不同浏览器的样式不同且有点丑，找找网上也没什么详细修改方法，我就总结一下自己的吧。 目标是做成下图效果： 图一：将默认小三角换成红圈的三角图片 图二：点击三角图片，同样实现下拉框选择 1.HTML 1 <div class="withArrow"> 2 <label for=""...
HTML+JQuery实现图片随着下拉框内容的改变而改变
qq_41255880的博客
10-16 1363
使用jquery实现图片随着下拉框内容的改变而改变 在jquery里面先获取需要绑定的下拉框的id，再获取图片id以及需要替换上的图片路径，然后判断input的值，根据它的值显示不同的图片 具体操作如下 1、首先调用jQuery库 <script src="js/jquery-1.7.js"></script> 2、jquery部分 <script...
JavaScript的一些下拉列表框用法
二木成林
10-20 1375
效果展示 源码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>设置下拉列表框的列表项</title> </head> <body> <div> <select name="com...
用js实现下拉框跳转和下拉框选择图片
Earl_86
12-17 3007
用js实现下拉框跳转和下拉框选择图片 Ghost 发表于 [2005-11-11 23:27] 下拉框跳转 MP3音乐下载 中国音乐网 九天音乐网 下拉框选择图片 看看图片1 看看图片2 看看图片3 看看图片4 ...
js实现图片切换
qq_43501963的博客
03-04 2336
1.按对应按钮切换到对应图片 html部分 <img width="400px" src="../images/image1.jpeg" alt=""> <hr> <div class="btnlist"> <button class="btn" num="1">按钮1</button> <button class="btn" num="2">按钮2</button&.
网页制作学习4----博客前端之下拉菜单
Pitter_Patter_Bee的专栏
03-09 687
效果：鼠标放上去会出现一个下拉的菜单。 首先文件有index.css,index.js,index.html  base.js   先把界面做出来。 1、在index.html里面添加 个人中心 效果如下：   2、然后我们的css先这么写： body{ margin:0; //记住要写分号，不然出不来效果，我试过 padding:0;      //内外
JavaScript实现图片旋转、缩放与镜像切换教程
"这篇文章主要展示了如何使用JavaScript实现图片的旋转、鼠标滚轮缩放、镜像翻转以及图片切换的功能。作者提供了一段详细的代码示例，帮助开发者理解和实现这些功能。" 在网页开发中，JavaScript是一种常用的客户端...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值