JS 实现选中图片改变页面背景排他性

最新推荐文章于 2023-11-08 13:22:19 发布

闲鱼本鱼

最新推荐文章于 2023-11-08 13:22:19 发布

阅读量425

点赞数

分类专栏： JavaScript知识点

本文链接：https://blog.csdn.net/qq_51369065/article/details/119466542

版权

JavaScript知识点专栏收录该内容

5 篇文章 0 订阅

订阅专栏

选中图片，页面背景被切换成改图片

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				list-style: none;
			}
			body {
				background: url(../images/1.jpg) no-repeat;
			}
			ul {
				width: 420px;
				display: flex;
				justify-content: space-around;
				margin: 100px auto;
				padding: 5px;
				padding-bottom: 1px;
				background-color: #fff;
			}
			ul li  {
				margin: 0 2px;
			}
			ul li img {
				width: 100px;
				
			}
			/* 选中效果 */
			.active {
				box-shadow: 0 0 5px #000;
			}			
		</style>
	</head>
	<body>
		<ul>
			<!-- 默认选中的图片 -->
			<li><img src="../images/1.jpg" class="active"></li>	
			<li><img src="../images/2.jpg" ></li>
			<li><img src="../images/3.jpg" ></li>
			<li><img src="../images/4.jpg" ></li>			
		</ul>		
		<script type="text/javascript">
			var lis = document.querySelectorAll("img");		//获取图片数组
			for (var i=0; i<lis.length; i++) {
				lis[i].onclick = function() {				//为每一张图片都加上点击事件
					for (var i=0; i<lis.length; i++) {
						lis[i].className = "";				//清除每一个图片的动画样式
					}
					this.className = "active";			//为选中的图片添加样式
					
					var bg = this.src;					//获取选中图片的路径
					document.body.style.background = "url("+bg+")";	//设置页面背景图片为当前图片
				}
			}
		</script>
	</body>
</html>

执行效果如下：选择哪张图片，页面背景就会切换成当前图片

闲鱼本鱼

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JS 实现选中图片改变页面背景排他性

选中图片，页面背景被切换成改图片<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; list-style: none; } body { background: url.
复制链接

扫一扫