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

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

内容简介：上一次演示了怎么样通过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 - 通过键盘实现页面显示字体的格式切换》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对码农网的支持！

查看所有标签

猜你喜欢:

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

码农书籍

Test Driven Development

Kent Beck / Addison-Wesley Professional / 2002-11-18 / USD 49.99

Quite simply, test-driven development is meant to eliminate fear in application development. While some fear is healthy (often viewed as a conscience that tells programmers to "be careful!"), the auth......一起来看看《Test Driven Development》这本书的介绍吧!

码农工具