wheelnav.js 是一个基于 SVG 的捕获鼠标滚动的动态导航菜单组件

wheelnav.js 是一个基于 SVG 的捕获鼠标滚动的动态导航菜单组件

wheelnav.js 是一个基于 SVG 的捕获鼠标滚动的动态导航菜单组件。它可以是一个派菜单(径向菜单,循环菜单),选项卡导航,自菜单,选项按钮,复选框等等。

使用方式:

第一步引入bfwone 加载依赖项raphael.min及raphael.icons

第二步use插件

第三步配置参数

var wheel = new wheelnav("wheelDiv");//滚动条
wheel.createWheel(["Thank you", "for", "download", icon.fave]);//滚动条内容
wheel.navigateWheel(2);//滑动到

代码示例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=raphael.min|raphael.icons.min&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(["wheelnav"], function() {
                var wheel = new wheelnav("wheelDiv");
                wheel.createWheel(["Thank you", "for", "download", icon.fave]);
                wheel.navigateWheel(2);

            });
        });
    </script>
    <style>
    body{
        padding: 0;
        margin: 0;
    }
    #wheelDiv{
        height: 100vh;
    }
    </style>
</head>
<body>
  <div id="wheelDiv"></div>

</body>
</html>


官网:http://wheelnavjs.softwaretailoring.net/

立即下载wheelnav.js查看所有js插件

网友评论0

程序员在线工具箱