简易版百度换肤之background属性

最新推荐文章于 2023-04-17 14:46:32 发布

马码侠

最新推荐文章于 2023-04-17 14:46:32 发布

阅读量324

点赞数 1

分类专栏：前端文章标签： CSS JavaScript HTML 百度换肤

本文链接：https://blog.csdn.net/qq_43093230/article/details/99695441

版权

前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

用JavaScript实现简易百度换肤功能

百度换肤

简单来说，百度换肤就是将皮肤图片绑定点击事件，将body背景换为被点击的图片，达到换肤效果。

在这里插入图片描述

换肤之后，发现背景图片变化，那用JS怎么实现换肤效果呢
在这里插入图片描述
代码初稿：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			body {
				background: url(images/bg1.jpg);
				background-size: cover;
			}

			.content {
				position: absolute;
				left: 20%;
				top: 20%;
				width: 820px;
				height: 100px;

			}

			.content img {
				width: 160px;
				height: 100px;
				margin: 0;
				padding: 0;
				float: left;
				border: 2px solid #FFF9EC;
			}
		</style>
	</head>
	<body>
		<div class="content">
			<img src="images/bg1.jpg">
			<img src="images/bg2.jpg">
			<img src="images/bg3.jpg">
			<img src="images/bg4.jpg">
			<img src="images/bg5.jpg">
		</div>
		<script type="text/javascript">
			//1.获取图片元素
			var bg = document.querySelector('div').querySelectorAll('img');
			//2.使用for循环为每一个img元素绑定点击事件
			for (var i = 0; i < bg.length; i++) {
				bg[i].onclick = function() {
					//3.将img的图片路径src赋值给body元素
					document.body.style.background = 'url(' + this.src + ')';
					//4.改变body元素背景图片的大小
					document.body.style.backgroundSize = 'cover';
				}
			}
		</script>
	</body>
</html>

演示结果：

代码优化：

 <!DOCTYPE html>
 <html>
 	<head>
 		<meta charset="utf-8">
 		<title></title>
 		<style type="text/css">
 			* {
 				margin: 0;
 				padding: 0;
 			}
 
 			body {
 				/* 由于需要在JS中操作，为操作方便，避免使用复合样式 */
 				background-image: url(images/bg1.jpg);
				background-size: cover;
 			}
 
 			.content {
 				position: absolute;
 				left: 20%;
 				top: 20%;
 				width: 820px;
 				height: 100px;
 
 			}
 
 			.content img {
 				width: 160px;
 				height: 100px;
 				margin: 0;
 				padding: 0;
 				float: left;
 				border: 2px solid #FFF9EC;
 			}
 		</style>
 	</head>
 	<body>
 		<div class="content">
 			<img src="images/bg1.jpg">
 			<img src="images/bg2.jpg">
 			<img src="images/bg3.jpg">
 			<img src="images/bg4.jpg">
 			<img src="images/bg5.jpg">
 		</div>
 		<script type="text/javascript">
 			//1.获取图片元素
 			var bg = document.querySelector('div').querySelectorAll('img');
 			//2.使用for循环为每一个img元素绑定点击事件
 			for (var i = 0; i < bg.length; i++) {
 				bg[i].onclick = function() {
 					//3.将img的图片路径src赋值给body元素
					document.body.style.backgroundImage = 'url(' + this.src + ')';
 					//由于3中直接改body元素的backgroundImage属性，所以原样式中含有backgroundSize 属性，在此不需要修改图片大小属性
					//4.改变body元素背景图片的大小
 					//document.body.style.backgroundSize = 'cover';
 				}
 			}
 		</script>
 	</body>
 </html>

总结

1.background单个属性的写法

background-color;	/*背景颜色*/
background-image: url(sample.gif);	 /*背景图片*/
background-repeat: no-repeat; /*平铺(?)*/
background-attachment: fixed; /*随文本滚动/
background-position: center center; /*背景图片位置*/

2.background复合属性的写法（注意image repeat ,attachment position之间用空格隔开,size与position之间用"/"隔开）

background: image repeat ,attachment position / size

/*实例*/
background: url(images/bg.jpg) no-repeat scroll center/cover;
/*默认属性及属性值*/
background: transparent none repeat scroll 0% 0%;

注意： 如果在设置background属性值的个数较少时，最好不要应用复合属性，以免在JS操作文本时，由于选择器优先级问题会产生样式覆盖现象或者其他不必要的麻烦。

马码侠

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
简易版百度换肤之background属性

用JavaScript实现简易百度换肤功能百度换肤简单来说，百度换肤就是将皮肤图片绑定点击事件，将body背景换为被点击的图片，达到换肤效果。换肤之后，发现背景图片变化，那用JS怎么实现换肤效果呢代码初稿：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <tit...
复制链接

扫一扫