浏览器换肤功能项目案例百度换肤

最新推荐文章于 2022-07-13 19:06:52 发布

侯志杰

最新推荐文章于 2022-07-13 19:06:52 发布

阅读量1.8k

点赞数 3

分类专栏：学习使我快乐文章标签： js实现换肤效果 js函数封装百度换肤功能前端 HTML

本文链接：https://blog.csdn.net/qq_43082131/article/details/82155866

版权

学习使我快乐专栏收录该内容

4 篇文章 0 订阅

订阅专栏

大家好我是攻城狮JiRo，今天给大家分享一下浏览器换肤的功能

需求：爱美之心，人皆有之，随着人们物质生活的提高，需求也不断提高，同样，作为开发者，我们当然要心系客户，那么今天的案例就是实现换肤功能的小项目。当然每个人思维不一样。好了废话不多说，上代码

仅供参考

HTML代码如下：

<body id="bd">
		<!--模拟浏览器换肤功能-->
		<nav class="nav">
			<!--这个是网页的导航部分 也就是展示点击换肤的菜单按钮-->
			<div class="navIn">
				<a id="bt" href="#">我要换肤</a>
			</div>
		</nav>
		<div id="shadow" class="shadow"></div>
		<div id="menu" class="menu">
			<img src="img/01.jpg" />
			<img src="img/02.jpg" />
			<img src="img/03.jpg" />
			<img src="img/04.jpg" />
			<img src="img/05.jpg" />
		</div>

总共三个盒子，

一个盒子装导航栏

一个用来显示皮肤

2. 比较简单就过了啊接下来是样式表.css 代码如下：

<style>
			* {
				margin: 0px;
				padding: 0px;
				list-style: none;
			}
			
			a {
				color: #666;
				text-decoration: none;
			}
			
			body {
				background: url(img/01.jpg);
				background-size: cover;
			}
			
			.nav {
				width: 100%;
				height: 40px;
				background: rgba(255, 255, 255, 0.4);
				border-bottom: 1px solid #ccc;
			}
			
			.navIn {
				width: 1000px;
				height: 40px;
				margin: 0 auto;
				line-height: 40px;
			}
			
			.shadow {
				width: 100%;
				height: 100%;
				background: transparent;
				position: fixed;
				left: 0;
				top: 0s;
				display: none;
			}
			
			.menu {
				width: 1000px;
				height: 250px;
				background: #fff;
				position: absolute;
				left: 50%;
				top: -260px;
				margin-left: -500px;
				text-align: center;
				box-shadow: 0 0 5px rgba(0 0 0 0.3);
				transition: top 0.8s;
			}
			
			.menu img {
				width: 130px;
				margin-top: 50px;
				cursor: pointer;
			}
		</style>

代码看似有点长，不用怕啊都是些常用的设置如：width height 在加了个绝对定位和相对定位，慢慢理解，不懂的可以问我或者百度查询，好吧，貌似打广告了，其实，度娘真的挺好用，实在不想用度娘的可以浏览CSDN 高手云集，没有解决不了的问题。

3.好了，又到了最核心的代码了，所谓结构表现该到行为了 JS相对一些新手比较难，所以说慢慢理解，懂原理就行。好了展示代码吧：

<script>
			/**
						浏览器肤功能实现，点击  我要换肤  页面会出现导航栏 里面包含要换的皮肤（图片），点击任意图片，
						网页皮肤将修改成该图片，点击空白处，导航栏自动隐藏 
						 */
			/*
			 1.将所有使用到的 用变量代替
			 */
			var bt = document.getElementById('bt'); //点击按钮
			var shaDow = document.getElementById("shadow"); //最大的盒子 也就是呈现皮肤效果的内容
			var meNn = document.getElementById('menu'); //用户可以使用的皮肤 导航栏里的皮肤
			var img = meNn.getElementsByTagName('img'); //导航栏里的皮肤
			var bd = document.getElementById('bd');
			/*
			2.当用户点击 点击换肤 时 触发事件    呈现出换肤导航栏
			 */
			bt.onclick = function() {
				//导航栏显示 并自动滚动下来
				shaDow.style.display = 'block';
				meNn.style.top = '0px';
			}
			/*
			       点击空白处绑定的事件
			 */
			shaDow.onclick = function() {
				//菜单隐藏 
				shaDow.style.display = 'none';
				meNn.style.top = '-260px';
			}
			/*
			 3.最后一步，点击那张图片 该图片将换成网页皮肤或展示的皮肤
			 有两种方式
			 */
			//第一种方式   不建议采用  ps：重复代码多
			//		   img[0].onclick= function (){
			//		   	/*
			//		   	 img[0]是通过索引去访问图片的
			//		   	 */
			//		    	bd.style.background='url(img/02.jpg)';
			//		    }
			//第二种方法 封装函数   减轻网页压力
			/*
			 核心代码 请勿乱修改
			 */
			function Obt(num) {
				img[num].onclick = function() {
					bd.style.background = 'url(img/0' + (num + 1) + '.jpg)';
				}
			}
			//调用函数
			Obt(0);
			Obt(1);
			Obt(2);
			Obt(3);
			Obt(4);
		</script>

JS 里面有两种方式实现，第一种也能完美实现需求，但是代码繁琐，不利于浏览器，首先将需要操作的DOM 定义到变量里面，方便使用，然后绑定事件函数最后封装函数

img [num] 是利用 img标签里面的图片索引访问，开始下标为0

bd.style.background = 'url(img/0' + (num + 1) + '.jpg)'; 是因为传递的参数与图片不符，必须拼接 。

4. 效果展示我就放几张图片的其他的比较麻烦想要体验效果的可以找我要源码也可以直接复制我分享的代码都可以的图片的话可以自己去随意找几张试试

今天就分享到这吧，别让了在开发项目是，记得多谢注释，良好的开发习惯从现在开始，从我做起

侯志杰

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
1
评论
浏览器换肤功能项目案例百度换肤

大家好我是攻城狮JiRo，今天给大家分享一下浏览器换肤的功能需求：爱美之心，人皆有之，随着人们物质生活的提高，需求也不断提高，同样，作为开发者，我们当然要心系客户，那么今天的案例就是实现换肤功能的小项目。当然每个人思维不一样。好了废话不多说，上代码仅供参考 HTML代码如下： &lt;body id="bd"&gt; &lt;!--模拟浏览器换...
复制链接

扫一扫