jQuery2-秘籍-四-

布客飞龙
82 阅读23分钟

jQuery2 秘籍（四）

原文：jQuery 2 Recipes

协议：CC BY-NC-SA 4.0

五、页面导航

在这一章中，你将学习如何制作不同类型的导航到目标网站的菜单。你将在本章中学习的食谱是

  • 以面包屑的形式表示链接

  • 带有悬停菜单项的菜单

  • 创建上下文菜单

  • 使用访问键创建导航菜单

  • 右键单击时创建上下文菜单

  • 带有各自菜单项的两个菜单

  • 带有各自菜单项和子菜单项的两个菜单

  • 制作手风琴菜单

  • 制作动态可视菜单

5.1 编写面包屑菜单

问题

您希望以面包屑的形式表示一个链接菜单。

解决办法

让我们用一个无序列表元素的形式来表示菜单书籍的几个菜单项**、Web 开发**、编程、 RDBMS 。HTML 文件如下所示:

Breadcrumb.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
    <script src="jquery-3.5.1.js" type="text/javascript"></script>
    <script src="breadcrumbjq.js" type="text/javascript"></script>
  </head>
  <body>
    <ul id="menu">
        <li><a href="http://example.com">Books</a>
               <ul>
                      <li><a href="http://example.com">Web Development</a></li>
                      <li><a href="http://example.com">Programming</a></li>
                      <li><a href="http://example.com">RDBMS</a></li>
              </ul>
          </li>
     </ul>
  </body>
</html>

为了给列表项提供面包屑的形状，您定义了两个样式规则，.liststyle和.ulistyle，以及一些样式属性，如下面的样式表文件style.css所示:

style.css

.liststyle {
    background-image:url(arrow.jpg);
    background-repeat:no-repeat;
    background-position:left;
    padding-left:30px;
    display: inline;
}

.uliststyle {
    list-style:none;
    margin:0;
    padding:0;
    display: inline;
}

将两个样式规则.uliststyle和.liststyle分别应用于无序列表及其元素的 jQuery 代码如下:

面包卷 jq.js

$(document).ready(function() {
  $('ul').addClass('uliststyle');
  $('ul li ul li').addClass('liststyle');
});

它是如何工作的

在 HTML 文件中，您可以看到这个无序列表被分配了 id menu，它由一个列表项书籍组成，而这个列表本身又是一个包含三个元素的无序列表: Web 开发、编程和 RDBMS 。此外，所有菜单项都指向一个假想的网站example.com，这是用户单击面包屑中的任何链接时将被发送到的目标网站。

在样式表文件中，.liststyle规则包含设置为值url(arrow.jpg)的background-image属性，以显示箭头图像(参见图 5-1 )。将background-repeat属性设置为no-repeat,使图像只出现一次。background-position属性被设置为left以使图像出现在它所应用的元素的左侧。将padding-left属性设置为30px以在左侧创建 30px 的距离，并将display属性设置为值inline以移除块元素中的任何空格，使它们出现在一行中(没有空格)。

样式规则uliststyle包含设置为值none的list-style属性，以从无序列表中移除传统的项目符号。margin 和 padding 属性被设置为0以删除列表项中默认创建的传统空白，display 属性被设置为inline以使 block 元素出现在同一行上。

在 jQuery 代码中，样式规则.ulistyle应用于无序列表元素和。liststyle应用于无序列表的列表项，该列表项嵌套在无序列表的第一个列表项中。

在执行 jQuery 代码时，您会得到如图 5-1 所示的输出。

img/192218_2_En_5_Fig1_HTML.jpg

图 5-1

面包屑形式的锚元素

5.2 向菜单项添加悬停效果

问题

您希望显示一个包含几个菜单项的菜单。您还希望在菜单及其项目上有悬停效果。

解决办法

制作一个 HTML 文件来表示菜单标题及其菜单项。您可以借助两个无序列表来实现，一个嵌套在另一个中。

Addinghover.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link rel="stylesheet" href="stylehover.css" type="text/css" media="screen" />
    <script src="jquery-3.5.1.js" type="text/javascript"></script>
    <script src="addinghoverjq.js" type="text/javascript"></script>
  </head>
  <body>

     <ul>
           <li><a href="http://example.com">Books</a>
                  <ul>
                          <li><a href="http://example.com">Web Development</a></li>
                           <li><a href="http://example.com">Programming</a></li>
                           <li><a href="http://example.com">RDBMS</a></li>
                    </ul>
          </li>
     </ul>
  </body>
</html>

在 HTML 文件中可以看到一个无序列表元素，列表项为 Books ，它本身是一个无序列表元素，由三个列表项来表示 Web 开发、编程和 RDBMS 的超链接。这些超链接指向一个名为 http://example.com 的假想网站，如果点击任何菜单项，用户都会被发送到该网站。

为了给无序列表元素一个菜单的外观，您需要对所有三个元素应用特定的样式:<u>, <li>,和<a>。您在样式表文件中编写它们的类型选择器，以便其中的属性可以自动应用于这三个元素。样式表文件可能如下所示:

style hover . CSS

ul {
  width: 200px;
}

ul li ul {
  list-style-type:none;
  margin: 5;
  width: 200px;
}

a {
  display:block;
  border-bottom: 1px solid #fff;
  text-decoration: none;
  background: #00f;
  color: #fff;
  padding: 0.5em;
}

li {

   display:inline;
}

.hover {
  background: #000;
}

将悬停事件应用于锚元素的 jQuery 代码如下:

Addinghoverjq.js

$(document).ready(function() {
  $('a').hover(
    function(event){
      $(this).addClass('hover');
    },
    function(){
      $(this).removeClass('hover');
    }
  );
});

它是如何工作的

类型选择器ul包含设置为200px的宽度属性，用于定义菜单标题书籍的宽度。类型选择器ul li ul将应用于菜单项。它包含设置为none值的list-style-type属性，以从无序列表元素中移除传统的项目符号。margin属性被设置为值5以使菜单项与菜单标题相比显得有点缩进。将width属性设置为200px来定义菜单项的宽度，以容纳所有内容。

类型选择器a包含设置为值block的display属性，以使锚元素显示为一个块，而不是单个元素。将border-bottom属性设置为1px solid #fff,使每一个锚元素下面出现一个 1px 厚的纯白边框(作为分隔符)。将text-decoration属性设置为none以移除通常出现在超链接下方的传统下划线。对于所有锚定元素，背景色设置为蓝色，前景色设置为白色。将padding属性设置为.5em(即默认字体大小的 50%)来定义锚文本与其边框之间的间距

类型选择器li被设置为值inline以移除列表项之间的任何空白。CSS 类.hover包含背景属性，当用户悬停在任何锚元素上时，将菜单项(锚元素)的背景颜色设置为黑色。

在 jQuery 代码中，您可以看到悬停事件被应用于锚元素。回想一下，悬停事件包含两个事件处理函数，一个在鼠标指针移动到任何锚元素上时调用，另一个在鼠标指针从锚元素移开时调用。在鼠标移动到锚元素上时调用的事件处理函数中，应用 CSS 类hover(在样式表文件中定义)，使锚元素的背景颜色变成黑色。在鼠标指针离开锚定元素时调用的事件处理函数中，从锚定元素中移除 CSS 类hover,使其看起来像最初一样。

在执行 jQuery 代码时，将出现如图 5-2 所示的菜单。

img/192218_2_En_5_Fig2_HTML.jpg

图 5-2

包含三个菜单项的“书籍”菜单

当你将鼠标悬停在任一菜单项上时，其背景颜色变为黑色，如图 5-3 所示。

img/192218_2_En_5_Fig3_HTML.jpg

图 5-3

当鼠标悬停在菜单项上时，该菜单项会高亮显示

5.3 创建上下文菜单

问题

您希望显示一个包含几个菜单项的菜单。当鼠标悬停在某个菜单项上时(鼠标指针在其上移动)，您希望显示与其相关的信息，并且还希望突出显示该菜单项。当单击菜单项时，用户被发送到相关的网站。

解决办法

创建一个 HTML 文件来表示菜单标题 Books 以及三个菜单项。您在两个无序列表的帮助下创建菜单及其三个菜单项，一个列表嵌套在另一个列表中。列表项包含代表菜单项的锚元素，并引用目标网站 http://example.com ，用户在选择任何菜单项时被发送到该目标网站(这是一个假想的网站)。此外，你要把三个菜单项的信息写在三个段落中。HTML 文件如下所示:

上下文相关. html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link rel="stylesheet" href="stylehover.css" type="text/css" media="screen" />
    <script src="jquery-3.5.1.js" type="text/javascript"></script>
    <script src="contextualjq.js" type="text/javascript"></script>
  </head>
  <body>
     <table>
          <td>
               <ul>
                         <li><a href="http://example.com">Books</a>
                         <ul>
                                <li><a href="http://example.com" id="webd">Web Development</a></li>
                                <li><a href="http://example.com" id="pgmng">Programming</a></li>
                                <li><a href="http://example.com" id="datab">RDBMS</a></li>
                         </ul>

                    </li>
                  </ul>
          </td>
          <td valign="top">
               <p class="web" >The wide range of books that includes how Web development can be done with ASP.NET, PHP, JSP etc.</p>
               <p class="prog" >The wide range of books that includes developing Programming skills in C, C++, Java etc.</p>
               <p class="rdbms" >The wide range of books that includes how Data Base Management is done via Oracle, MySQL, SQL Server etc.</p>
          </td>
     </table>
</body>

要使菜单显示在左侧，内容显示在右侧，您需要制作一个表格，将菜单放在表格的第一列，将包含相关菜单项信息的段落放在表格的第二列。

为了给无序列表元素一个菜单的外观，您需要对所有三个元素应用特定的样式:<u>, <li>和<a>。您在样式表文件中编写它们的类型选择器，以便其中的属性可以自动应用于这三个元素。样式表文件如下所示:

style hover . CSS

ul {
     width: 200px;
}

ul li ul {
     list-style-type:none;
     margin: 5;
     width: 200px;
}

a {

     display:block;
     border-bottom: 1px solid #fff;
     text-decoration: none;
     background: #00f;
     color: #fff;
     padding: 0.5em;
}

li {
     display:inline;
}

.hover {
     background: #000;
}

显示悬停菜单项信息的 jQuery 代码如下:

语境 jq.js

$(document).ready(function() {
     $('.web').hide();
       $('.prog').hide();
       $('.rdbms').hide();

     $('#webd').hover(function(event){
          $('.web').show();
              $('.prog').hide();
              $('.rdbms').hide();
              $('#webd').addClass('hover');
     }, function(){
             $('#webd').removeClass('hover');
       });

       $('#pgmng').hover(function(event){
              $('.web').hide();
              $('.prog').show();
              $('.rdbms').hide();
              $('#pgmng').addClass('hover');
     }, function(){

          $('#pgmng').removeClass('hover');
       });

       $('#datab').hover(function(event){
              $('.web').hide();
              $('.prog').hide();
              $('.rdbms').show();
              $('#datab').addClass('hover');
     }, function(){
          $('#datab').removeClass('hover');
       });
});

它是如何工作的

