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 Accessor实现说明
Dec 06 Javascript
异步动态加载js与css文件的js代码
Sep 15 Javascript
页面图片浮动左右滑动效果的简单实现案例
Feb 10 Javascript
详解JavaScript语言的基本语法要求
Nov 20 Javascript
原生JavaScript实现Ajax的方法
Apr 07 Javascript
jQuery 选择符详细介绍及整理
Dec 02 Javascript
JavaScript 网页中实现一个计算当年还剩多少时间的倒数计时程序
Jan 25 Javascript
vue和webpack项目构建过程常用的npm命令详解
Jun 15 Javascript
JS封装的模仿qq右下角消息弹窗功能示例
Aug 22 Javascript
详解vue项目中使用token的身份验证的简单实践
Mar 08 Javascript
微信小程序页面间传值与页面取值操作实例分析
Apr 30 Javascript
vue项目中使用rem,在入口文件添加内容操作
Nov 11 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 Mysql日期和时间函数集合
2007/11/16 PHP
php xml文件操作代码(一)
2009/03/20 PHP
PHP连接sql server 2005环境配置及问题解决
2014/08/08 PHP
php 使用file_get_contents读取大文件的方法
2014/11/13 PHP
php实现的简单检验登陆类
2015/06/18 PHP
php curl抓取网页的介绍和推广及使用CURL抓取淘宝页面集成方法
2015/11/30 PHP
PHP实现基于栈的后缀表达式求值功能
2017/11/10 PHP
JavaScript中void(0)的具体含义解释
2007/02/27 Javascript
动态创建的表格单元格中的事件实现代码
2008/12/30 Javascript
JQery 渐变图片导航效果代码 漂亮
2010/01/01 Javascript
表单的焦点顺序tabindex和对应enter键提交
2013/01/04 Javascript
如何在指定的地方插入html内容和文本内容
2013/12/23 Javascript
javascript动态判断html元素并执行不同的操作
2014/06/16 Javascript
用js通过url传参把数据从一个页面传到另一个页面
2014/09/01 Javascript
javascript实现下班倒计时效果的方法(可桌面通知)
2015/07/10 Javascript
总结jQuery插件开发中的一些要点
2016/05/16 Javascript
JavaScript的Vue.js库入门学习教程
2016/05/23 Javascript
JS实现的DIV块来回滚动效果示例
2017/02/07 Javascript
浅谈struts1 &amp; jquery form 文件异步上传
2017/05/25 jQuery
使用原生js+canvas实现模拟心电图的实例
2017/09/20 Javascript
vue-router路由与页面间导航实例解析
2017/11/07 Javascript
vue 使用自定义指令实现表单校验的方法
2018/08/28 Javascript
ES5和ES6中类的区别总结
2020/12/21 Javascript
详解Python中的条件判断语句
2015/05/14 Python
对python cv2批量灰度图片并保存的实例讲解
2018/11/09 Python
实例讲解Python中浮点型的基本内容
2019/02/11 Python
python文件读写代码实例
2019/10/21 Python
python列表推导和生成器表达式知识点总结
2020/01/10 Python
关于Django Models CharField 参数说明
2020/03/31 Python
希尔顿酒店官方网站:Hilton Hotels
2017/06/01 全球购物
澳大利亚设计的婴儿和女孩的衣服:Oobi
2018/12/16 全球购物
集体婚礼证婚词
2014/01/13 职场文书
社团活动总结模板
2014/06/30 职场文书
六年级语文下册教学计划
2015/01/22 职场文书
辣妈辣妹观后感
2015/06/10 职场文书
python 多态 协议 鸭子类型详解
2021/11/27 Python