实现百度换肤功能

最新推荐文章于 2024-03-06 23:02:33 发布

萝卜头不吃萝卜头

最新推荐文章于 2024-03-06 23:02:33 发布

阅读量462

点赞数

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/SqlloveSyn/article/details/128459328

版权

具体功能：

点击图片浏览器背景变为所点的图片

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		* {
			margin: 0;
			padding: 0;
		}
		.baidu{
			overflow: hidden;
			margin: 50px auto;
		}
		body{
			width: 99%;
			height: 100vh;
			background:no-repeat center top;
			background-size: 100%;
		}
		li {
			list-style: none;
		}
		li img{
			width: 100px;
			height: 150px;
		}
		.baidu li {
			float: left;
			margin: 0 1px;
			cursor: pointer;
		}
		.baidu img{
			width: 100px;
		}
	</style>
	<body>
		<ul class="baidu">
			<li><img src="../img/pyy.jpg" alt=""></li>
			<li><img src="../img/pyy1.jpg" alt=""></li>
			<li><img src="../img/pyy2.jpg" alt=""></li>
		</ul>
		<script>
			var imgs = document.querySelector('.baidu').querySelectorAll('img');
			for (var i = 0; i < imgs.length; i++) {
				imgs[i].onclick = function() {
					document.body.style.backgroundImage = 'url(' + this.src + ')';
				}
			}
		</script>
	</body>
</html>

以上就是本章的全部内容，感谢您的阅读。