使用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

分享这篇文章

赞助鼓励：如果觉得内容对您有所帮助，您可以支付宝(左)或微信(右)：

声明：如无特殊注明，所有博客文章版权皆属于作者，转载使用时请注明出处。谢谢！

下一篇诸葛亮的人格障碍
上一篇金庸给人使命，古龙则给人喜好

发表评论：

知向前端

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

使用jquery给网页换肤

声明：如无特殊注明，所有博客文章版权皆属于作者，转载使用时请注明出处。谢谢！

搜索

日历

最新微语

最新评论

分类

随机文章

最新文章

热门文章

存档