在样式表文件中，类型选择器ul包含设置为200px的width属性，以定义菜单标题书籍的宽度。类型选择器ul li ul应用于菜单项。它包含设置为none的list-style-type属性，以从无序列表元素中移除传统的项目符号。margin属性被设置为5以使菜单项与菜单标题相比显得有点缩进。将width属性设置为200px来定义菜单项的宽度，以容纳所有内容。类型选择器a包含设置为block的显示属性，以使锚元素显示为一个块，而不是单个元素。将border-bottom属性设置为1px solid #fff以使 1px 的纯白边框出现在每个锚点元素的下方(作为分隔符)。将text-decoration属性设置为none以移除通常出现在超链接下方的传统下划线。所有锚定元素的背景色设置为蓝色，前景色设置为白色。将padding属性设置为.5em(即默认字体大小的 50%)来定义锚文本与其边框之间的间距。

类型选择器li被设置为inline以移除列表项之间的任何空白。

CSS 类.hover包含 background 属性，当用户点击菜单项(锚元素)时，将它的背景颜色设置为黑色。

jQuery 代码的含义

最初，您隐藏存储在(相应菜单项的)所有三个段落中的信息。也就是说，您隐藏了存储在类别web、prog和rdbms的三个段落中的信息，因为只有当相关菜单项被悬停时才会显示它们。

然后将一个悬停事件附加到第一个菜单项 Web Development (即 id 为webd的锚元素)。在悬停事件的第一个事件处理函数(当该菜单项被悬停时执行)中，您将类web的段落(包含关于 Web 开发的信息)设置为可视模式，向用户显示与 Web 开发书籍相关的信息。您隐藏了其余的段落元素。也就是说，类prog和rdbms的段落元素是隐藏的。此外，将样式规则.hover(在样式表中定义)中定义的属性应用于悬停的菜单项以高亮显示它，并删除悬停事件的第二个事件处理函数中的hover样式规则，当鼠标指针离开菜单项时执行该函数。

将一个悬停事件附加到第二个菜单项 Programming (即 id 为pgmng的锚元素)。在悬停事件的第一个事件处理函数(当该菜单项被悬停时执行)中，您将类prog的段落(包含关于编程主题的信息)设置为可视模式，向用户显示与编程书籍相关的信息。您隐藏了其余的段落元素。也就是说，类web和rdbms的段落元素是隐藏的。此外，将样式规则.hover(在样式表中定义)中定义的属性应用于悬停的菜单项以高亮显示它，并删除悬停事件的第二个事件处理函数中的hover样式规则，当鼠标指针离开菜单项时执行该函数。

最后，将一个悬停事件附加到第三个菜单项 RDBMS (即 id datab的锚元素)。在 hover 事件的第一个事件处理函数(当这个菜单项被悬停时执行)中，您将类rdbms的段落(包含关于 RDBMS 主题的信息)设置为可视模式，向用户显示与 RDBMS 上的书籍相关的信息。您隐藏了其余的段落元素。也就是说，类web和prog的段落元素是隐藏的。您还可以将样式规则.hover(在样式表中定义)中定义的属性应用于悬停的菜单项，以高亮显示它并移除。hover鼠标指针离开菜单项时执行的悬停事件的第二个事件处理函数中的样式规则。

在执行上面的 jQuery 代码时，您将得到一个菜单以及其中的三个菜单项。当您将鼠标悬停在任何菜单项上时，该菜单项将被高亮显示，并显示与之相关的信息，如图 5-4 所示。

img/192218_2_En_5_Fig4_HTML.jpg

图 5-4

该菜单项在悬停时保持高亮显示，并显示相关信息

5.4 使用访问键创建导航菜单

问题

您希望显示一个包含几个菜单项的菜单。您希望显示菜单项的访问键。访问键代表菜单项的快捷键。此外，您希望当任何菜单项被悬停时，显示与之相关的信息。在两种情况下都必须显示信息，当菜单项被悬停时以及当任何菜单项的访问键被按下时。当用户点击一个菜单项时，它们应该被发送到相关的网站。

解决办法

创建一个 HTML 文件来表示菜单标题 Books 以及三个菜单项。您可以在一个无序列表的帮助下创建菜单及其三个菜单项。列表项包含表示菜单项的锚元素。另外，你要把三个菜单项的信息写在三段中。为了使菜单项的字符(您希望表示为访问键)显示为下划线，您将它嵌套在类hot的 span 元素中。HTML 文件可能如下所示:

Navigationmenu.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link rel="stylesheet" href="stylehover.css" type="text/css" media="screen" />
    <script src="jquery-3.5.1.js" type="text/javascript"></script>
    <script src="navigationjq.js" type="text/javascript"></script>
  </head>
  <body>
     <table>
          <td>
               <ul>
                     <li><a href="http://example.com">Books</a>
                          <ul>
                                 <li><a href="http://example.com" id="webd"><span class="hot">W</span>eb
                                   Development</a></li>
                                <li><a href="http://example.com" id="pgmng"><span class="hot">P</span>
                                    rogramming</a></li>
                                <li><a href="http://example.com" id="datab" ><span class="hot">R</span>DBMS</a></li>
                       </ul>
                 </li>
             </ul>
          </td>
          <td valign=top>
               <p class='web' >The wide range of books that includes how Web development can be done with ASP.NET, PHP, JSP etc.</p>
               <p class='prog' >The wide range of books that includes developing Programming skills in C, C++, Java etc.</p>
               <p class='rdbms' >The wide range of books that includes how Data Base Managemenet is done via Oracle, MySQL, Sql Server etc.</p>
          </td>
     </table>
</body>
</html>

为了给无序列表元素一个菜单的外观，您需要对所有三个元素应用特定的样式:<u>, <li>和<a>.您在样式表文件中编写它们的类型选择器，以便其中的属性可以自动应用到这三个元素。样式表文件可能如下所示:

style hover . CSS

ul {
       width: 200px;
}

ul li ul {
       list-style-type:none;
       margin: 5;
       width: 200px;
}

a {
     display:block;
       border-bottom: 1px solid #fff;
       text-decoration: none;
     background: #00f;
       color: #fff;
     padding: 0.5em;
}

li {
     display:inline;
}

.hover {
       background: #000;
}

.hot{
     text-decoration:underline;
}

下面的 jQuery 代码显示了按下访问键或悬停时菜单项的信息。此外，悬停的菜单项通过应用某些样式规则来突出显示。

导航 jq.js

$(document).ready(function() {
     $('.web').hide();
     $('.prog').hide();
     $('.rdbms').hide();

     $('body').keypress(function(event){
     if(String.fromCharCode(event.keyCode)=="w" || String.fromCharCode(event.keyCode)=="W")
     {
          $('#webd').hover();
     }
     if(String.fromCharCode(event.keyCode)=="p" || String.fromCharCode(event.keyCode)=="P")
     {
              $('#pgmng').hover();
     }
     if(String.fromCharCode(event.keyCode)=="r" || String.fromCharCode(event.keyCode)=="R")
     {
              $('#datab').hover();
     }
});

     $('#webd').hover(function(event){
          $('.web').show();
              $('.prog').hide();
              $('.rdbms').hide();
             $('#webd').addClass('hover');
     }, function(){
          $('#webd').removeClass('hover');
     });

       $('#pgmng').hover(function(event){

          $('.web').hide();
              $('.prog').show();
              $('.rdbms').hide();
              $('#pgmng').addClass('hover');
          }, function(){
               $('#pgmng').removeClass('hover');
     });

     $('#datab').hover(function(event){
          $('.web').hide();
              $('.prog').hide();
              $('.rdbms').show();
              $('#datab').addClass('hover');
          }, function(){
               $('#datab').removeClass('hover');
     });
});

它是如何工作的

在 HTML 文件中，注意锚元素的第一个字符被突出显示，并作为访问键。因此，锚元素 Web Development 的访问键被设置为字符 W，这样只需按下字符 W(或 W)就可以直接访问该菜单项。为了让用户知道 w 是访问键，需要给它加下划线。为了给菜单项 Web Development 的 W 加下划线，您将它嵌套在 span 元素中，并将类名hot分配给 span 元素，以便在样式表文件中识别它。类似地，您希望表示为访问键的所有字符都嵌套在类hot的 span 元素中。

此外，要使菜单显示在左侧，内容显示在右侧，可以制作一个表格，将菜单放在表格的第一列，将包含相关菜单项信息的段落放在表格的第二列。

在样式表文件中，类型选择器ul包含设置为200px的width属性，以定义菜单标题书籍的宽度。类型选择器ul li ul应用于菜单项。它包含设置为值none的list-style-type属性，以从无序列表元素中移除传统的项目符号。margin属性被设置为5以使菜单项与菜单标题相比显得有点缩进。将width属性设置为200px来定义菜单项的宽度，以容纳所有内容。

类型选择器a包含设置为值block的显示属性，以使锚元素显示为一个块，而不是单个元素。将border-bottom属性设置为值1px solid #fff，使一个纯白的 1px 边框出现在每个锚元素的下面(作为分隔符)。将text-decoration属性设置为none，以移除通常出现在超链接下方的传统下划线。所有锚定元素的背景色设置为蓝色，前景色设置为白色。将padding属性设置为.5em(即默认字体大小的 50%)来定义锚文本与其边框之间的间距。

类型选择器li被设置为inline以移除列表项之间的任何空白。

CSS 类.hover包含背景属性，当用户点击菜单项(锚元素)时，将它的背景颜色设置为黑色。

CSS 类.hot包含设置为underline的text-decorate属性，以使每个菜单项的所有访问字符(嵌套在类hot的 span 元素中)显示为下划线。

在 jQuery 代码中，最初所有三个段落元素都是隐藏的，因为您希望仅在按下任何访问键或悬停在任何菜单项上时才显示相关信息。您还可以在 HTML 文件的主体上附加一个 keypress 事件，以检测是否按下了任何键。如果发生任何按键事件，您可以使用条件语句来检查按下的键是否是下列字符中的任何一个:W、W、P、P、r 或 r。如果按下了上述任何一个字符，您将调用相应锚元素上的悬停事件。因此，如果按下字符 W 或 W，就会调用锚元素Web Development(id 为webd的锚元素)上的悬停事件来显示相关信息。您还可以将悬停事件附加到所有三个菜单项。您知道悬停事件包括两个事件处理函数。在悬停事件的第一个事件处理函数(当该菜单项被悬停时执行)中，您将包含相关信息的段落设置为visible模式，显示所需的信息。您隐藏了其余的段落元素。此外，将样式规则.hover(在样式表中定义)中定义的属性应用于悬停的菜单项以高亮显示它，并删除悬停事件的第二个事件处理函数中的hover样式规则，当鼠标指针离开菜单项时执行该函数。

在执行时，三个菜单项中的每一个都会显示出它们各自的访问键(以下划线突出显示)，如图 5-5 所示。当按下访问键或悬停在菜单项上时，将显示与之相关的信息，如图 5-4 所示。

img/192218_2_En_5_Fig5_HTML.jpg

图 5-5

访问键显示为下划线的菜单项

5.5 右键单击时创建上下文菜单

问题

你想显示一段文字，当你右击它时，你想在屏幕上出现一个上下文菜单。此外，您希望上下文菜单的菜单项具有悬停效果(即，当鼠标指针移动到菜单项上时，菜单项会高亮显示)。按下 Esc 键时，您希望上下文菜单消失。

解决办法

制作一个 HTML 文件，包含一个段落元素和一个无序的菜单列表。无序列表的列表项表示菜单标题和菜单项。菜单项以嵌套在列表项中的锚元素的形式编写。锚元素指向一个名为 http://example.com 的假想网站，如果点击任何菜单项，用户都会被导航到这个网站。HTML 文件可能如下所示:

