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 相关文章推荐
超级强大的表单验证
Jun 26 Javascript
js实现的网页颜色代码表全集
Jul 17 Javascript
用Jquery实现可编辑表格并用AJAX提交到服务器修改数据
Dec 27 Javascript
ECMAScript6新增值比较函数Object.is
Jun 12 Javascript
js基于myFocus实现轮播图效果
Feb 14 Javascript
VUE + UEditor 单图片跨域上传功能的实现方法
Feb 08 Javascript
对Vue.js之事件的绑定(v-on: 或者 @ )详解
Sep 15 Javascript
JS监听事件的叠加和移除功能
Nov 19 Javascript
微信小程序mpvue点击按钮获取button值的方法
May 29 Javascript
如何在微信小程序中实现Mixins方案
Jun 20 Javascript
element form 校验数组每一项实例代码
Oct 10 Javascript
微信小程序后端(java)开发流程的详细步骤
Nov 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
深入php函数file_get_contents超时处理的方法详解
2013/06/03 PHP
php中smarty模板条件判断用法实例
2015/06/11 PHP
laravel 获取某个查询的查询SQL语句方法
2019/10/12 PHP
PHP执行系统命令函数实例讲解
2021/03/03 PHP
解析Javascript中中括号“[]”的多义性
2013/12/03 Javascript
jQuery实现鼠标经过图片预览大图效果
2014/04/10 Javascript
常用的jQuery前端技巧收集
2014/12/24 Javascript
jQuery消息提示框插件Tipso
2015/05/04 Javascript
常见JS验证脚本汇总
2015/12/01 Javascript
javascript中的后退和刷新实现方法
2016/11/10 Javascript
详解如何在Vue2中实现组件props双向绑定
2017/03/29 Javascript
javaScript 逻辑运算符使用技巧整理
2017/05/03 Javascript
js实现音乐播放控制条
2017/09/09 Javascript
浅谈es6语法 (Proxy和Reflect的对比)
2017/10/24 Javascript
vue.js中toast用法及使用toast弹框的实例代码
2018/08/27 Javascript
JavaScript实现左右滚动电影画布
2020/02/06 Javascript
如何基于javascript实现贪吃蛇游戏
2020/02/09 Javascript
Python简单实现自动删除目录下空文件夹的方法
2017/08/29 Python
python如何实现内容写在图片上
2018/03/23 Python
Python实现快速傅里叶变换的方法(FFT)
2018/07/21 Python
Django中数据库的数据关系:一对一,一对多,多对多
2018/10/21 Python
解决python3中cv2读取中文路径的问题
2018/12/05 Python
python 读取竖线分隔符的文本方法
2018/12/20 Python
对Python 两大环境管理神器 pyenv 和 virtualenv详解
2018/12/31 Python
在pyqt5中QLineEdit里面的内容回车发送的实例
2019/06/21 Python
Python 炫技操作之合并字典的七种方法
2020/04/10 Python
tensorflow dataset.shuffle、dataset.batch、dataset.repeat顺序区别详解
2020/06/03 Python
总结30个CSS3选择器
2017/04/13 HTML / CSS
使用分层画布来优化HTML5渲染的教程
2015/05/08 HTML / CSS
医校毕业生自我鉴定
2014/01/25 职场文书
网上卖盒饭创业计划书
2014/01/26 职场文书
党员批评与自我批评
2014/02/12 职场文书
安全负责人任命书
2014/06/06 职场文书
工程部文员岗位职责
2015/02/04 职场文书
面试必问:圣杯布局和双飞翼布局的区别
2021/05/13 HTML / CSS
win10系统计算机图标怎么调出来?win10调出计算机图标的方法
2022/08/14 数码科技