JavaScript ScrollLoopMenu插件用法示例 _JavaScript滚动循环菜单

【JavaScript ScrollLoopMenu插件用法示例】在本文中, 我们将学习如何实现滚动循环菜单使用基于JavaScript滚动循环菜单插入。它是开发网页时使用的另一种简单且交互式的滚动菜单, 用于获得不错的视觉效果。
注意：请下载JavaScript滚动循环菜单插件在工作文件夹中, 并在HTML代码的开头部分包含必需的文件。

< link href =" https://use.typekit.net/rtr2vsr.css" rel =" stylesheet" type ="text/css"/>
< link href ="https://www.lsbin.com/css/base.css" rel ="stylesheet" type="textcss"/>
< script src ="https://www.lsbin.com/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 = "https://www.lsbin.com/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 = "https://www.lsbin.com/js/index.js"> < /script> < /body> < /html>

输出如下：
在一开始的时候：