Jquery换肤效果

最新推荐文章于 2021-05-09 15:06:06 发布

菊花枸杞茶

最新推荐文章于 2021-05-09 15:06:06 发布

阅读量649

点赞数 1

分类专栏： jquery 文章标签： Jquery

本文链接：https://blog.csdn.net/qq_34227291/article/details/84258886

版权

jquery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

Jquery换肤效果

简介：
自从Web2.0开始流行后，很多网站更加注重用户自定义，例如在网页上用户自定义新闻内容，可以任意拖动网页内容，也可以给网页选择一套自己喜欢的颜色等。

原理：
网页换肤的原理就是通过不同的样式表文件来实现不同的皮肤切换。
注：本文章是通过title属性来切换皮肤，没有使用任何插件，源代码在底部可复制、

步骤一：建立站点
在这里插入图片描述

步骤二：引入库

步骤三：HTML代码

步骤四：CSS样式

步骤五：JQ代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Jquery换肤效果</title>
	<!-- bootstrap css库 -->
	<link rel="stylesheet" href="./css/bootstrap.min.css">
	<!-- jq库 -->
	<script src="./js/jquery-3.2.1.js"></script>
	<!-- bootstrap js库 -->
	<script src="./js/bootstrap.min.js"></script>
	
	<style>
		*{padding: 0;margin: 0;}
		#container{position: relative;width: 950px;height: auto; margin: 0 auto;margin-top: 20px;overflow: hidden;}
		#skin{width: 100%;height: 30px;border: 1px solid red;}
		#skin ul{text-decoration: none;list-style: none;}
		#skin ul li{width: 15px;height: 15px;float: left;/*background-image: url(./images/theme.gif);*/text-align: center;color: white;overflow: hidden;display: block;cursor: pointer;margin-right: 5px;text-indent: -999px;}
		/*
		1：以下的 手动颜色皮肤+背景图片皮肤运行只能看到一种效果
		备注：如果想要使用图片皮肤则把手动颜色皮肤注释就可以了,使用手动颜色皮肤则把背景图片皮肤和 li 里面的图片路径注释即可。
		*/

		/*手动颜色皮肤*/
		#skin_0{background-color: #405FA1;}
		#skin_1{background-color: #C164E0;}
		#skin_2{background-color: #DD2E64;}
		#skin_3{background-color: #48C2D6;}
		#skin_4{background-color: #FFA50F;}
		#skin_5{background-color: #B5DB01;}
		#skin_6{background-color: #282923;}
		
		/*背景图片皮肤*/
		/*#skin_0.selected{background-position: 0px 15px !important;}
		#skin_1.selected{background-position: 15px 15px !important;}
		#skin_2.selected{background-position: 15px 15px !important;}
		#skin_3.selected{background-position: 55px 15px !important;}
		#skin_4.selected{background-position: 75px 15px !important;}
		#skin_5.selected{background-position: 95px 15px !important;}*/
		#nav{position: relative;margin: 0 auto;margin-top: 100px;border: 1px solid red;}
	</style>
	<script>
		$(function(){
			var $colors = $(".skin_uls li");	//获取li元素,保存为$colors
			console.log($colors);				//在控制台打印所有li元素
			$colors.click(function(){			//li元素单击事件
				//给当前对象添加类并且移除同辈元素的类
				$(this).addClass("selected").siblings().removeClass("selected");
				//获取当前对象的title元素，保存为title
				var title = $(this).attr("title");
				//给导航块更换背景颜色
				$("#container-skin").css("background",title);
			})
		})
	</script>
</head>
<body>
	<!-- 大盒子 -->
	<div id="container">
		<!-- 换肤按钮 -->
		<div id="skin">
			<ul class="skin_uls">
				<li id="skin_0" title="#405FA1">黑色</li> 
	            <li id="skin_1" title="#C356DB" >紫色</li> 
	            <li id="skin_2" title="#E31559">红色</li> 
	            <li id="skin_3" title="#08BECE">天蓝色</li> 
	            <li id="skin_4" title="#FBA80C">橙色</li> 
	            <li id="skin_5" title="#B2D414">淡绿色</li>
			</ul>
		</div>
		<!-- 导航 -->
		<div id="container-skin" class="container">
			<nav class="navbar-default">
				<!-- 头部 -->
				<div class="navbar-header"><a href="#" class="navbar-brand">颜色类别</a></div>
				<!-- 导航内容 -->
				<ul class="nav navbar-nav">
					<li><a href="#">蓝色</a></li>
					<li><a href="#">紫色</a></li>
					<li><a href="#">红色</a></li>
					<li><a href="#">天蓝色</a></li>
					<li><a href="#">橙色</a></li>
					<li><a href="#">淡绿色</a></li>
				</ul>
			</nav>
		</div>
	</div>
</body>
</html>