JavaScript ScrollLoopMenu插件用法示例

2021年4月2日11:35:25 发表评论 789 次浏览

在本文中, 我们将学习如何实现滚动循环菜单使用基于JavaScript滚动循环菜单插入。它是开发网页时使用的另一种简单且交互式的滚动菜单, 用于获得不错的视觉效果。

注意：请下载JavaScript滚动循环菜单插件在工作文件夹中, 并在HTML代码的开头部分包含必需的文件。

<link href =" https://use.typekit.net/rtr2vsr.css" rel =" stylesheet" type ="text/css"/>
<link href ="css/base.css" rel ="stylesheet" type="textcss"/>
<script src ="js/index.js"> </script>

例子：以下示例演示了使用HTML控件和基于JavaScript的滚动循环菜单滚动循环菜单插入。插件的" base.css"文件的" menu", " menu__item-inner", " frame__link"等不同的类被附加到HTML标记, 如下所示, 以获得预期的输出。

<!DOCTYPE html>
<html lang = "en" class = "no-js">
     <head>
         <meta charset = "UTF-8" />
         <meta name = "viewport"
               content=" width = device -width, initial-scale = 1 " />
         <title>Scroll Loop Menu Plugin</title>
         <meta name = "description"
               content = "scroll loop animation." />
         <meta name = "keywords" 
               content = "Enter keywords in your web page" />
         <link rel = "stylesheet"
               href = "https://use.typekit.net/rtr2vsr.css" />
         <link rel = "stylesheet" 
               type = "text/css" 
               href = "css/base.css" />
     </head>
     <body>
         <div class = "frame">
             <h1 class = "frame__title">GFG Scroll Loop Menu</h1>
             <div class = "frame__links">
                 <a href =
"https://www.lsbin.org/javascript-tutorial/"
                    class = "frame__link">
                     JavaScript
                 </a>
                 <a href =
"https://www.lsbin.org/css-tutorials/" c
                    lass = "frame__link">
                     CSS
                 </a>
             </div>
             <span class = "frame__button"
                   aria-hidden = "true">
               Close</span>
         </div>
         <nav class = "menu">
             <div class = "menu__item">
                 <a class = "menu__item-inner">
                   Algorithms</a>
             </div>
             <div class = "menu__item">
                 <a class = "menu__item-inner">
                   Data Structures</a>
             </div>
             <div class = "menu__item">
                 <a class = "menu__item-inner">
                   Languages</a>
             </div>
             <div class = "menu__item">
                 <a class = "menu__item-inner">
                   Interview Corner</a>
             </div>
             <div class = "menu__item">
                 <a class = "menu__item-inner">
                   GATE</a>
             </div>
             <div class = "menu__item">
                 <a class = "menu__item-inner">
                   ISRO CS</a>
             </div>
             <div class = "menu__item">
                 <a class = "menu__item-inner">
                   UGC NET CS</a>
             </div>
             <div class = "menu__item">
                 <a class = "menu__item-inner">
                   CS Subjects</a>
             </div>
             <div class = "menu__item">
                 <a class = "menu__item-inner">
                   Web technologies</a>
             </div>
             <div class = "menu__item">
                 <a class = "menu__item-inner">
                   Programming</a>
             </div>
             <div class = "menu__item">
                 <a class = "menu__item-inner">
                   Careers</a>
             </div>
             <div class = "menu__item">
                 <a class = "menu__item-inner">
                   Internship</a>
             </div>
             <div class = "menu__item">
                 <a class = "menu__item-inner">
                   Placement course</a>
             </div>
             <div class = "menu__item">
                 <a class = "menu__item-inner">
                   Geek of the Month</a>
             </div>
         </nav>
         <script src = "js/index.js"></script>
     </body>
</html>

输出如下：

在一开始的时候：