JS文字變大變小，文本背景色，JS文字大中小

這次使用JQ寫了一個效果，包含了三個功能JS文字變大變小，JS文本背景色，JS文字大中小，對我就把這些集中到一塊去寫了。

注意事項：
1、三個效果可以共存
2、id=”cgl_text_box”上的自定義屬性data-size=”14″里面的數(shù)字是跟css的font-size的大小一樣，鬼知道能不能獲取css里面的數(shù)字，有的話千萬不要告訴我
3、文字大中小效果的文字大小寫在自定義屬性data-sizen里面寫就可以
4、各種var的東西可以隨便動，其他的盡量別動，鬼知道會發(fā)生什么（大神估計也不會看這爛代碼>.<）。
5、不要吐槽我的CSS，那是留給你的作業(yè)，哈哈哈
6、這個效果可以兼容到IE7及以上和各種主流瀏覽器（記住是主流）
7、沒看錯，這個效果使用了強大的JQ，所以使用的時候別忘了引用JQ，各個版本應(yīng)該沒啥問題（但愿吧）。

圖片效果如下，你也可以按最下方的運行：

<div id="cgl_text">
<div class="cgl_text_font">
<a href="javascript:;" class="cgl_text_fontb">大</a>
<a href="javascript:;" class="cgl_text_fonts">小</a>
</div>
<div class="cgl_dzx">
<a href="javascript:;" data-sizen="18">大</a>
<a href="javascript:;" data-sizen="16">中</a>
<a href="javascript:;" data-sizen="14">小</a>
</div>
<div class="cgl_text_color"></div>
</div>
<div id="cgl_text_box" data-size="14">
<p>CGLweb前端 cenggel。</p>
<p>網(wǎng)址：http://cenggel.com/</p>
<p>成立于：2017-11-22</p>
<p>站長：青格勒</p>
<p>主題：CGL-PM1.0（測試完成版本）</p>
<p>這次使用JQ寫了一個效果，包含了三個功能JS文字變大變小，文本背景色，JS文字大中小，對我就把這些集中到一塊去寫了（就不管你們需不需要，反正我是全寫了）；</p>
<p>注意事項：</p>
<p>1、三個效果可以共存，但是修改的時候盡量小心點，我對自己的代碼不是很自信</p>
<p>2、id="cgl_text_box"上的自定義屬性data-size="14"里面的數(shù)字是跟css的font-size的大小一樣，鬼知道能不能獲取css里面的數(shù)字，有的話千萬不要告訴我</p>
<p>3、文字大中小效果的文字大小寫在自定義屬性data-sizen里面寫就可以</p>
<p>4、各種var的東西可以隨便動，其他的盡量別動，鬼知道會發(fā)生什么（大神估計也不會看這爛代碼>.<）。</p>
<p>5、不要吐槽我的CSS，那是留給你的作業(yè)，哈哈哈</p>
<p>6、這個效果可以兼容到IE7及以上和各種主流瀏覽器（記住是主流）</p>
<p>7、沒看錯，這個效果使用了強大的JQ，所以使用的時候別忘了引用JQ，各個版本應(yīng)該沒啥問題（但愿吧）。</p>
</div>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {（www.gendan5.com）
(function () {
/**

• class和id可以隨便修改，各種var就是為了這個準備的
• cgl_text_color 背景色和文字顏色修改的生成的是em
• */
  var $cgl_text_fontb = $('#cgl_text .cgl_text_fontb');//文字變大-按鈕
  var $cgl_text_fonts = $('#cgl_text .cgl_text_fonts');//文字變小-按鈕
  var $cgl_text_color = $('#cgl_text .cgl_text_color');//背景字色-按鈕
  var $cgl_text_box = $('#cgl_text_box');//文字容器
  var $cgl_dzx = $('.cgl_dzx a');
  var cgl_fontsize = $('#cgl_text_box').data('size');//獲取文字的大小 PS:需要在cgl_text_box上面寫個自定義屬性data-size="14",預(yù)設(shè)的文字大小
  var cgl_fontsize_b = 20;//最大字體設(shè)置
  var cgl_fontsize_s = 12;//最小字體設(shè)置
  var cgl_color_arr = new Array(
  //背景顏色和文字顏色，前面是背景色，后面是文字顏色，16進制顏色例子#333，rgb顏色例子rgba(60,20,55)
  //PS：rgba對低版本IE瀏覽器兼容不好，所以最好使用126進制顏色
  ['rgb(60,20,55)','#fff'],
  ['#666','#eee'],
  ['#213','#fff'],
  ['#564526','#fff'],
  ['#666','#000'],
  ['#999','#000']
  );
  /**
• 往下的內(nèi)容盡量不要動，能調(diào)用的都調(diào)用了
• /
  for ( var i=0; i<cgl_color_arr.length; i++){//for出來相應(yīng)的em按鈕加到cgl_text_color里面
  $cgl_text_color.append(
  '<em style="' + 'background:'+ cgl_color_arr[i][0] + ';' + '"></em>　'
  );
  };
  $cgl_text_color.on('click','em',function () {//事件綁定之后找到對應(yīng)數(shù)組內(nèi)的背景色和文字顏色加上去
  var $cgl_text_color_in = $(this).index();
  $cgl_text_box.css({'background':cgl_color_arr[$cgl_text_color_in][0],'color':cgl_color_arr[$cgl_text_color_in][1]});
  });
  //文字放大縮小 開始
  function cgl_font_sizes(cgl_fontsizeno) {//控制文字的變化
  $cgl_text_box.css('font-size',cgl_fontsizeno+'px');
  $cgl_text_box.find('').css('font-size',cgl_fontsizeno+'px');
  };
  $cgl_text_fontb.click(function () {//文字大小變小
  if(cgl_fontsize < cgl_fontsize_b){
  cgl_fontsize++;
  cgl_font_sizes(cgl_fontsize);
  };
  });
  $cgl_text_fonts.click(function () {//文字大小變大
  if(cgl_fontsize > cgl_fontsize_s){
  cgl_fontsize--;
  cgl_font_sizes(cgl_fontsize);
  };
  });
  //文字放大縮小 結(jié)束
  $cgl_dzx.click(function () {
  var cgl_dzx_size = $(this).data('sizen');
  cgl_font_sizes(cgl_dzx_size);
  });
  }());
  });
  </script>
  <style type="text/css">
  /css是隨便寫的，不要當真/
  #cgl_text{ text-align:center;}
  #cgl_text_box,#cgl_text{ width:800px; font-size:14px; color:#333; margin:0 auto; padding:10px;}
  #cgl_text{ clear:both; height:30px; line-height:30px;}
  .cgl_text_font,.cgl_text_color,.cgl_dzx{ display:inline-block; margin-right:30px;}
  .cgl_text_font a,.cgl_dzx a{ display:inline-block; height:20px; width:20px; text-align:center; line-height:20px; border:1px solid #999999; font-size:14px; vertical-align:middle;}
  .cgl_text_color em{ display:inline-block; height:20px; width:20px; border:1px solid #999999; vertical-align:middle;}
  </style>