Contextrightclick.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link rel="stylesheet" href="stylehover.css" type="text/css" media="screen" />
    <script src="jquery-3.5.1.js" type="text/javascript"></script>
    <script src="contextrightjq.js" type="text/javascript"></script>
  </head>
  <body oncontextmenu="return false">
     <p class="info">
          Books are the world of information. As said the books are the best friends. A wise man always has a library of several books</p>
     <ul id="contextmenu">
          <li><a href="http://example.com">Books</a>
               <ul>

                    <li><a href="http://example.com">Web Development</a></li>
            <li><a href="http://example.com">Programming</a></li>
            <li><a href="http://example.com">RDBMS</a></li>
               </ul>
          </li>
     </ul>
  </body>
</html>

您需要在样式表中定义一些样式规则，使无序列表具有菜单的形状，并且在鼠标指针悬停在菜单项上时突出显示菜单项。样式表中的样式规则可能如下所示:

style hover . CSS

ul {
       width: 200px;
}

ul li ul {
       list-style-type:none;
       margin: 5;
       width: 200px;
}

a {
     display:block;
       border-bottom: 1px solid #fff;
       text-decoration: none;
     background: #00f;
       color: #fff;
     padding: 0.5em;
}

li {
     display:inline;
}

.hover {

       background: #000;
}

最初隐藏菜单并在用户在段落元素上单击鼠标右键时显示菜单的 jQuery 代码如下所示。当按下 Esc 键时，jQuery 代码还会使上下文菜单消失。

context tjq . js的缩写形式

$(document).ready(function() {
     $('#contextmenu').hide();
     $('.info').mousedown(function(event){
          if(event.button==2){
               $('#contextmenu').show();
      $('#contextmenu').css({'position': 'absolute', 'left':event.screenX,
                    'top':event.screenY-70});
          }
     });
       $('a').hover(function(event){
          $(this).addClass('hover');
          },function(){
               $(this).removeClass('hover');
     });
     $('body').keypress(function(event){
          if(event.keyCode==27)
          {
            $('#contextmenu').hide();
          }
       });
});

它是如何工作的

显示上下文菜单时的常见问题是，当您右键单击段落元素以显示上下文菜单时，浏览器的上下文菜单也会与您的上下文菜单一起作为默认菜单出现。为了禁用默认的浏览器上下文菜单，在 body 元素中使用属性oncontextmenu="return false"。paragraph 元素被赋予一个类名info，以便在选择器的帮助下在 jQuery 中访问它。用于显示上下文菜单的无序列表被分配了 id contextmenu。您可以看到无序列表的第一个列表项表示文本 Books (它将作为菜单标题)。这个列表项本身将包含一个无序列表，它将代表菜单项。

在样式表文件中，类型选择器ul包含设置为200px的width属性，以定义菜单标题书籍的宽度。类型选择器ul li ul应用于菜单项。它包含设置为none的list-style-type属性，以从无序列表元素中移除传统的项目符号。margin属性被设置为5以使菜单项与菜单标题相比显得有点缩进。将width属性设置为200px来定义菜单项的宽度，以容纳所有内容。

类型选择器a包含设置为block的显示属性，以使锚元素显示为一个块，而不是一个单独的元素。将border-bottom属性设置为1px solid #fff以使 1px 的纯白边框出现在每个锚点元素的下方(作为分隔符)。将text-decoration属性设置为none，以移除通常出现在超链接下方的传统下划线。所有锚定元素的背景色设置为蓝色，前景色设置为白色。将padding属性设置为.5em(即默认字体大小的 50%)来定义锚文本与其边框之间的间距。

类型选择器li被设置为inline以移除列表项之间的任何空白。

CSS 类.hover包含背景属性，当用户点击菜单项(锚元素)时，将它的背景颜色设置为黑色。

在 jQuery 代码中，首先隐藏由 id contextmenu的无序列表表示的菜单。

然后检查鼠标按钮是否按在了类info的段落元素上。回想一下，您已经将类名info分配给了 HTML 文件中的段落元素。

如果已经按下，检查按下的鼠标按钮是否是鼠标右键。event对象的button属性包含按下鼠标左键时的值1和按下鼠标右键时的值2。

如果是鼠标右键，就可以在屏幕上看到由 id contextmenu的无序列表元素表示的菜单。

使用css()方法，让上下文菜单出现在由代表鼠标按钮被按下的位置的event对象的screenX和screenY属性指定的位置。您从存储在screenY属性中的坐标值中减去 70，使上下文菜单看起来更靠近段落(也就是说，您减少了菜单位置和段落之间的距离)。

此外，将hover()事件附加到锚元素(菜单和菜单项)。当鼠标指针移动到任何菜单项上时，将在样式表文件中定义的样式规则.hover中定义的样式属性应用于锚元素(使菜单项的背景颜色变成黑色)。样式规则.hover中的样式属性将从锚元素中移除，使其保持鼠标指针离开菜单项时的初始状态。

最后，将一个 keypress 事件附加到 body 元素，以检测是否按下了任何键。如果按下任何一个键，就检查是不是 Esc 键(Esc 键的键码是 27)。如果按下 Esc 键，将隐藏上下文菜单。

在段落文本上单击鼠标右键，屏幕上将出现上下文菜单。菜单中的菜单项会有悬停效果，如图 5-6 所示。

img/192218_2_En_5_Fig6_HTML.jpg

图 5-6

右键单击段落文本时会出现上下文菜单

5.6 创建两个带有独立菜单项的菜单

问题

您希望显示两个菜单，每个菜单都有各自的菜单项。您还希望在菜单及其项目上有悬停效果。

解决办法

创建一个 HTML 文件来表示两个菜单标题及其菜单项。您可以借助无序列表来做到这一点，一个列表嵌套在另一个列表中。

创建.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link rel="stylesheet" href="styletwomenu.css" type="text/css" media="screen" />
    <script src="jquery-3.5.1.js" type="text/javascript"></script>
    <script src="twomenujq.js" type="text/javascript"></script>
  </head>
  <body>
     <ul id="dropdownmenu">
        <li class="mainmenu">
          <a href="example.com">Books</a>
           <ul>
                 <li><a href="example.com">Web Development</a></li>
                 <li><a href="example.com">Programming</a></li>
                 <li><a href="example.com">RDBMS</a></li>
           </ul>
        </li>
         <li class="mainmenu">
           <a href="example.com">Movies</a>
              <ul>
                 <li><a href="example.com">Latest Movie Trailers</a></li>
                 <li><a href="example.com">Movie Reviews</a></li>
                 <li><a href="example.com">Celebrity Interviews</a></li>
               </ul>
          </li>
    </ul>
</body>
</html>

您可以在这段代码中看到一个 id 为dropdownmenu的无序列表，其中有两个列表项被分配了类名mainmenu。这两个列表项代表菜单书籍和电影。这两个列表项依次由无序列表组成，每个列表包含三个元素。 Books 菜单有三个列表项: Web 开发、编程和 RDBMS 。类似地，列表项电影由三个元素的无序列表组成:最新电影预告片、电影评论和名人访谈。

要将样式应用于无序列表，使它们具有两个菜单和菜单项的外观，请参见下面的样式表文件:

style menu . CSS

