jQuery液态式环形按钮菜单_Html Css3环形菜单特效
2016-07-19 12:12:08  By: dwtedx

分享一个jQuery液态式环形按钮菜单的特效、当用户点击主按钮的时候、按钮会像液体一样变形、有一种拖拽的感觉、并分离出3个子菜单按钮、这3个按钮可自定义的、效果图如下、有需要的朋友可以在下面下载Demo

jquery环形按钮菜单


Html代码

<div class="htmleaf-container">
    <div class=´content´>
        <div class=´menu´>
          <div class=´menu-wrapper´>
            <ul class=´menu-items´>
              <li class=´menu-item´>
                <button class=´menu-item-button´>
                  <i class=´fa fa-reply-all´></i>
                </button>
                <div class=´menu-item-bounce´></div>
              </li>
              <li class=´menu-item´>
                <button class=´menu-item-button´>
                  <i class=´fa fa-inbox´></i>
                </button>
                <div class=´menu-item-bounce´></div>
              </li>
              <li class=´menu-item´>
                <button class=´menu-item-button´>
                  <i class=´fa fa-trash´></i>
                </button>
                <div class=´menu-item-bounce´></div>
              </li>
            </ul>
            <button class=´menu-toggle-button´>
              <i class=´fa fa-plus menu-toggle-icon´></i>
            </button>
          </div>
        </div>
    </div>
</div>


打开菜单的JavaScript代码

function openMenu(){
    $(".menu-item").each(function(i){
        var delay=i*0.08;

        var $bounce=$(this).children(".menu-item-bounce");

        TweenMax.fromTo($bounce,0.2,{
            transformOrigin:"50% 50%"
        },{
            delay:delay,
            scaleX:0.8,
            scaleY:1.2,
            force3D:true,
            ease:Quad.easeInOut,
            onComplete:function(){
                TweenMax.to($bounce,0.15,{
                    // scaleX:1.2,
                    scaleY:0.7,
                    force3D:true,
                    ease:Quad.easeInOut,
                    onComplete:function(){
                        TweenMax.to($bounce,3,{
                            // scaleX:1,
                            scaleY:0.8,
                            force3D:true,
                            ease:Elastic.easeOut,
                            easeParams:[1.1,0.12]
                        })
                    }
                })
            }
        });

        TweenMax.to($(this).children(".menu-item-button"),0.5,{
            delay:delay,
            y:distance,
            force3D:true,
            ease:Quint.easeInOut
        });
    })
}


jQuery液态式环形按钮菜单特效源代码下载链接: 液态拖拽按钮菜单 密码: dd5g

若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力

想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号(ddblogs)

或者你也可以关注我的新浪微博、了解DD博客的最新动态:DD博客官方微博(dwtedx的微博)

如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教

为保证及时回复、可以使用博客留言板给我留言: DD博客留言板(dwtedx的留言板)

感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛


快速评论


技术评论

  • 该技术还没有评论、赶快抢沙发吧...
DD记账
top
+