JS制作网页–点击图片换背景

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

<!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（JS）制作网页--点击图片换背景相关推荐

#3使用html+css+js制作网页制作登录网页
#3使用html+css+js制作网页制作登录网页本系列链接 2制作登录网页 2.1 准备 2.1.1 创建文件夹 2.1.2 创建主文件 2.2 html部分 2.2.1 网站信息 2.2.2 ...
#3使用html+css+js制作网页番外篇使用python flask 框架 (I)
#3使用html+css+js制作网页番外篇使用python flask 框架(I 第一部) 0. 本系列教程 1. 准备 a.python b. flask c. flask 环境安装 d. f ...
微信浏览器网页点击图片缩放
微信浏览器网页点击图片缩放 <script src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></scri ...
vivo手机的坑-禁止微信浏览器网页点击图片，图片会自动放大
这个坑让我郁闷极了,之前我的手机在微信浏览器打开网页点击图片时,啥事也没有现在,咋回事,变了呢! 现在我打开微信浏览器网页面html,点击一个img标签的图片,图片会自动满屏放大,吓死宝宝了.其他人 ...
怎么给图片换背景？点开收货一些新方法
平时我们有些照片拍出来可能任务比较好看而背景拍的不是那么理想,那么对于这种照片如果删除重新拍一张会有些可惜,其实我们可以给照片中的人物抠图出来更换背景就可以解决啦,那么怎么给图片换背景呢?今天来给小伙 ...
怎么使用在线PS对图片换背景如何快速抠图
PS 是功能很强大的一款软件,是一个公认的高科技图片处理器,但是很多人在电脑上直接下载不到或者安装不好,有种种的问题存在,有没有比较好用的在线PS呢?其实如今这样的在线网站很多,但是想要和PS软件有一 ...
vue项目一行js代码搞定点击图片放大缩小
一行js代码搞定xue项目需要点击图片放大缩小,其实主要用的是用到了vue:class的动态切换,内容比较简单.一开始我把维护的需求想得太复杂了,和测试小姐姐聊了一下才反应过来. 两个月不到跟了四个项 ...
HTML中弹窗中加入图片,javascript里怎么实现点击图片弹出对话框？
JavaScript中可以使用document.getElementsByTagName方法后去img标签,然后遍历所有img标签并为其添加点击事件实现点击弹出对话框. JavaScript实现点击图 ...
html点击图片产生事件,javascript里怎么实现点击图片弹出对话框？
JavaScript中可以使用document.getElementsByTagName方法后去img标签,然后遍历所有img标签并为其添加点击事件实现点击弹出对话框. JavaScript实现点击图 ...

JavaScript（JS）制作网页--点击图片换背景

JS制作网页–点击图片换背景

JavaScript（JS）制作网页--点击图片换背景相关推荐

最新文章

热门文章