javascript小案例-----换肤效果

效果如下:

代码思路:

    给一组元素注册事件

    给3个小图片利用循环注册点击事件

    当我们点击这个图片,让页面背景给为当前图片

    把当前图片的src路径取过来,给body作为背景

html部分:

	<ul class="box">
		<li><img src="img/pic01.jpg"></li>
		<li><img src="img/pic02.jpg"></li>
		<li><img src="img/pic03.jpg"></li>
	</ul>

css部分:

	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}

		body {
			background: url(img/pic01.jpg) no-repeat center;
			background-size: cover;
		}

		li {
			list-style: none;
		}

		.box {
			overflow: hidden;
			margin: 100px auto;
			width: 410px;
			padding-top: 3px;
		}

		.box li {
			float: left;
			margin: 0 1px;
			cursor: pointer;
		}

		.box img {
			width: 100px;
		}
	</style>

script部分:

<script type="text/javascript">

	//获取元素
	//先把box的盒子获取出来,再获取box里面所有的img
	var imgs = document.querySelector('.box').querySelectorAll('img ');
	// console.log(imgs);//N odeList(3) [img, img, img]

	//循环注册
	for (var i = 0; i < imgs.length; i++) {
		imgs[i].onclick = function () {
			//this.src就是我们点击图片的路径,把这个路径给到body
			document.body.style.backgroundImage = 'url(' + this.src + ')'
		}
	}
</script>