html+jquery换肤功能
文章描述：
在网站后台或者会员中心部分，我们可以添加页码的皮肤来提高用户的体验感，让用户换上自己喜欢的颜色，那么换肤功能该怎么做呢？
html
第一步：用HTML制作用户可以选择的换肤按钮，这里我们制作了7个按钮
<div class="container">
<div class="num">
<ul>
<li><a></a></li>
<li><a></a></li>
<li><a></a></li>
<li><a></a></li>
<li><a></a></li>
<li><a></a></li>
<li><a></a></li>
</ul>
</div>
</div>css
第二步：使用css来美化每个按钮，每个按钮都有不同的背景颜色
.num{ padding: 5px 10px; background: #fff; margin-top: 100px;}
.num li{color:#fff; display:inline-block; margin:0 4px 8px 4px; padding:0 10px; height:20px; border-radius:3px; line-height:20px;}
.num li:nth-child(7n){ background-color:#ffbb50;}
.num li:nth-child(7n+1){ background-color:#ff5e5c;}
.num li:nth-child(7n+2){ background-color:#a26ff9; }
.num li:nth-child(7n+3){ background-color:#1ac756; }
.num li:nth-child(7n+4){ background-color:#19B5FE;}
.num li:nth-child(7n+5){ background-color:#fb7da9;}
.num li:nth-child(7n+6){ background-color:#666; }js
第三步：使用jQuery来获取用户点击按钮背景颜色属性，然后把获得的属性添加给body标签
$(".num ul li").on('click',function(){
var i = $(this).index();
console.log(i);
var x = $(this).css('backgroundColor');
console.log(x);
$('body').css('background',x);
});也可以给body添加一个默认的背景颜色
$('body').css('background','rgb(255, 94, 92)');
发布时间：2021/08/12
发表评论