.mainmenu {float:left; width:220px; list-style-type:none; margin-right:5px;}
li.mainmenu ul {margin: 0;  }
a  {width: 200px;display:block; text-decoration: none; background: #00f;  color: #fff;padding: 0.5em;   border-bottom: 1px solid #fff; }
ul#dropdownmenu li a:hover {  background: #000;}
ul{ margin: 0; list-style: none; }

当鼠标指针移动到相应的菜单标题上时，显示两个菜单项中的一个菜单项的 jQuery 代码如下:

你的菜单 q.js

$(document).ready(function(){
  $('li.mainmenu').hover(
    function() {
      $('ul', this).show();
    },
    function() {
      $('ul', this).hide();
    }
  );
});

它是如何工作的

在样式表文件中，类选择器.mainmenu包含自动应用于两个菜单标题 Books 和 Movies 的属性。它包含设置为left的float属性，以使第一个菜单标题在浏览器窗口中向左浮动(为第二个菜单标题在其右侧显示留出空间)。将width属性设置为220px，使菜单标题的宽度为 220 像素。margin–right属性被设置为5px以在两个菜单标题之间创建 5px 的间距。

类型选择器li.mainmenu ul包含自动应用于无序列表的样式属性，该列表嵌套在类.mainmenu的列表项中(即，作为带有文本书籍和电影的列表项的菜单项的无序列表)。它包含的属性是一个设置为 0 值的margin属性，用于制作无序列表的列表项(菜单项如 Web 开发、编程等)。在这两个菜单标题中，书籍和书籍一个接一个出现(左侧没有任何层次间隙)。

类型选择器a包含应用于所有锚元素的属性(即，应用于菜单以及所有菜单项)。将width属性设置为200px来指定每个菜单项的宽度。将display属性设置为block以使锚元素作为一个独立的块，text-decoration属性设置为none以从超链接中移除传统的下划线，background属性将菜单标题和菜单项的背景色设置为蓝色，color属性将菜单(菜单标题和菜单项)上的文本的前景色设置为白色。将padding属性设置为.5em以在菜单文本及其边框之间创建默认字体大小的 50%的间距。将border-bottom属性设置为1px solid #fff以在每个锚元素下创建一条 1px 的白色实线，作为菜单项之间的分隔符。

类型选择器ul#dropdownmenu li a:hover包含样式属性，当鼠标悬停在菜单标题和菜单项上时，该属性将自动应用于它们。它包含 background 属性，当鼠标指针移动到菜单标题和菜单项上时，该属性将它们的背景色更改为黑色。

您可以在 jQuery 代码中看到，当鼠标指针移动到类mainmenu的列表项上时(即，在任何菜单标题上)，将显示嵌套在该列表项中的无序列表(包含菜单项)。将鼠标指针从菜单标题上移开会使其菜单项不可见，因为该列表项的无序列表被设置为隐藏模式。

最初会出现两个菜单标题，如图 5-7 所示。

img/192218_2_En_5_Fig7_HTML.jpg

图 5-7

两个菜单标题，书籍和电影

将鼠标指针移动到菜单标题 Books 上，其菜单项(嵌套在带有文本 Books 的列表项内的无序列表)将显示如图 5-8 所示。

img/192218_2_En_5_Fig8_HTML.jpg

图 5-8

“书籍”菜单的菜单项以悬停效果显示

将鼠标指针移动到菜单标题电影上，其菜单项将被显示，菜单标题书籍的菜单项将不可见，如图 5-9 所示。

img/192218_2_En_5_Fig9_HTML.jpg

图 5-9

具有悬停效果的电影菜单的菜单项

5.7 创建两个带有子菜单项的菜单

问题

您希望显示两个菜单，每个菜单都有菜单项，并将子菜单项附加到几个菜单项。您还希望在菜单、菜单项和子菜单项上有悬停效果。

解决办法

创建一个 HTML 文件来表示两个菜单标题及其菜单项。您还将定义子菜单项。您可以借助无序列表来做到这一点，一个列表嵌套在另一个列表中。HTML 文件可能如下所示:

Twomenuwithsub.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link rel="stylesheet" href="styletwomenusub.css" type="text/css" media="screen" />
    <script src="jquery-3.5.1.js" type="text/javascript"></script>
    <script src="twomenuwithsubjq.js" type="text/javascript"></script>
  </head>
<body>

     <ul class="dropdown">
          <li><a href="http://example.com">Books</a>
               <ul>
                    <li><a href="http://example.com">Programming</a></li>
                    <li><a href="http://example.com">Web Development</a>
                         <ul>
                              <li><a href="http://example.com">.Net</a></li>
                              <li><a href="http://example.com">JSP</a></li>
                         </ul>
                    </li>
                    <li><a href="http://example.com">RDBMS</a></li>
                    <li><a href="http://example.com">Web Services</a></li>
                    <li><a href="http://example.com">Open Source</a></li>
               </ul>
          </li>
          <li><a href="http://example.com">Movies</a>
               <ul>
                    <li><a href="http://example.com">Movie Reviews</a></li>
                    <li><a href="http://example.com">Celebrity Interviews</a></li>
                    <li><a href="http://example.com">Latest Hollywood Movies</a>
                         <ul>
                              <li><a href="http://example.com">Arnold Schwarzenegger</a></li>
                              <li><a href="http://example.com">Sylvester Stallone</a></li>
                              <li><a href="http://example.com">Bruce Willis</a></li>
                         </ul>
                    </li>
                    <li><a href="http://example.com">Action Movies</a>
                         <ul>
                              <li><a href="http://example.com">Casino Royale</a></li>
                              <li><a href="http://example.com">Rambo III</a></li>
                         </ul>
                    </li>
                    <li><a href="http://example.com">Comedy Movies</a></li>
               </ul>
          </li>
     </ul>
  </body>
</html>

要分配给无序列表以使其以菜单标题、菜单项和子菜单项的形式出现的样式属性如下:

styletwmenusub . CSS

a{ text-decoration: none; color:#000;}
ul{margin:0; list-style: none; }
ul.dropdown li {float: left;  background: cyan; }
ul.dropdown a:hover {background: #0f0; color: #00f; }
ul.dropdown li a {display: block; padding: 4px; border-right: 1px solid #000; }
ul.dropdown ul {width:150px; visibility: hidden; position: absolute;  }
ul.dropdown ul li {background: yellow; border-bottom: 1px solid #000; width:100%; }
ul.dropdown ul li a { border-right: none; width:100%; }
ul.dropdown ul ul {left:100%; width:100%;top: 0; }
.hover {position: relative; }

用于使菜单项和子菜单出现在屏幕上的 jQuery 代码如下:

Twomenuwithsubjq.js

$(document).ready(function(){
     $("ul.dropdown li").hover(function(){
       $(this).addClass("hover");
               $('ul:first',this).css('visibility', 'visible');
          }, function(){
                $(this).removeClass("hover");
               $('ul:first',this).css('visibility', 'hidden');
     });
      $("ul.dropdown li ul li:has(ul)").find("a:first").append("  >");
});

它是如何工作的

在 HTML 文件中，创建了一个无序列表，并为其分配了类名dropdown。它包含两个列表项，文本指定为书籍和电影。这两个列表项依次包含被赋予类名submenu的无序列表项。书籍列表项的无序列表包含五个列表项:编程、 Web 开发、RDBMS、Web 服务、和开源。在这些列表项中， Web 开发包含一个无序列表来表示名为的子菜单项。Net 和 JSP 。

类似地，包含在电影列表项中的无序列表包含四个列表项:电影评论、名人访谈、最新好莱坞电影和动作片。在这些列表项中，最新好莱坞电影包含一个无序列表来表示名为阿诺德·施瓦辛格、西尔维斯特·史泰龙和布鲁斯·威利斯的子菜单项。同样，列表项动作电影包含一个无序列表来表示子菜单项皇家赌场、兰博 III 和喜剧电影。

在样式表文件中，类型选择器a将属性text-decoration设置为值none，以从所有锚元素(即，从菜单标题、菜单项和子菜单项)中移除传统下划线，并将color属性设置为黑色，以使所有菜单上的文本以黑色显示。

类型选择器ul包含设置为0的margin属性，以移除列表项左侧的层次边距，并使菜单项一个接一个地出现。属性list-style被设置为值none,以从无序列表中移除传统的项目符号。

在类型选择器ul.dropdown li中定义的样式被自动应用到属于类别dropdown的无序列表的列表项目中(即，应用到菜单标题书籍和电影)。将float属性设置为left以使一个菜单标题出现在浏览器窗口的左侧，为下一个菜单标题出现在其右侧创造空间。背景颜色设置为青色。

属性选择器ul.dropdown a:hover包含 background 和 color 属性，用于设置悬停在上面的锚元素(所有菜单项)的背景色和前景色，分别为绿色和蓝色。

类型选择器ul.dropdown li a包含样式属性，这些属性将应用于代表菜单标题书籍和电影的锚元素。它包含设置为block的display属性，以使锚元素作为独立的块元素，设置为4px的padding属性，以在菜单文本及其边框之间创建一些间距，以及设置为1px solid #000的border-right属性，以在每个菜单标题的右侧创建 1px 的黑色边框(以单独显示它们)。

类型选择器ul.dropdown ul包含将应用于包含菜单项的无序列表的样式。设置为150px的width属性使每个菜单项的宽度为 150px，设置为hidden的visibility属性隐藏整个菜单项块，仅当菜单标题悬停时才可见。设置为absolute的position属性使菜单项块出现在它们各自的菜单标题下。

类型选择器ul.dropdown ul li包含将应用于所有代表菜单项的列表项的属性。background属性将所有菜单项和子菜单项的背景色设置为黄色，border-bottom属性设置为1px solid #000以使每个菜单项下面出现一个 1px 的黑色边框来分隔它们。

类型选择器ul.dropdown ul li a包含应用于代表菜单项和子菜单项的所有锚元素的属性。将border-right属性设置为none来移除菜单项右边的边框，因为您将在菜单项的右边显示子菜单项。将width属性设置为100%,使锚元素占据所有分配的 200 像素宽度。

类型选择器ul.dropdown ul ul应用于表示子菜单项的无序列表。将left属性设置为100%，以使子菜单项出现在距离左侧 100%的位置(即，在菜单项的宽度之后)，否则它将与菜单项重叠。将top属性设置为0,使子菜单项与正在显示的子菜单项的距离(从浏览器的上边框)相同

样式规则.hover；通过 jQuery 代码应用于列表项，使子菜单项出现在相对于它们的菜单项的位置。

在开始理解 jQuery 代码之前，让我们先了解一下:first是做什么的，因为它用在了上面的代码中。

:首先

自定义选择器返回指定元素的第一个实例。

示例:

$('p:first)

将返回第一个段落元素。

在上面的 jQuery 代码中，当鼠标指针移动到任何一个菜单标题、书籍或电影(id 为dropdown的无序列表的列表项)上时，样式表文件中定义的 CSS 类.hover的属性将应用于它，并且第一个无序列表(相应菜单标题的菜单项)也将处于可见模式。类似地，当任何菜单项被悬停时(具有子菜单项形式的无序列表)，该无序列表也将被显示(即，子菜单项将被显示)。当鼠标指针离开菜单项或菜单标题时，菜单项或子菜单项分别被隐藏。此外，对于所有嵌套了无序列表的列表项，符号>被附加到它的锚元素上，以表示它附加了子菜单项。

最初，两个菜单标题书籍和电影，如图 5-10 所示。

img/192218_2_En_5_Fig10_HTML.jpg

图 5-10

菜单标题:书籍和电影

将鼠标指针移动到菜单标题书籍上，其菜单项显示如图 5-11 所示。

img/192218_2_En_5_Fig11_HTML.jpg

图 5-11

“书籍”菜单的菜单项(包含子菜单项的菜单项显示有一个>符号)

将鼠标指针移动到带有子菜单的菜单项上，将显示如图 5-12 所示的子菜单项。

img/192218_2_En_5_Fig12_HTML.jpg

图 5-12

突出显示的“书籍”菜单的子菜单项

同样的事情也适用于第二个菜单标题，电影。当鼠标悬停在它上面时，它的菜单项将变得可见。同样，当鼠标悬停在该菜单项上时，会显示该菜单项的子菜单项，如图 5-13 所示。

img/192218_2_En_5_Fig13_HTML.jpg

图 5-13

高亮显示的“电影”菜单的子菜单项

5.8 制作手风琴菜单

问题

您希望以折叠菜单的形式显示两个菜单(即，通过使用向上滑动或向下滑动技术，悬停在其上的菜单的菜单项将变得可见，而其他菜单标题的菜单项将变得不可见)。您还希望当鼠标指针离开两个菜单时，菜单项消失。

解决办法

让我们创建一个 HTML 文件来表示两个菜单标题及其菜单项。您可以借助一个无序列表来做到这一点，一个列表嵌套在另一个列表中。HTML 文件可能如下所示:

make gation . html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link rel="stylesheet" href="styleaccordion.css" type="text/css" media="screen" />
    <script src="jquery-3.5.1.js" type="text/javascript"></script>
    <script src="makingaccordionjq.js" type="text/javascript"></script>
  </head>
  <body>
       <p class="menus">Books</p>
         <div class="menuitems">
           <ul>
                 <li><a href="example.com">Web Development</a></li>
                 <li><a href="example.com">Programming</a></li>
                 <li><a href="example.com">RDBMS</a></li>
          </ul>
        </div>
       <p class="menus">Movies</p>
         <div class="menuitems">
           <ul>
                 <li><a href="example.com">Latest Movie Trailers</a></li>
                 <li><a href="example.com">Movie Reviews</a></li>
                 <li><a href="example.com">Celebrity Interviews</a></li>
           </ul>
         </div>
  </body>
</html>

要将这些样式应用到上面的无序列表中，使它们具有可折叠菜单的外观，请使用以下文件:

style agreement . CSS

.menus{
     width: 200px;
     padding:5px;
     margin:1px;
     font-weight:bold;
     background-color: #0ff;
}

.menuitems{
     display:none;
}

a{
       display:block;
       border-bottom: 1px solid #fff;
       text-decoration: none;
     background: #00f;
       color: #fff;
       padding:10px;
       font-weight:bold;
     width: 190px;
}

.menuitems a:hover {
       background: #000;
}

li {
     display:inline;
}

ul{display:inline;}

jQuery 代码显示悬停菜单标题的菜单项，并以滑动效果隐藏另一个菜单标题(鼠标指针移开的位置)的菜单项，如下所示:

make gacucionijq . js

$(document).ready(function() {
     $('p.menus').mouseout(function(){
          $("div.menuitems'").slideUp("slow");
          $('p').css({backgroundImage:""});
     });

       $('p.menus').mouseover(function(){
          $(this).css({'background-image':"url(down.png)", 'background-repeat':"no-repeat",
               'background-position':"right"}).next("div.menuitems").slideDown(500)
               .siblings("div.menuitems").slideUp("slow");
          $(this).siblings().css({backgroundImage:""});
     });
});

它是如何工作的

在 HTML 文件中，有两个类menus的段落元素，文本书籍和电影来表示两个菜单标题。每个段落元素后面跟着一个menuitems类的div元素，该元素包含一个无序列表，其中三个列表项分别代表每个菜单标题的菜单项。无序列表(text Books 的 paragraph 元素下面)有三个列表项: Web 开发、编程、 RDBMS 。类似地，名为电影的段落元素下面的无序列表有三个列表项:最新电影预告片、电影评论和名人访谈。

在样式表文件中，在类选择器.menus中定义的属性将自动应用于类.menu的段落元素，以赋予它们菜单标题的形状。将width属性设置为200px以将菜单标题定义为 200 像素宽，将padding属性设置为5px以在边框和菜单文本之间保留一些空间。margin属性被设置为1px以在两个菜单标题之间保持 1px 的间距。通过将代码#0ff应用于background-color属性，将font-weight属性设置为bold以使菜单标题以粗体显示，并将菜单标题的背景设置为青色。

类选择器.menuitems中的属性将自动应用于类menuitems的div元素。它包含设置为none的display属性，用于最初隐藏菜单项。

在类型选择器a中定义的属性将应用于所有锚元素(所有菜单项)。将display属性设置为block,使锚元素充当一个块。将border bottom属性设置为1px solid #fff,在每个锚元素下创建一条 1px 的白色实线来分隔所有菜单项。text-decoration属性被设置为none以从锚元素中移除传统的下划线。background 和 color 属性用于将菜单项的背景色和前景色分别设置为蓝色和白色。将padding属性设置为10px来定义菜单项文本和边框之间的间距。将font-weight属性设置为bold以使菜单项以粗体显示，将width属性设置为190px以使菜单项的宽度为 190px。

当鼠标指针悬停在菜单项上时，属性选择器.menuitems a:hover中定义的属性将自动应用于嵌套在类menu element的div元素中的锚元素。它包含使悬停菜单项的背景颜色变成黑色的背景属性。

类型选择器li包含设置为inline的 display 属性，用于移除列表项之间的任何间距。类似地，类型选择器ul将 display 属性设置为inline，以移除无序列表上下的空格

上述 jQuery 代码语句的含义如下:

您将 mouseout 事件附加到类menus的段落元素上(即，附加到菜单标题书籍和电影)。这样做的原因是，如果鼠标指针离开两个菜单，您希望隐藏菜单项。

然后将 mouseover 事件附加到类menus的段落元素上(即，附加到菜单标题书籍和电影)。

然后使用.css()方法显示一个指向悬停菜单标题的向下指针的图像(显示当前它处于展开模式)。将background-repeat属性设置为no-repeat以使其出现一次，将background-position属性设置为right以使向下指针出现在菜单标题的右端。

下一个元素(匹配选择器)的内容只不过是类menuitems的一个div元素(包含被悬停的段落元素的菜单项)，通过下滑效果变得可见，而其匹配选择器的兄弟元素(即另一个菜单标题的菜单项，如类menuitems的div元素)通过上滑效果变得不可见。

最后，从失去焦点的菜单项中移除背景图像。

在执行上述 jQuery 代码时，菜单标题将一个接一个地出现，如图 5-14 所示。

img/192218_2_En_5_Fig14_HTML.jpg

图 5-14

两个菜单标题，书籍和电影

将鼠标悬停在第一个菜单标题 Books 上，其菜单项将以下拉效果显示，如图 5-15 所示。您可以看到菜单标题上有一个向下的指针，表示它现在处于展开模式。此外，这些菜单项具有悬停效果(即，当鼠标指针移过它们时，它们会高亮显示)。

img/192218_2_En_5_Fig15_HTML.jpg

图 5-15

“书籍”菜单的菜单项以下拉效果出现

同样，将鼠标指针移动到另一个菜单标题上，如电影，你会看到它的菜单项出现，书籍菜单的菜单项消失，并带有上滑效果，如图 5-16 所示。

img/192218_2_En_5_Fig16_HTML.jpg

图 5-16

“电影”菜单的菜单项以下拉效果出现

5.9 制作动态可视化菜单

问题

你想制作一个弧形的标签导航菜单，它有三个菜单，分别叫做书籍、电影和音乐。您希望菜单选项卡具有悬停效果(当鼠标移动到它们上面时突出显示)。您还需要鼠标悬停时显示的菜单选项卡的相关信息。

解决办法

创建一个 HTML 文件来定义锚元素，文本书籍、电影和音乐嵌套在类buttons的 span 元素中。锚元素分别被赋予 idbooksbutton、moviesbutton和musicbutton(通过 jQuery 代码访问)，并指向一个名为example.com的假想网站，如果菜单项被选中，用户将被发送到该网站。HTML 文件如下所示:

dynamic display menu . html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link rel="stylesheet" href="stylevisualmenu.css" type="text/css" media="screen" />
    <script src="jquery-3.5.1.js" type="text/javascript"></script>
    <script src="visualmenujq.js" type="text/javascript"></script>
  </head>
  <body>
       <span class="buttons"><a href="example.com" id="booksbutton"> Books </a></span>
       <span class="buttons"><a href="example.com" id="moviesbutton"> Movies </a> </span>
       <span class="buttons"><a href="example.com" id="musicbutton"> Music </a></span><br><br>
       <p class="books">Books of different subjects available at reasonable prices. Ranging from web development, programming languages and text books all are available at heavy discount. Shipping is free. Also available in stock the popular Magazines, E-books and Tutorial CDs at affordable prices.</p>
       <p class="movies">Find new movie reviews & latest hollywood movie news. Includes new movie trailers, latest hollywood releases, movie showtimes, entertainment news, celebrity interviews etc. Also find Hollywood actress, actor, videos biography, filmography, photos, wallpapers, music, jokes live tv channels at your doorsteps</p>
       <p class="music">Find music videos, internet radio, music downloads and all the latest music news and information. We have a large collection of music and songs classified by type, language and region. All downloads are streamed through RealAudio. You can also watch free music videos, tune in to AOL Radio, and search for your favorite music artists.</p>
  </body>
</html>

在 span 元素下面，您会发现三个段落元素，它们有三个不同的类名，分别被指定为books、movies和music。这些段落包含与三个菜单选项卡相关的信息。

对于这个解决方案，您需要两个选项卡图像。一个选项卡图像用于菜单选项卡的左侧，使其具有曲线斜率，如图 5-17 所示。

img/192218_2_En_5_Fig17_HTML.jpg

图 5-17

菜单选项卡左侧的图像

左侧图像以文件名tabl.jpg保存，菜单页签右侧图像以文件名tabr.jpg保存，如图 5-18 所示。

img/192218_2_En_5_Fig18_HTML.jpg

图 5-18

菜单选项卡右侧的图像

图 5-17 和 5-18 中的两幅图像为黑色。您还需要同样的两个绿色图像(将在悬停在菜单选项卡上时使用)。分别如图 5-17 和 5-18 的左右斜率为绿色的两幅图像保存在tablselect.jpg和tabrselect.jpg文件中。

样式表文件style.css包含几个样式规则，使 span 元素显示为选项卡导航菜单。style.css 文件如下所示:

visual menu . CSS

.buttons{
       background-image:url(tabl.jpg);
       background-repeat:no-repeat;
       background-position: left;
       background-color:#000;
       width: 80px;
       float: left;
       text-align: center;
}

a{
       display:block;
       background-image:url(tabr.jpg);
       background-repeat:no-repeat;
       background-position: right;
       padding:3px;
       text-decoration:none;
       font-weight:bold;
       color:#fff;
}

.rightselectfig{
       display:block;
       background-image:url(tabrselect.jpg);
       background-repeat:no-repeat;
       background-position: right;
       padding:3px;
       text-decoration:none;
       font-weight:bold;
       color:#fff;
}

.leftselectfig{
       background-image:url(tablselect.jpg);
       background-repeat:no-repeat;
       background-position: left;
       background-color:#0f0;
       width: 80px;
       float: left;
       text-align: center;
}

将悬停效果应用于菜单选项卡并显示其相关信息的 jQuery 代码如下:

视觉菜单.js

$(document).ready(function() {
  $('.books').hide();
  $('.movies').hide();
  $('.music').hide();

  $('a').hover(
    function(event){
      $(this).addClass('rightselectfig');
      $(this).parent().addClass('leftselectfig');
    },
    function(){
      $(this).removeClass('rightselectfig');
      $(this).parent().removeClass('leftselectfig');
    }
  );

  $('#booksbutton').click(function(event){
    event.preventDefault();
    $('.books').show('slow');
    $('.movies').hide();
    $('.music').hide();
  });

  $('#moviesbutton').click(function(event){

    event.preventDefault();
    $('.movies').show('slow');
    $('.books').hide();
    $('.music').hide();
  });

  $('#musicbutton').click(function(event){
    event.preventDefault();
    $('.music').show('slow');
    $('.books').hide();
    $('.movies').hide();
  });
});

它是如何工作的

类选择器.buttons包含将自动应用于类buttons的 span 元素的样式属性(即，应用于所有三个文本:书籍、电影和音乐)。将背景图像属性设置为url(tabl.jpg)使图 5-17 所示的图像与菜单文本一起出现，将background repeat属性设置为no-repeat使图像只出现一次，将background-position属性设置为left使图像出现在菜单文本的左侧，为其指定左侧的坡度。

菜单选项卡的background颜色设置为black，分配给菜单选项卡的width为80px。将float属性设置为left以使菜单选项卡出现在浏览器窗口的左侧，并在其右侧留出空间(以便其他菜单选项卡出现在右侧)。将text-align属性设置为center，使菜单文本出现在定义的 80px 宽度的中心。

类型选择器a中定义的属性将自动应用于锚元素。将display属性设置为block以使锚元素充当块元素，而不是单个元素。将background-image属性设置为tabr.jpg以应用菜单标签右侧图 5-18 所示的图像。将background –repeat属性设置为no-repeat以使图像仅出现一次。将background-position设置为right以使图像出现在右侧，并在其右侧分配一个斜坡形状。padding属性被设置为3px以使菜单文本与其边框之间的间距为 3px。将text-decoration属性设置为none以移除通常出现在锚元素下方的传统下划线。将font-weight属性设置为bold以使菜单文本以粗体显示，将color设置为white以使菜单文本以白色显示。

风格法则。rightselectfig包含当鼠标指针移动到锚元素上时将应用于它们的属性。它包含设置为block的display属性，以使锚元素充当块元素而不是单个元素。将background-image属性设置为tabrselect.jpg以将图 5-18 所示的图像应用于菜单标签右侧的绿色。将background–repeat属性设置为no-repeat以使图像仅出现一次。将background-position设置为right以使图像出现在右侧，并在其右侧分配一个斜坡形状。padding属性被设置为3px以使菜单文本与其边框之间的间距为 3px。将text-decoration属性设置为none以移除通常出现在锚元素下方的传统下划线。将font-weight属性设置为bold以使菜单文本以粗体显示，将color设置为white以使菜单文本以白色显示。

样式规则.leftselectfig包含当鼠标指针移动到菜单标签按钮上时将应用于它们的属性。背景图像属性设置为url(tablselect.jpg)使图 5-17 所示的绿色图像与菜单文本一起出现。将background-repeat属性设置为no-repeat以使图像仅出现一次，将background-position属性设置为left以使图像出现在菜单文本的左侧，并在左侧为其指定一个坡度。菜单标签的background颜色被设置为green来给它一个悬停的效果。分配给菜单选项卡的width是80px。将float属性设置为left以使菜单选项卡出现在浏览器窗口的左侧，并在其右侧留出空间(以便其他菜单选项卡出现在右侧)。将text-align属性设置为center，使菜单文本出现在定义的 80px 宽度的中心。

在 jQuery 代码中，类books、movies和music的所有段落元素都是不可见的，因为只有当您将鼠标悬停在相应的菜单选项卡上时才会显示它们。然后，将悬停事件附加到锚元素，并将样式规则.rightselectfig中定义的属性应用到菜单选项卡(正被悬停在其上),对其应用绿色，并在菜单选项卡的右侧添加图像(tabrselect.jpg)。你用同样的方法处理左侧。

当鼠标不再停留在选项卡上时，您删除样式规则.rightselectfig和.leftselectfig的样式属性，使菜单选项卡显示为鼠标离开菜单选项卡时的初始状态。

接下来是选项卡的点击事件。在这些情况下，您可以防止表单被提交到服务器，或者在单击菜单选项卡时被导航到目标网站。然后显示与被单击的选项卡相关联的信息，并隐藏与其他选项卡相关联的段落元素的内容。

当你将鼠标悬停在书籍菜单标签上时，你会发现它的背景颜色变为绿色，并且还会显示与书籍相关的信息，如图 5-19 所示。

img/192218_2_En_5_Fig19_HTML.jpg

图 5-19

悬停在菜单选项卡上时，该选项卡会高亮显示，并显示相应的信息

为了给显示的文本提供动画效果，可以使用slideDown()和slideUp()方法，而不是简单的show()和hide()方法，如下面的 jQuery 代码所示:

menu slide jq . js

$(document).ready(function() {
  $('.books').hide();
  $('.movies').hide();
  $('.music').hide();

  $('#booksbutton').mouseover(function(){
    $('.books').slideDown('slow');
    $('.movies').slideUp('slow');
    $('.music').slideUp('slow');
  });

  $('#moviesbutton').mouseover(function(){
    $('.movies').slideDown('slow');
    $('.books').slideUp('slow');
    $('.music').slideUp('slow');
  });

  $('#musicbutton').mouseover(function(){
    $('.music').slideDown('slow');
    $('.books').slideUp('slow');
    $('.movies').slideUp('slow');
  });
});

5.10 摘要

在本章中，您看到了如何创建不同类型的菜单，如面包屑菜单、上下文菜单、折叠菜单和动态可视菜单。您还了解了如何使用访问键访问菜单项，以及如何制作带有悬停菜单项的菜单。

在下一章，你将学习动画是如何应用于不同的 HTML 元素的。您将学习左右移动图像、操作 jQuery 队列、单击按钮时逐个显示图像、放大图像、单击“read more”链接时显示详细信息，以及使用动画展开和折叠列表。

六、实现动画

在这一章中，你将学习如何将动画应用于不同的 HTML 元素。你将在本章中制作以下食谱:

  • 将图像向右移动，然后向左移动

  • 管理和操作 jQuery 队列

  • 点击“下一个”和“上一个”按钮，逐个显示图像

  • 当鼠标悬停在图像上时放大图像

  • 点击阅读更多信息链接显示详细信息

  • 使用动画展开和折叠列表

6.1 先将图像向右移动，然后向左移动

问题

你有一个图像，你想让它从左到右动画，然后回到原来的位置。

解决办法

以下是显示网页标题、按钮和图像的 HTML 程序:

Animation1.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
<link rel="stylesheet" href="animation1style.css" type="text/css" media="screen" />
    <script src="jquery-3.5.1.js" type="text/javascript"></script>
    <script src="animation1bjq.js" type="text/javascript"></script>
  </head>

  <body>
<p>We deal with Electronics Products</p>
<button id="anim">Animate Image</button><br/>
<img class="pic" id="pic1" src="chip.jpg" width="200" height="100">
  </body>
</html>

您可以在上面的代码中看到，段落元素用于显示文本我们处理电子产品。文本下方是一个标签为动画图像的按钮。为了唯一地识别它，按钮被赋予一个 IDanim。在按钮下方，筹码图像以 200 像素宽和 100 像素高显示。

将图片从左到右动画化，然后返回到原始位置的 jQuery 代码如下:

动画 1jq.js

$(document).ready(function() {
     $("button#anim").click( function() {
          $("img#pic1").animate({ left: '350px'}, 'slow',
          function(){
               $("img#pic1").animate({ left: '0px'}, 'slow');
          });
     });
});

这个 jQuery 代码使用了left属性，所以让我们快速看一下。

左侧属性

它设置 HTML 元素相对于浏览器窗口左边界的位置。有效选项包括

  • distance:元素定位在 px、cm 等中提到的指定距离。

  • %:元素的距离设置为容器的指定百分比。

  • auto:浏览器从左边界确定元素的位置。这是默认选项。

  • initial:选择默认值作为该元素的值。

  • inherit:该属性的值继承自其父元素。

位置属性

在使用left属性之前，必须设置position属性，因为除非元素被定位，否则 left 属性将不起作用。以下是position属性的有效选项:

  • absolute/fixed:元素的左边缘将被设置为指定值。

  • relative:元素的左边缘将根据其当前位置进行设置。

  • sticky:视其位置而定，是相对的还是固定的。此选项不会让元素离开屏幕。

  • static:左侧属性不起作用。

它是如何工作的

当点击 ID 为anim的按钮时，ID 为pic1的图像从其当前位置向右缓慢移动，并在浏览器屏幕左边界 350px 处停止(见图 6-1 )。在animate方法的回调函数中(即当图像从左边界到达它的右边目的地 350px 时)，回调函数将执行，它以缓慢的速度将图像向左移动，当图像到达离浏览器屏幕左边界 0px 的距离时将停止。

img/192218_2_En_6_Fig1_HTML.jpg

图 6-1

单击该按钮时，图像向右移动，然后再向左移动

在回调函数中，可以粘贴另一张图片。让我们修改上面的 jQuery 代码，使芯片图像向右移动，移动时其高度和宽度增加，最后芯片图像被替换为笔记本电脑图像。jQuery 文件Animation1jq.js显示了这样做的代码。

动画 1jq.js

$(document).ready(function() {
     $("button#anim").click( function() {
          $("img#pic1").animate({ left: '350px', width: '400px', height: '350px'}, 'slow',
          function(){
               $("img#pic1").attr("src", "computer.jpg");
          });
     });
});

最初将出现如图 6-2(a) 所示的筹码图像和按钮。当点击 ID 为anim的按钮时，ID 为pic1的筹码图像从其当前位置向右移动。芯片图像将显示动画，直到它到达离浏览器屏幕左边界 350 像素的距离。当图像动画时，其宽度会慢慢增加到 400 像素，其高度也会慢慢增加到 350 像素(见图 6-2(b) )。在动画结束时(即当芯片图像变成 400 像素宽和 350 像素高时)，它将通过回调函数被替换为笔记本电脑图像(见图 6-2(c) )。

img/192218_2_En_6_Fig2_HTML.jpg

图 6-2

(a)出现芯片图像和按钮。(b)筹码图像向右移动，其宽度和高度随着移动而增加。(c)芯片映像被笔记本电脑映像取代

6.2 管理和操作 jQuery 队列

问题

对图像执行几种动画方法，这些方法存储在 jQuery 队列中。您可以根据自己的需求操作存储在队列中的方法。

解决办法

显示图像的 HTML 程序如下，您将在该图像上执行不同的动画方法:

Animation2.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="jquery-3.5.1.js" type="text/javascript"></script>
    <script src="animation2jq.js" type="text/javascript"></script>
  </head>
  <body>
<img class="pic" id="pic1" src="chip.jpg" width="200" height="100">
  </body>
</html>

您可以在上面的程序中看到，显示了一个 200 像素宽、100 像素高的图像。图像被分配类别pic和 ID pic1。

将某些动画任务应用于图像并显示 jQuery 队列长度的 jQuery 代码如下:

动画 2jq.js

$(document).ready(function() {
 $("img#pic1")
 .animate({ "height" : 300 })
 .fadeOut()
 .fadeIn()
 .animate({ "width" : 400 })
    .slideToggle( 3000 )
  var n =$("img#pic1").queue( "fx" ).length;
alert("The queue length is "+n);
});

在这个 jQuery 代码中，使用了slideToggle()和queue()方法，所以让我们快速看一下这两个方法。

slideToggle()

顾名思义，slideToggle()方法在所选元素的slideUp()和slideDown()之间切换。如果元素是隐藏的，那么slideDown()方法将执行以使元素可见。类似地，如果元素是可见的，那么slideUp()方法将运行使其不可见。

语法:

  • speed定义滑动的速度。该参数是可选的，其默认值为 400 毫秒。有效选项为slow、fast和毫秒。

  • easing参数决定动画在不同阶段的速度。以下是有效选项:

    • 它使过渡在开始和结束时变慢，但在中间变快。这是默认选项。

    • linear:它使过渡以恒定的速度发生。

$(selector).slideToggle(speed,easing,callback)
。队列( )

顾名思义，队列包含应该在所选元素上运行的函数。如果需要，可以操作这些功能。队列允许在一个元素上异步执行一系列函数。它基本上是一个按先进先出(FIFO)顺序处理的函数数组。

语法:

$(selector).queue(queue_name)

其中参数queue_name表示队列的名称。默认的 jQuery 队列名是fx.

要检索对 jQuery 队列的引用，可以调用没有函数参数的.queue()方法。

以下方法用于操作队列:

  • push:用于在队列末尾增加一个功能

  • pop:用于从队列中删除最后一个功能

  • unshift:用于在队列的开头插入一个函数

  • shift:用于从队列的开始处删除一个功能

  • dequeue():当被调用时，这个方法表明你想要移动到队列中的下一个项目(即，你想要从队列中移除顶部的函数并执行它)。

  • clearQueue():该方法删除队列中所有尚未执行的函数。当前正在执行的功能将不起作用。

它是如何工作的

ID 为pic1的图像是动态的(即，其高度将从当前高度缓慢增加，直到达到 300 像素高)。然后图像会慢慢变得不可见，又会慢慢重新出现。此后，图像将显示动画，宽度逐渐增加到 400 像素。然后slideToggle()的方法会让图像慢慢不可见。因为在选中的元素上(即图像上)有五个动作在排队，所以通过警告对话框你得到队列长度为 5，如图 6-3 所示。

img/192218_2_En_6_Fig3_HTML.jpg

图 6-3

“报警”对话框显示队列长度(即在图像上排队的操作数)

从队列中弹出最后一个函数

您可以利用pop()函数从 jQuery 队列中移除最后一个函数。jQuery 文件Animation2jq.js可以修改如下:

动画 2jq.js

$(document).ready(function() {
 $("img#pic1")
 .animate({ "height" : 300 })
 .fadeOut()
 .fadeIn()
 .animate({ "width" : 400 })
    .slideToggle( 3000 )
var queue = $("img#pic1").queue();
var popped_func = queue.pop();
});

从<img>元素中检索对 jQuery 队列的引用，并将其赋给变量queue。最后一个方法slideToggle(3000)将从队列中删除，并赋给变量popped_func，因为最后一个方法不再在队列中，所以它不会执行。因此，芯片图像将不会变得不可见(在其高度和宽度增加之后),而是将保持在那里。

您甚至可以删除队列中的最后一个函数，并通过使用如下的unshift()方法将其插入到开始处:

var queue = $("img#pic1").queue();
var popped_func = queue.pop();
queue.unshift(popped_func);

第一个增加图像高度的animate方法在运行应用时执行。然后通过使用pop()方法将最后一个方法slideToggle(3000)从队列的末尾移除，并将其赋给popped_func变量。然后将popped_func变量中的最后一个方法添加到队列的开头。增加图像高度后，执行slideToggle(3000)方法，使图像不可见。

您可以通过在 jQuery 代码中添加以下语句来清除存储在队列中的所有方法，从而停止动画:

$("img#pic1").clearQueue();

因为上述语句将删除队列中的所有方法，所以在完成当前正在执行的方法后，动画将立即停止。您甚至可以在单击按钮时调用clearQueue()方法，允许用户在任何需要的时候停止动画。

您还可以运行队列中所需的方法，方法是用所需的方法范围重新定义队列，如下面的代码所示:

$("img#pic1").queue(queue.slice(3,4));

这里从第三个索引位置直到第四个索引位置的语句将被用来创建一个新队列。指定索引位置的语句是.animate({ "width" : 400 }),因此新队列将只有这条语句。因此，芯片图像的宽度会慢慢增加到 400px。就这样。因为队列中没有其他东西，所以不会发生其他事情。

6.3 通过单击下一个和上一个按钮逐个显示图像

问题

您有几幅图像，并且希望一次显示一幅图像。当用户单击“下一个”按钮时，将显示序列中的下一个图像。类似地，通过单击 previous 按钮，之前显示的图像应该会再次出现。

解决办法

下面的 HTML 程序显示五幅图像和左右箭头键。为了管理边距和显示格式，图像被放在一个无序列表中，这个列表又被放在一个<div>元素中。

animation3.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
<link rel="stylesheet" href="animation3style.css" type="text/css" media="screen" />
    <script src="jquery-3.5.1.js" type="text/javascript"></script>
    <script src="animation3jq.js" type="text/javascript"></script>
  </head>
 <body>
 <div id="image_slider">
 <ul>

 <li><img src="chip.jpg" width="200" height="150" /></li>
 <li><img src="chip2.jpg" width="200" height="150" /></li>
 <li><img src="chip3.jpg" width="200" height="150" /></li>
 <li><img src="chip4.jpg" width="200" height="150" /></li>
 <li><img src="chip5.jpg" width="200" height="150" /></li>
 </ul>
<img src="leftarrow.png" class="leftarrow" />
<img src="rightarrow.png" class="rightarrow" />
 </div>
 </body>
</html>

您可以在上面的代码中看到，用 ID image_slider定义了一个<div>元素。在<div>元素中定义了一个无序列表元素。在无序列表元素中定义了五个列表项，在每个列表项中定义了一个图像。在无序列表元素下面，左侧显示一个左箭头图像来表示“上一步”按钮，右侧显示一个右箭头图像来表示“下一步”按钮。

为了一次只显示一个图像并隐藏其余的图像，并对<ul>和<div>元素应用填充和其他显示格式，某些样式被写入 CSS 样式表。

Animation3style.css

body {
 padding: 10px;
}

#image_slider {
 width: 210px;
 height: 230px;
 overflow: hidden;
  margin: auto;
  display: block;
}

#image_slider ul {
 list-style: none;
 width: 1200px;
 height: 210px;
 margin: 0;
 padding: 0;
}

#image_slider li {
 width: 210px;
 height: 200px;
 float: left;
}

.leftarrow {
 float: left;
 width: 20px;
 height: 20px;
}
.rightarrow {
 float: right;
 width: 20px;
 height: 20px;
}

在这个 CSS 样式表中，使用了属性padding、overflow、display和float，所以让我们快速浏览一下。

填充属性

属性用于创建元素内容之间的间距。为了在元素的每一侧插入间距，有一些padding属性的变体，包括padding-top、padding-right、padding-bottom和padding-left来分别管理元素顶部、右侧、底部和左侧的间距。

padding属性的有效值为

  • value:以 px、pt、cm 等为单位指定间距的值。

  • %:间距以容器宽度的%来指定。

  • inherit:间距继承自父元素。

溢出属性

overflow属性决定了对太大而无法放入容器的内容执行的操作(即，它决定是通过应用滚动条来显示整个元素，还是根据容器大小来裁剪内容)。有效选项包括

  • visible:该元素将被完全显示。

  • hidden:容器边界外的区域将被裁剪，只有容器内的区域可见。

  • scroll:容器边界内的区域可见，并添加滚动条，可以用来查看隐藏的内容。

  • auto:类似于scroll，但是它只在需要的时候给元素添加滚动条。

显示属性

属性决定了元素应该如何呈现。该属性的一些有效值包括

  • inline:元素显示为内嵌元素。不考虑元素的高度和宽度。

  • block:元素显示为块元素(即元素显示在新的一行上，覆盖浏览器屏幕的整个宽度)。

  • contents:容器被移除，子元素成为 DOM 中更高一级元素的子元素。

浮动属性

float属性用于相对于同一容器中的另一个组件定位和格式化内容。它通常用于在图像周围排列文本。以下是有效选项:

  • left:元素浮动在容器的左边。

  • right:元素浮动到其容器的右边。

  • none:元素不浮动。这是默认值。

  • inherit:元素从其父元素继承浮点值。

10px 的填充空间设置在<body>元素的四周。

ID 为image_slider的<div>元素的宽度和高度分别设置为 210px 和 230px。通过使用overflow属性，无法容纳在指定宽度和高度区域内的图像被隐藏。这个想法是一次只能看到一幅图像。整个<div>元素显示为一个块(即，它将显示在新行上，并将覆盖浏览器屏幕的整个宽度)。

无序列表项中的常规项目符号将被删除，无序列表的宽度和高度被设置为 1200px 和 210px，以便容纳所有的图像。在无序列表中，边距和填充间距设置为 0。

列表项的宽度和高度被设置为 210px 和 200px，因为图像将仅通过列表项显示。使用float属性，列表项(即图像)被设置为在其容器中向左浮动。左右箭头图像显示为 20px 宽和 20px 高。左箭头被设置为位于左侧，右箭头图像被设置为显示在右侧。

动画 3jq.js

$(document).ready(function() {
$('img.leftarrow').click(function() {
     if($("ul").css("marginLeft") == "0px"){
          alert("You are at the first image");
     } else {

      $("#image_slider").children("ul").animate({
           "margin-left" : "+=210px"
           }, 2000);
};
});

$('img.rightarrow').click(function() {
     if($("ul").css("marginLeft") == "-840px"){
          alert("You are at the last image");
     } else {
      $("#image_slider").children("ul").animate({
           "margin-left" : "-=210px"
           }, 2000);
};
});
});

在这段 jQuery 代码中，使用了css()方法和margin-left属性，我们先来了解一下。

css()

方法设置或返回所选元素的样式属性。

语法:

以下语法返回指定属性的值:

css("property");

以下语法设置指定 CSS 属性的值:

css("property","value");
左边距属性

此属性设置元素距浏览器窗口左边界的边距。以下是有效选项:

  • length:距左边距的距离以像素、磅、厘米等为单位。默认值为 0px。

  • %:左边界的边距以容器宽度的百分比来指定。

  • auto:离左边界的距离由浏览器决定。

  • initial:取该属性的默认值。

  • inherit:该值继承自父元素。

它是如何工作的

运行程序时，最初将显示第一幅图像(参见图 6-4(a) )。单击左箭头图像时，首先检查左边距值是否为 0px。如果左边距的值为 0px，则表示正在显示第一张图片，并且在当前图像的左边没有图像，因此显示您在第一张图像上，没有其他动作发生的信息。但是如果左边距的值不是 0px，这意味着显示的是其他图像，而不是第一个图像。在这种情况下，左边距值增加 210 px，使下一个图像可见，并隐藏前面的图像。左边距的值会以慢速动画的形式增加，因此下一个图像会以滑入的形式出现。

同样，当单击右箭头图像时，首先检查左边距的值是否等于-840px。因为每点击一次右箭头，左边距的值就减少 210px，当显示最后一幅图像时，左边距的值将等于-840px，因此显示消息你在最后一幅图像(见图 6-4(c) )。如果左边距的值大于-840px，左边距的值减少 210px，使第二幅图像可见，前一幅图像不可见，如图 6-4(b) 所示。

img/192218_2_En_6_Fig4_HTML.jpg

图 6-4

(a)显示第一幅图像。(b)单击右箭头图像，第二个图像变得可见，隐藏第一个图像。(c)当在最后一幅图像上点击右箭头图像时，出现通知“您在最后一幅图像上”的警告对话框

当按下任何箭头键时，逐个显示所有隐藏的图像

在这段代码中，当您按下右箭头图像时，所有图像将一个接一个地向左滑动，并且在显示最后一个图像后滑动将停止，而不是像在早期的 jQuery 代码中那样在显示一个图像后停止。类似地，在点击左箭头图像时，所有图像将一个接一个地向右滑动，并且在显示第一个图像后滑动将停止。

执行此操作的 jQuery 代码如下:

动画 3bjq.js

$(document).ready(function() {
     $('img.leftarrow').click(function() {
          if($("ul").css("marginLeft") == "0px"){
               alert("You are at the first image");
          } else {
               for(i=0;i<4;i++){
                     $("#image_slider").children("ul").animate({
                     "margin-left" : "+=210px"
                     }, 2000);
               }
          };
     });

     $('img.rightarrow').click(function() {
          if($("ul").css("marginLeft") == "-840px"){
               alert("You are at the last image");
          } else {
               for(i=0;i<4;i++){
                     $("#image_slider").children("ul").animate({
                     "margin-left" : "-=210px"
                     }, 2000);
               }
          };
     });
});

您可以在上面的代码中看到，在单击左箭头图像时，使用了一个for循环，它将执行四次迭代，在每次迭代中，无序列表元素的左边距增加 210px，从而隐藏当前图像并取消隐藏右侧的图像。回想一下，图像是通过无序列表元素的列表项来表示的。for循环将图像一张一张地向左滑动，并停留在最后一张图像上，如图 6-5(a) 所示。

单击右箭头图像时，重复该过程。再次，for循环将迭代四次，在每次迭代中将无序列表元素的左边距减少 210px。因此，当前图像将被隐藏，左侧的一个图像将变得可见。for循环将给出滑动效果，好像图像一个接一个地向正确的方向滑动，并在第一个图像上停止，如图 6-5(b) 所示。

img/192218_2_En_6_Fig5_HTML.jpg

图 6-5

(a)单击左箭头使所有图像向左移动，并停在最后一幅图像上。(b)单击向右箭头使所有图像向右滑动，并在第一个图像处停止

使图像连续滑动

让我们修改 jQuery 代码来制作一个图像滑块(即，图像将一个接一个地向左滑动)。也就是说，将显示一幅图像，然后它将向左移动，消失，并被序列中的下一幅图像所取代。图像滑块的 jQuery 代码如下:

动画 3cjq.js

$(document).ready(function() {

     $.leftrotate = function(){
           $("#image_slider").children("ul").animate({
                "margin-left" : "-=210px"
                }, 2000,
               function(){
                    if($("ul").css("marginLeft") == "-1050px"){
                         $("ul").css( {"marginLeft" : "0px" });
                    }
               });
          $.leftrotate();
     }
     $.leftrotate();
});

你可以在上面的代码中看到，定义了一个名为leftrotate的函数，其中<div>元素内无序列表元素的左边距缓慢递减 210px。因此，当前图像将变得不可见，右边的图像将慢慢变得可见，从而产生动画效果。显示图像后，检查是否到达最后一幅图像(即，左边距是否等于-1050px)。如果是，那么左边距设置为 0px，使第一个图像再次可见。如果还没有到达最后一幅图像，再次调用leftrotate函数将左边距减少 210px，使当前图像不可见，使右边的下一幅图像可见。由于递归的原因，leftrotate函数会被重复调用，使得图像无限滑动，如图 6-6 所示。

img/192218_2_En_6_Fig6_HTML.jpg

图 6-6

图像无限滑动

6.4 当鼠标悬停在图像上时放大图像

问题

您有一些尺寸较小的图像，它们一个接一个地显示。您希望当鼠标悬停在图像上时图像被放大，当鼠标移出图像时图像恢复到原来的大小。

解决办法

显示一些图像的 HTML 代码如下:

Zoomonhover.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
<link rel="stylesheet" href="zoomonhoverstyle.css" type="text/css" media="screen" />
    <script src="jquery-3.5.1.js" type="text/javascript"></script>
    <script src="zoomonhoverjq.js" type="text/javascript"></script>
  </head>
 <body>

<ul id="image_hover">
 <li><img src="chip.jpg"  /></li>
 <li><img src="chip2.jpg"  /></li>
 <li><img src="chip3.jpg"  /></li>
 <li><img src="chip4.jpg"  /></li>
 <li><img src="chip5.jpg" /></li>
 </ul>
</body>
</html>

您可以在上面的代码中看到，创建了一个 id 为image_hover的无序列表元素。无序列表元素包含五个列表项，每个列表项通过<img>元素显示一个图像。

将样式应用于 HTML 元素的 CSS 样式表如下:

Zoomonhoverstyle.css

#image_hover {
 list-style: none;
}

img {
 width: 100px;
 height: 75px;
}

为了避免在列表项中显示默认项目符号，list_style: none属性被应用于 id 为image_hover的无序列表项。此外，图像默认设置为 100 像素宽，75 像素高。

当鼠标在图像上时放大图像，当鼠标指针离开图像时缩小到原来大小的 jQuery 代码如下:

Zoomonhoverjq.js

$(document).ready(function() {
           $("#image_hover").children("li").find("img").on("mouseenter", function() {
               $(this).css( {"width" : "350px" });
               $(this).css( {"height" : "250px" });
               }).on("mouseleave", function() {
               $(this).css( {"width" : "100px" });
               $(this).css( {"height" : "75px" });
     });
});

它是如何工作的

运行程序时，最初图像会以较小的尺寸一个接一个地出现(即 100 像素宽，75 像素高，如图 6-7 左侧所示)。当鼠标指针悬停在列表项上(即列表项内包裹的图像上)时，通过使用css()方法，图像的宽度和高度分别增加到 350px 和 250px(见图 6-7 右侧)。当鼠标指针离开图像时，再次使用css()方法将图像缩小到原来的大小。

img/192218_2_En_6_Fig7_HTML.jpg

图 6-7

(左)图像以小尺寸一个接一个地出现。(右)当鼠标指针悬停在图像上时，图像的宽度和高度会增加

6.5 点击“阅读更多”链接时显示详细信息

问题

您希望显示一个主题的简短介绍，并在其下方显示一个 read more 链接。您希望当用户点击阅读更多信息链接时显示隐藏的内容。此外，当显示隐藏内容时，您希望将阅读更多链接转换为阅读更少链接。如果点击 read less 链接，您还希望最近变得可见的内容隐藏起来。

解决办法

显示两个段落元素和一个超链接的 HTML 程序如下所示。第二段包含详细信息，最初是隐藏的，但单击超链接时会显示出来。

Readmore.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="jquery-3.5.1.js" type="text/javascript"></script>
    <script src="readmorejq.js" type="text/javascript"></script>
  </head>
  <body>
      <p>jQuery is a lightweight cross-platform JavaScript library. Because of its easy to use syntax, jQuery has made it quite easy to include JavaScript on any web site.  </p>
      <p>It has not only simplified the complex coding but also has reduced the size of code as well. Below are the features of jQuery. To use jQuery, no installation is required. You need to simply download jQuery from its official jQuery website, http://jquery.com/ which has several versions of jQuery. You can download the most stable version out of them. After downloading jQuery on your local file system, you simply refer to the file's location using the HTML script element. </p>
     <a href="#" id="expand">read more</a>
  </body>

</html>

您可以在上面的代码中看到，两个<p>元素是由特定的文本组成的。在第二段下面，定义了一个超链接，默认文本为阅读更多信息。为了在 jQuery 代码中访问它，超链接被分配了 ID expand。

单击超链接时显示隐藏段落的 jQuery 代码如下所示。当点击超链接时，代码还将超链接的文本从阅读更多更改为阅读更少。当点击 read less 链接时，这段代码也会隐藏该段落。

Readmorejq.js

$(document).ready(function() {
       $('p').eq(1).hide();
      $('a#expand').click(function(event) {
           event.preventDefault();
           if ($('a#expand').text() == 'read more') {
          $('p').eq(1).hide().slideToggle('slow');
                $('a#expand').text('read less');
           } else {
               $('p').eq(1).show().slideToggle('slow');
                $('a#expand').text('read more');
           }
      });
});

上面的 jQuery 代码中使用了preventDefault()方法，我们先来了解一下这个方法。

event.preventDefault()方法

顾名思义，event.preventDefault()方法避免元素采取默认动作。例如，使用此方法，您可以阻止用户在单击链接时导航到目标 URL。

语法:

event.preventDefault()

其中参数event由事件绑定函数提供，可以是任何值；它可以是任何字符或单词。

它是如何工作的

在运行 HTML 程序时，您会发现第一个段落(即索引位置为 0 的段落)是可见的，而索引位置为 1 的段落元素(即第二个段落)是隐藏的。该段下方显示超链接，文字继续阅读，如图 6-8(a) 所示。超链接元素被分配了 ID expand，当它被点击时(即如果点击了 read more 链接)，调用preventDefault()方法以避免超链接的默认动作，从而阻止它导航到目的网页。此外，如果 ID 为expand的超链接的文本为请继续阅读，则通过调用slideToggle()方法，可以慢慢看到当前隐藏的第二段。即隐藏段落显示隐藏的文本，超链接文本变为已读少告知用户详细信息已经可见(见图 6-8(b) )。

如果超链接的文本为少读并被点击，则通过调用slideToggle()方法使可见段落慢慢不可见，超链接的文本变为多读。

img/192218_2_En_6_Fig8_HTML.jpg

图 6-8

(a)在该段落下面，显示一个带有文本“阅读更多”的超链接(b)点击“阅读更多”链接后，显示隐藏的段落

6.6 使用动画展开和折叠列表

问题

您希望以可扩展列表项目的形式显示某些电子项目，如相机和笔记本电脑。每当用户单击列表项时，它就会展开以显示详细信息。如果再次单击，展开的列表项将会缩小。

解决办法

显示包含几个列表项的无序列表的 HTML 代码如下所示，其中列表项本身是一个无序列表。列表将从节点电子产品开始，将显示两款电子产品，相机和笔记本电脑。相机列表项将显示两款相机，分别名为索尼和佳能。同样****笔记本电脑列表项将只显示一台笔记本电脑的名称，宏碁。索尼和佳能列表项目可以展开显示各自的配置和价格。另外，宏基列表项可以展开显示其配置和价格。

Explandlistanim.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns:="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="jquery-3.5.1.js" type="text/javascript"></script>
    <script src="expandlistanimjq.js" type="text/javascript"></script>
  </head>
  <body>
<ul id="list">
  <li class="electronics">Electronic Products
    <ul>
      <li class="electronics">Cameras
        <ul>
          <li class="electronics">Sony
            <ul>

              <li>Digital Camera w/ 16-50mm and 55-210mm Power Zoom Lenses</li>
              <li>Monitor Type: 7.5 cm</li>
              <li>$698</li>
            </ul>
          </li>
          <li class="electronics">Canon
            <ul>
              <li>Digital Camera w/ 50x Optical Zoom</li>
              <li>Wi-Fi & NFC Enabled</li>
              <li>$279</li>
            </ul>
          </li>
        </ul>
      </li>
      <li class="electronics">Laptops
        <ul>
          <li class="electronics">Acer
            <ul>

              <li>14" Full HD Touch</li>
              <li>Intel Core i7-1165G7</li>
              <li>Intel Iris Xe Graphics</li>
              <li>16GB LPDDR4X</li>
              <li>$1292</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>
</body>
</html>

您可以看到创建了一个 ID 为list的无序列表，其中只有一个列表项 Electronics Products 。对于通过 jQuery 代码的访问，列表项被分配了类electronics。电子产品列表项由一个无序列表组成，该列表由两个列表项组成，相机和笔记本电脑。所有列表项都被分配了类别electronics。同样，列表项相机由一个无序列表组成，该列表由两个列表项索尼和佳能组成。类似地，列表项 Laptops 由一个无序列表组成，该列表又由一个列表项 Acer 组成。列表项 Sony 包含一个无序列表，由三个列表项组成，显示了索尼相机的配置和价格。

类似地，佳能列表项包装了一个无序列表，该列表由三个显示佳能相机详细特性的列表项组成。宏基列表项包含五个列表项的无序列表，其中每个列表项显示宏基笔记本电脑的功能及其价格。

单击一次时展开列表项，再次单击时折叠列表项的 jQuery 代码如下:

Expanlistanimjq.js

$(document).ready(function() {
     $('#list ul').hide();
     $('.electronics').click(function() {
          $(this).children("ul").slideToggle();
            return false;
     });
 });

它是如何工作的

您可以看到，ID 为list的无序列表中包装的无序列表被隐藏，因此除了父无序列表的文本之外，不会出现子无序列表(即最初会显示电子产品)。如果用户单击任何列表项，将显示包装在该列表项中的无序列表。因为使用了slideToggle()方法，这意味着如果无序列表(即被点击的列表项的子元素)是可见的，那么它将被设为不可见，反之亦然。因此，如果列表项当前处于折叠模式，单击它将会展开，或者如果它已经展开，将会折叠。

在运行程序时，您会在屏幕上获得父无序列表的列表项文本，即电子产品。单击列表项时，它会展开以显示其中的无序列表。里面的无序列表有两个列表项，相机和笔记本电脑，所以显示在屏幕上。点击列表项相机时，它将再次展开并显示该列表项内的无序列表(即屏幕上将显示索尼和佳能列表项；参见图 6-9(a) 。类似地，单击任何列表项，隐藏在其中的无序列表就会显示出来，显示其中的信息。点击所有列表项，将显示如图 6-9(b) 所示的信息。

img/192218_2_En_6_Fig9_HTML.jpg

图 6-9

(a)出现父未订购列表“电子产品”的文本。(b)单击任何列表项，它将展开以显示其中的无序列表

6.7 总结

在这一章中，你学习了如何在 HTML 元素上实现动画。你学会了先将图像向右移动，然后向左移动。您学习了管理和操作 jQuery 队列。您了解了如何通过单击下一个和上一个按钮来逐个显示图像，以及如何在鼠标悬停在图像上时放大图像。您还学习了在单击“read more”链接时展开文本并显示详细信息，最后，您学习了使用动画展开和折叠列表。

下一章将演示滑动和视觉效果。您将学习如何在无限循环中显示滑动图像。您还将学习如何使球弹跳，如何使图像在框内垂直向上滚动，如何垂直显示图像，以及如何制作新闻滚动器。

avatar
文章
阅读
粉丝