使用jquery给网页换肤，cookies缓存

2015-7-25 Jon js+jquery+ajax

使用jquery给网页换肤

昨天做项目的时候有个论坛需要给页面换肤和改变文章字体大小的功能，找了类型的论坛，扒下来后发现竟然有四个js都需要引入，想了想，还是自己写个吧，写好后发现，比想象中容易点，下面附上源码

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>使用jquery给网页换肤，cookies进行缓存</title>
    <style>
      *{padding:0;margin:0;}
      body{font-size: 14px;padding:50px 300px;font-family: '微软雅黑'}
      .style-out{position: relative;float:right;}
      .style-con{
        background: #ccc;
        border:1px solid #999;
        padding:2px 5px;
        display: inline-block;
        cursor: pointer;
      }
      .style-nr{
        position:absolute;
        top:30px;
        background: #fff;
        border:1px solid #999;
        width:156px;
        display: none;
        height:140px;
        margin-top:6px;
        line-height: 30px;
        padding:12px;
      }
      .style-nr.style-nr1{
        display: block;
      }
      .btn-color {
        display: inline-block;
        width: 14px;
        height: 14px;
        margin: 6px 5px -3px 0;
        background: url(http://static.tianyaui.com/global/bbs/web/static/images/bbs_ico_6840b40.png) no-repeat 1000px -3350px;
        cursor: pointer;
      }
      #btn_color_1.btn-color-sel {
        background-position: left -3400px;
      }
      #btn_color_1 {
        background-position: left -3350px;
      }
      #btn_color_2 {
        background-position: -19px -3350px;
      }
      #btn_color_2.btn-color-sel {
        background-position: -19px -3400px;
      }
      #btn_color_3 {
        background-position: -38px -3350px;
      }
      #btn_color_3.btn-color-sel {
        background-position: -38px -3400px;
      }
      #btn_color_4 {
        background-position: -57px -3350px;
      }
      #btn_color_4.btn-color-sel {
        background-position: -57px -3400px;
      }
      #btn_color_5 {
        background-position: -76px -3350px;
      }
      #btn_color_5.btn-color-sel {
        background-position: -76px -3400px;
      }
      .set-btn{
        background: #ddd;
        border:1px solid #aaa;
        padding:2px 3px;
        cursor: pointer;
      }
      .style-row01 .set-btn{margin-right:10px;}
    </style>
  </head>
  <body>
    <div class="style-out">
      <div class="style-con">阅读设置</div>
      <div class="style-nr">
        <p class="style-row01">
          <strong>字体：</strong><span class="set-btn font-size-add">大</span><span class="set-btn font-size-red">小</span><span class="set-btn font-family">宋</span>
        </p>
        <p>
          <strong>背景：</strong><span id="btn_color_1" class="btn-color btn-color-sel" _value="1"></span><span id="btn_color_2" class="btn-color" _value="2"></span><span id="btn_color_3" class="btn-color" _value="3"></span><span id="btn_color_4" class="btn-color" _value="4"></span><span id="btn_color_5" class="btn-color" _value="5"></span>
        </p>
        <p>
          <strong>还原：</strong><span class="set-btn btn-reset">还原为默认</span>
        </p>
      </div>
    </div>
    <div class="wenzhang">
      <h1>这是一篇文章，我是文章标题</h1>
      <h2>你可以点击阅读设置给网页换肤，关闭重新运行可看效果</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, voluptate obcaecati repellat laudantium. Modi neque dicta nulla. Ea, explicabo harum. Facilis expedita labore id cum minus? Dicta iusto nihil odio!</p>
    </div>
    <script src="https://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
    <script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js" type="text/javascript"></script>
    <script>
      $(function(){
      $('.style-con').click(function(){
          $('.style-nr').slideToggle(300)
        });
        $('.btn-color').click(function(){
          // $(this).addClass('btn-color-sel').siblings().removeClass('btn-color-sel');
          var num=$(this).index();
          var colors='#fff';
          switch (num) {
            case 1:
              colors='#fff';
              break;
            case 2:
              colors='#333';
              break;
            case 3:
              colors='green';
              break;
            case 4:
              colors='#ccc';
              break;
            case 5:
              colors='yellow';
              break;
            default:
             colors='#fff';
            ;
          }
          switchSkin(colors,num-1);
        });
        $(function(){
          var cookie_skin = $.cookie( "MyCssSkin");
          var cookie_select = $.cookie( "MyCssSselect");
          if (cookie_skin&&cookie_select) {
            switchSkin( cookie_skin,cookie_select );
          }
        });
        function switchSkin(skinName,num){
            $('body').css({'background':skinName});
            $('.btn-color').eq(num).addClass('btn-color-sel').siblings().removeClass('btn-color-sel');
            $.cookie( "MyCssSkin" ,  skinName , { path: '/', expires: 10 });
            $.cookie( "MyCssSselect" ,  num , { path: '/', expires: 10 });
        }
        $('.font-family').click(function(){
          if($(this).text()=='宋'){
            $(this).text('黑');
            $('.wenzhang').css({'fontFamily':'宋体'})
          }else{
            $(this).text('宋');
            $('.wenzhang').css({'fontFamily':'微软雅黑'})
          }
        });
        var i=14;
        $('.font-size-add').click(function(){
          i++;
          $('.wenzhang').css({'fontSize':i+'px'});
        });
        $('.font-size-red').click(function(){
          i--;
          $('.wenzhang').css({'fontSize':i+'px'});
        });
        $('.btn-reset').click(function(){
          $('.wenzhang').css({'fontFamily':'微软雅黑'});
          $('.font-family').text('宋');
          $('.btn-color').eq(0).addClass('btn-color-sel').siblings().removeClass('btn-color-sel');
          $('.wenzhang').css({'fontSize':'14px'});
          i=14;
          switchSkin('#fff',0);
        });
    });
    </script>
  </body>
  </html>

您可以修改框中代码后运行查看

标签: 换肤 cookies