1 Star 3 Fork 0

los_dust/旋转菜单插件

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README

rotatingMenu

基于原生js实现的圆形菜单导航旋转切换,支持手动修改焦点图,可自定义焦点图动画,支持动态添加、删除元素等

HTML内容

<div class="circleCenter" id="circlecenter">
    <div class="bgBox">
        <img src="img/bg.jpg"/>
    </div>
    <div class='rotation-turn'>
        <div class='rotation-item'>
            <div class="rotation-animat">
                <img src="img/img1.png"/>
            </div>
        </div>
    </div>
    <div class='rotation-turn'>
        <div class='rotation-item'>
            <div class="rotation-animat">
                <img src="img/img2.png"/>
            </div>
        </div>
    </div>
    <div class='rotation-turn'>
        <div class='rotation-item'>
            <div class="rotation-animat">
                <img src="img/img3.png"/>
            </div>
        </div>
    </div>
</div>

模块背景

<div class="bgBox">
    <img src="img/bg.jpg"/>
</div>

单个模块结构(支持动态添加)

<div class='rotation-turn'>
    <div class='rotation-item'>
        <div class="rotation-animat">
            <img src="img/img1.png"/>
        </div>
    </div>
</div>

每个item自身动画,默认是放大 (可自定义)

<div class="rotation-animat">
    <img src="img/img3.png"/>
</div>

初始化 Rotation

参数列表

radius:
    类型:Number;
    默认值:200;
    是否必选:false;
    功能:大圆半径;
focusindex:
    类型:Number;
    默认值:1;
    是否必选:false;
    功能:焦点图位置,位置排列规则是按第一象限到第四象限顺时针的方向算起
speed:
    类型:Number;
    默认值:1000;
    是否必选:false;
    功能:旋转速率,单位(毫秒)
speed:
    类型:Number;
    默认值:1000;
    是否必选:false;
    功能:旋转速率,单位(毫秒)
callback:
    类型:Function;
        Function有两个两个参数:ele(触发事件的节点对象);index(触发事件的节点对象下标);this指向Rotation对象
    是否必选:false;
    功能:触发旋转时的回调函数

属性列表

activeSlide:
    功能:获取当前焦点图dom节点的下标

方法列表

init(a):
    功能:初始化Rotation;
    参数a:
        类型:Boole;
        是否必选:false;
        使用:当动态添加元素后,初始化Rotation时,传true;
              其他为false;
selectedMod(a,b):
    功能:动态选中指定下标的元素;
    参数a:
        类型:Number;
        是否必选:true;
        使用:需要选中的元素的下标;
    参数b:
        类型:Boole;
        是否必选:false;
        默认值:false;
        使用:是否触发callback;true触发;false不触发;
destroy(a):
    功能:销毁Rotation;
    参数a:
        类型:Boole;
        是否必选:false;
        默认值:true;
        使用:
            true: 彻底销毁Rotation对象,释放内存
            false:只是清除绑定的事件,可通过init恢复

空文件

简介

旋转菜单插件 展开 收起
JavaScript
取消

发行版

暂无发行版

贡献者

全部

近期动态

不能加载更多了
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
JavaScript
1
https://gitee.com/los_dust/rotatingMenu.git
git@gitee.com:los_dust/rotatingMenu.git
los_dust
rotatingMenu
旋转菜单插件
master

搜索帮助