Jquery换肤效果

偏执的太偏执、 2021-09-17 01:24 450阅读 0赞

# Jquery换肤效果 #

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

**原理：**  
网页换肤的原理就是通过不同的样式表文件来实现不同的皮肤切换。  
注：本文章是通过title属性来切换皮肤，没有使用任何插件，源代码在底部可复制、  
  
  
**步骤一：建立站点**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjI3Mjkx_size_16_color_FFFFFF_t_70]  
  
  
**步骤二：引入库**  
![在这里插入图片描述][2018111919384460.png]  
  
  
**步骤三：HTML代码**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjI3Mjkx_size_16_color_FFFFFF_t_70 1]  
  
  
**步骤四：CSS样式**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjI3Mjkx_size_16_color_FFFFFF_t_70 2]  
  
  
**步骤五：JQ代码**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjI3Mjkx_size_16_color_FFFFFF_t_70 3]

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Jquery换肤效果</title>
    	
    	<link rel="stylesheet" href="./css/bootstrap.min.css">
    	
    	<script src="./js/jquery-3.2.1.js"></script>
    	
    	<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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjI3Mjkx_size_16_color_FFFFFF_t_70]: /images/20210724/0fd1c437d0e042c2873bd7247de3ffce.png
[2018111919384460.png]: /images/20210724/56e31a08d3dc454681a76dd85b963b00.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjI3Mjkx_size_16_color_FFFFFF_t_70 1]: /images/20210724/3461be50bbbd4c4c8235463d5c24347d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjI3Mjkx_size_16_color_FFFFFF_t_70 2]: /images/20210724/f057ca5ca4ca440eb92bd7a8def6b868.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjI3Mjkx_size_16_color_FFFFFF_t_70 3]: /images/20210724/d1a8fef407434e22b278a942f1566919.png