wheelnav.js弹跳效果

时间:2016-04-13 11:54:12

标签: javascript html user-interface wheelnav.js

使用wheelnav.js处理饼图菜单。到目前为止,一切进展顺利,但对于我的生活,我似乎没有在wheelnav.js文档中找到有关如何在进行菜单选择时抑制弹跳效果的任何内容。

有关此效果的示例,请查看http://pmg.softwaretailoring.net/,启用'旋转'切换并单击饼图菜单中的数字。选定的选项会旋转到焦点(默认顶部)并弹回到停止位置。

我认为http://wheelnavjs.softwaretailoring.net/examples.html的原始示例会有所帮助,因为该页面上的第一个示例有一个不会反弹的饼图菜单,但是他们已经混淆并缩小了底层示例javascript文件。

非常感谢任何有关在何处查找更多文档或详细示例的提示或提示。

更新:在其网站代码中找到了使用animatetime属性的轮对象的引用。将其设置为较小的数字(如200)会导致车轮旋转得更快但不会反弹。不是一个完美的解决方案,因为我可能希望旋转速度更慢,但在我学会更好的方法之前就足够了。

2 个答案:

答案 0 :(得分:1)

我已经使用了wheelnav.js并且也联系了他的作者以解决我的问题,他已经给我正确答案了解我的问题,但你找不到适合这个jquery的文档,你也可以问他(给他发邮件)如果需要你的问题

您可以使用以下代码 indexWheel.animatetime = 2000; //通过这个你可以设置更快/更慢的速度 强文


        window.onload = function () {
            var values = ['1','2','3','4'];
            var percent = [51,11,30,8];            
            var tool = ["1234 (40.10%) \n Companies (9)","1234 (40.10%) \n Companies (9)","1234 (40.10%) \n Companies (9)","1234 (40.10%) \n Companies (9)"];           

        var indexWheel = new wheelnav("indexDiv");
        indexWheel.animatetime = 2000;
            indexWheel.navItemsContinuous = true;
            indexWheel.navAngle = 0;            
            indexWheel.wheelRadius = indexWheel.wheelRadius * 0.9;
            indexWheel.slicePathFunction = slicePath().PieSlice;
            indexWheel.sliceSelectedTransformFunction = sliceTransform().MoveMiddleTransform;
            indexWheel.colors = colorpalette.goldenyellow;
            indexWheel.initWheel(values);
            indexWheel.createWheel(values);
            indexWheel.setTooltips(tool);
        };
    

答案 1 :(得分:1)

animateeffect的其他信息。

link的可用效果有this page。按“动画”按钮,然后点击“缓动类型”链接。

P.S。我知道缺乏深入的文档,其中应包含所有属性的参考。这是我的待办事项列表,但这是一个侧面项目,请耐心等待。 ;)感谢您的反馈!