js代码实现百度换肤

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

二朔吖

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

阅读量854

点赞数

文章标签： js 百度

本文链接：https://blog.csdn.net/weixin_54893445/article/details/117465560

版权

案例分析：

1.这个案例练习的是给一组元素注册事件

2.给4个小图片利用循环注册点击事件

3.当我们点击了这个图片，让我们页面背景改为当前图片

4.核心算法：把图片的src路径取过来，给body作为背景即可

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body{
				background-image: url(img/one.jpg);
			}
			#baidu{
				float: right;
			}
			#baidu li{
				float: left;
				list-style: none;
					}
			#baidu img{
				width: 140px;
				height: 200px;
				position: relative;
				right: 462px;
    			top: 300px;
					}


		</style>
	</head>
	<body>
		<ul id="baidu">
			<li><img src="img/one.jpg" /></li>
			<li><img src="img/two.jpg" /></li>
			<li><img src="img/three.jpg" /></li>
		</ul>
		<script type="text/javascript">
			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>