JavaScript实现点击图片换背景


Posted in Javascript onNovember 20, 2020

JS制作网页?点击图片换背景,供大家参考,具体内容如下

JavaScript实现点击图片换背景

网页中有四个图片,点击不同的图片,更换相对应的背景。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>背景</title>
 <style>
 *{
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 }
 li {
 list-style: none;
 }
 img{
 border: 0px;
 vertical-align: middle;
 width: 192px;
 }
 div{
 width: 768px;
 height: 120px;
 }
 div ul {
 overflow: hidden;
 background-color: pink ;
 margin: 100px auto;
 }
 div ul li {
 float: left;
 width: 192px;
 height: 120px;
 cursor: pointer;
 }
 body{
 background: url(images/1.jpg) no-repeat center top;
 }
 </style>
</head>
<body>
 <div>
 <ul>
 <li><img src=images/1.jpg> </li>
 <li><img src=images/2.jpg></li>
 <li><img src=images/3.jpg></li>
 <li><img src=images/4.jpg></li>
 </ul>
 </div>
 <script>
 var img = document.querySelector('ul').querySelectorAll('img')
 for(var i = 0 ;i < img.length;i++){
 img[i].onclick = function(){
 document.body.style.backgroundImage='url('+this.src+')';
 }
 }
 </script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
小议Javascript中的this指针
Mar 18 Javascript
jquery tab插件制作实现代码
Jun 22 Javascript
用JS判断IE版本的代码 超管用!
Aug 09 Javascript
改变隐藏的input中value的值代码
Dec 30 Javascript
JS实现横向与竖向两个选项卡Tab联动的方法
Sep 27 Javascript
node.js中的事件处理机制详解
Nov 26 Javascript
js中的触发事件对象event.srcElement与event.target详解
Mar 15 Javascript
socket.io与pm2(cluster)集群搭配的解决方案
Jun 02 Javascript
详解vue-cli本地环境API代理设置和解决跨域
Sep 05 Javascript
Vue之Vue.set动态新增对象属性方法
Feb 23 Javascript
使用vue制作滑动标签
Sep 21 Javascript
vue-resource post数据时碰到Django csrf问题的解决
Mar 13 Javascript
JavaScript实现鼠标经过表格某行时此行变色
Nov 20 #Javascript
JavaScript实现复选框全选和取消全选
Nov 20 #Javascript
JavaScript实现网页下拉菜单效果
Nov 20 #Javascript
JavaScript实现网页tab栏效果制作
Nov 20 #Javascript
原生js实现弹窗消息动画
Nov 20 #Javascript
js实现限定区域范围拖拉拽效果
Nov 20 #Javascript
vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
Nov 20 #Vue.js
You might like
PHP4实际应用经验篇(3)
2006/10/09 PHP
使用php判断网页是否gzip压缩
2013/06/25 PHP
JavaScript 读取元素的CSS信息的代码
2010/02/07 Javascript
div+css布局的图片连续滚动js实现代码
2010/05/04 Javascript
JS 屏蔽按键效果与改变按键效果的示例代码
2013/12/24 Javascript
JavaScript通过正则表达式实现表单验证电话号码
2014/03/07 Javascript
javascript中使用正则计算中文长度的例子
2014/04/29 Javascript
javascript结合ajax读取txt文件内容
2014/12/05 Javascript
javascript事件委托的用法及其好处简析
2016/04/04 Javascript
jQuery插件AjaxFileUpload实现ajax文件上传
2016/05/05 Javascript
深入浅出ES6新特性之函数默认参数和箭头函数
2016/08/01 Javascript
Canvas 制作动态进度加载水球详解及实例代码
2016/12/09 Javascript
15个非常实用的JavaScript代码片段
2016/12/18 Javascript
vue-router跳转页面的方法
2017/02/09 Javascript
jQuery回调方法使用示例
2017/06/26 jQuery
关于vue.js组件数据流的问题
2017/07/26 Javascript
nodejs 日志模块winston的使用方法
2018/05/02 NodeJs
bootstrap 路径导航 分页 进度条的实例代码
2018/08/06 Javascript
微信小程序自定义轮播图
2018/11/04 Javascript
js计算最大公约数和最小公倍数代码实例
2019/09/11 Javascript
layer 关闭指定弹出层的例子
2019/09/25 Javascript
linux系统使用python获取内存使用信息脚本分享
2014/01/15 Python
python使用reportlab实现图片转换成pdf的方法
2015/05/22 Python
python运行时间的几种方法
2016/06/17 Python
python+opencv实现的简单人脸识别代码示例
2017/11/14 Python
Python3.遍历某文件夹提取特定文件名的实例
2018/04/26 Python
python编写简易聊天室实现局域网内聊天功能
2018/07/28 Python
用django-allauth实现第三方登录的示例代码
2019/06/24 Python
python 上下文管理器及自定义原理解析
2019/11/19 Python
python sorted函数原理解析及练习
2020/02/10 Python
Python批量处理csv并保存过程解析
2020/05/16 Python
五分钟学会怎么用python做一个简单的贪吃蛇
2021/01/12 Python
CSS3中currentColor关键字的妙用
2016/02/27 HTML / CSS
伦敦鲜花递送:Flower Station
2021/02/03 全球购物
中层干部竞争上岗演讲稿
2014/01/13 职场文书
MongoDB 常用的crud操作语句
2021/06/20 MongoDB