python web py入门（71）- jQuery - 通过键盘实现页面显示字体的格式切换

栏目: jQuery · 发布时间: 7年前

内容简介：上一次演示了怎么样通过jQuery来监听键盘事件，这一次只要把键盘响应的按键值与对应字体进行关联，就可以实现页面字体的切换。因此，先要定义键值与字体的映射关系，怎么样来做呢？最简单的方法，就是使用json对象来关联，如下：var triggers = {D: 'default',

上一次演示了怎么样通过jQuery来监听键盘事件，这一次只要把键盘响应的按键值与对应字体进行关联，就可以实现页面字体的切换。因此，先要定义键值与字体的映射关系，怎么样来做呢？最简单的方法，就是使用json对象来关联，如下：

var triggers = {

D: 'default',

N: 'narrow',

L: 'large'

};

在这里定义triggers对象，它的键是D,N,L，也就是响应按键D,N,L三个，当按D键时，就可以返回'default'字符串，其它两个也是一样。这样就可以构造出来不同的样式出来，从而达到可以修改页面字体的大小。

因而把上次的代码：

//键盘事件响应
         $(document).keyup(function(event) {
           var key = String.fromCharCode(event.which);
           console.log(key);
         });

修改为这样：

//键盘映射表
         var triggers = {
            D: 'default',
            N: 'narrow',
            L: 'large'
         };
         //键盘事件响应
         $(document).keyup(function(event) {
           var key = String.fromCharCode(event.which);
           console.log(key);
           if (key in triggers) {
             setBodyClass(triggers[key]);
           }
         });

通过这样修改之后，就可以运行这个页面，可以从键盘里按下D键，页面就回到默认字体，按L键，就会变成大字体。显示如下：

python web py入门（71）- jQuery - 通过键盘实现页面显示字体的格式切换

完整的HTML代码如下：

<html>
  <head>
    <meta charset="utf-8">
    <title>文章显示系统</title>
     <link rel="stylesheet" href="page/page.css" type="text/css" />
     <script type="text/JavaScript" src="jquery/jquery-3.3.1.js"></script>
     <script>
       $(document).ready(function(){
         //鼠标位置在切换窗口上显示不同的颜色
         $('#switcher').hover(
           function(){ $(this).addClass('hover');    },
           function(){ $(this).removeClass('hover'); }
         );

         // 隐藏按钮，缩小显示位置
         var toggleSwitcher = function(event) {
           if (!$(event.target).is('button')) {
             $('#switcher button').toggleClass('hidden');
           }
         };
         $('#switcher').on('click', toggleSwitcher);

         // 模拟一次点击，让它在收缩状态
         $('#switcher').click();
         //
         $('#switcher-default').addClass('selected');

         //切换格式显示的函数
         var setBodyClass = function(className) {
            $('body').removeClass().addClass(className);

            $('#switcher button').removeClass('selected');
            $('#switcher-' + className).addClass('selected');

            $('#switcher').off('click', toggleSwitcher);

            if (className == 'default') {
              $('#switcher').on('click', toggleSwitcher);
            }
         };
         //按钮的事件响应
         $('#switcher').click(function(event) {
           if ($(event.target).is('button')) {
             var bodyClass = event.target.id.split('-')[1];
             console.log(bodyClass);
             setBodyClass(bodyClass);
           }
         });

         //键盘映射表
         var triggers = {
            D: 'default',
            N: 'narrow',
            L: 'large'
         };
         //键盘事件响应
         $(document).keyup(function(event) {
           var key = String.fromCharCode(event.which);
           console.log(key);
           if (key in triggers) {
             setBodyClass(triggers[key]);
           }
         });         

       });
     </script>
  </head>
  <body>
    <div id="container">
      <div id="switcher" class="switcher">
        <h3>页面布局选择</h3>
        <button id="switcher-default">
          默认
        </button>
        <button id="switcher-narrow">
          一般显示
        </button>
        <button id="switcher-large">
          大号显示
        </button>
      </div>

      <div id="header">
       <h2>主题</h2>
       <h2 class="subtitle">副标题</h2>
       <div class="author">作者</div>
      </div>

      <div class="chapter" id="chapter-preface">
        <h3 class="chapter-title">前言</h3>
        <p>测试一下</p>
        <p>这里可以写一段</p>
        <p>时间</p>
        <p>时间</p>
      </div>
      <div class="chapter" id="chapter-1">
        <h3 class="chapter-title">章节标题</h3>
        <p>文章主要内容</p>
      </div>
    </div>
    <span></span>
  </body>
</html>

单片机编译器之链接器

https://edu.csdn.net/course/detail/8437

比特币源码入门教程

https://edu.csdn.net/course/detail/6998

深入浅出Matplotlib

https://edu.csdn.net/course/detail/6859

深入浅出Numpy

http://edu.csdn.net/course/detail/6149

Python游戏开发入门

http://edu.csdn.net/course/detail/5690

以上所述就是小编给大家介绍的《python web py入门（71）- jQuery - 通过键盘实现页面显示字体的格式切换》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对码农网的支持！

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

Compilers

Alfred V. Aho、Monica S. Lam、Ravi Sethi、Jeffrey D. Ullman / Addison Wesley / 2006-9-10 / USD 186.80

This book provides the foundation for understanding the theory and pracitce of compilers. Revised and updated, it reflects the current state of compilation. Every chapter has been completely revised ......一起来看看《Compilers》这本书的介绍吧!

码农工具