JQuery/PHP

Jquery 给网站添加更换皮肤配色一键换色功能

阿里云

网站上经常会有这样的功能,可以让用户点击对应的颜色来对网站进行配色调整。也就是我们所说的更换配色功能。下面介绍一下如何给网站添加更换皮肤配色功能。
Jquery 给网站添加更换皮肤配色一键换色功能

section

添加一个 jquery 缓存 Cookie 插件 jquery.cookie.js;将以下的代码放在网页的</head>标签上方;

也想出现在这里?联系我们
创客主机

section

在头部文件上面,添加一个默认的 CSS 文件;

  1. <link href="css/default.css" rel="stylesheet" type="text/css" id="cssfile" />

section

在头部文件添加以下的 JS 代码,用于配色的切换以及 COOKIE 的写入;

  1. <script type="text/javascript">
  2. //<![CDATA[
  3. $(function(){
  4. var $li =$("#skin a");
  5. $li.click(function(){
  6. switchSkin( this.id );
  7. });
  8. var cookie_skin = $.cookie( "MyCssSkin");
  9. if (cookie_skin) {
  10. switchSkin( cookie_skin );
  11. }
  12. });
  13. function switchSkin(skinName){
  14. $("#"+skinName).addClass("selected").siblings().removeClass("selected");
  15. //当前<li>元素选中
  16. //去掉其它同辈<li>元素的选中
  17. $("#cssfile").attr("href","css/"+ skinName +".css");
  18. //设置不同皮肤
  19. $.cookie( "MyCssSkin" , skinName , { path: '/', expires: 10 });
  20. }
  21. //]]>
  22. </script>

section

制作配色切换按钮;

  1. <div class="bt-yf"><a href="javascript:void(0);" id="yifu" class="bt-btn-yf" title="换肤">换肤</a></div>

添加按钮的 CSS 样式:

  1. .bt-btn-yf{display:block;width:38px;height:38px;background:#bababa url(../images/yf.png) no-repeat 50% 50%;position:fixed;z-index:9999;right:10px;bottom:20%;background-size:80% 80%;margin-top:5px;}
  2. .show-yf{display:none;position:fixed;right:10px;top:50%;width:50px;z-index:999;text-align:center;}
  3. .show-yf a{display:block;padding:10px 0;height:60px;line-height:40px;}
  4. .qey{background:#fff;color:#333}
  5. .sey{background:#333;color:#fff;}
  6.  
  7. @media (max-width:767px){
  8. .show-yf{right:10px;top:40%;width:30px;z-index:999;text-align:center;}
  9. .show-yf a{display:block;padding:10px 0;height:60px;line-height:40px;}
  10. }

section

在网页最底部添加以下的代码;

  1. <div class="show-yf" id="skin">
  2. <a href="javascript:;" id="white" class="qey" title="浅色">浅色</a>
  3. <a href="javascript:;" id="black" class="sey" title="深色">深色</a>
  4. </div>
  5. <script>
  6. $("#yifu").click(
  7. function(){
  8. $(".show-yf").slideToggle();
  9. });
  10. </script>

这样,一个网站的皮肤切换功能就制作好了。这里需要注意每个代码里的文件路径要修改正确。并且要添加以下几个文件:

jquery.cookie.js:Cookies 插件

default.css:默认的 CSS,内容可以为空

black.css:深色皮肤下网站各个元素的样式

white.css:浅色皮肤下网站各个元素的样式

Jquery 给网站添加更换皮肤配色一键换色功能

已有 25 人购买
查看演示升级 VIP立刻购买

收藏
(0)

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!