最新赞助活动温馨提示:自愿赞助服务器费用,学生和没有工作的整站资源免费下载!
头像

jQuery以圆形动画打开菜单

来源:http://www.erdangjiade.com/ 沐浴春风 2015-12-24 18:16浏览(1579)

用手机打开演示页面会看到右上角有一个圆形菜单按钮,打开它主菜单会以圆形动画展现出来,右上角也会有关闭按钮哦。

0、请不要问“在不在”之类的问题,有问题直接问!1、学生或暂时没有工作的童鞋,整站资源免费下载!2、¥9.9充值终身VIP会员,加我微信,826096331 拉你进VIP群学习!3、程序员加油,技术改变世界。在线 充值

jQuery以圆形动画打开菜单
分类:导航菜单 > 动画导航 难易:中级
查看演示 下载资源 下载积分: 30 积分

菜单结构

<nav> 
    <ul class="cd-primary-nav"> 
        <li><a href="http://www.erdangjiade.com">首页</a></li> 
        <li><a href="http://www.erdangjiade.com/js">jQuery</a></li> 
        <li><a href="http://www.erdangjiade.com/php">PHP</a></li> 
        <li><a href="http://www.erdangjiade.com/templates">模板</a></li> 
    </ul> 
</nav>
var overlayNav = $('.cd-overlay-nav'), 
        overlayContent = $('.cd-overlay-content'), 
        navigation = $('.cd-primary-nav'), 
        toggleNav = $('.cd-nav-trigger'); 
 
//inizialize navigation and content layers 
layerInit(); 
$(window).on('resize'function() { 
    window.requestAnimationFrame(layerInit); 
}); 
 
//open/close the menu and cover layers 
toggleNav.on('click'function() { 
    if (!toggleNav.hasClass('close-nav')) { 
        //it means navigation is not visible yet - open it and animate navigation layer 
        toggleNav.addClass('close-nav'); 
 
        overlayNav.children('span').velocity({ 
            translateZ: 0
            scaleX: 1
            scaleY: 1
        }500'easeInCubic'function() { 
            navigation.addClass('fade-in'); 
        }); 
    } else { 
        //navigation is open - close it and remove navigation layer 
        toggleNav.removeClass('close-nav'); 
 
        overlayContent.children('span').velocity({ 
            translateZ: 0
            scaleX: 1
            scaleY: 1
        }500'easeInCubic'function() { 
            navigation.removeClass('fade-in'); 
 
            overlayNav.children('span').velocity({ 
                translateZ: 0
                scaleX: 0
                scaleY: 0
            }0); 
 
            overlayContent.addClass('is-hidden').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend'function() { 
                overlayContent.children('span').velocity({ 
                    translateZ: 0
                    scaleX: 0
                    scaleY: 0
                }0function() { 
                    overlayContent.removeClass('is-hidden'
                }); 
            }); 
            if ($('html').hasClass('no-csstransitions')) { 
                overlayContent.children('span').velocity({ 
                    translateZ: 0
                    scaleX: 0
                    scaleY: 0
                }0function() { 
                    overlayContent.removeClass('is-hidden'
                }); 
            } 
        }); 
    } 
});
function layerInit() { 
    var diameterValue = (Math.sqrt(Math.pow($(window).height(), 2) + Math.pow($(window).width(), 2)) * 2); 
    overlayNav.children('span').velocity({ 
        scaleX: 0
        scaleY: 0
        translateZ: 0
    }50).velocity({ 
        height: diameterValue + 'px'
        width: diameterValue + 'px'
        top: -(diameterValue / 2) + 'px'
        left: -(diameterValue / 2) + 'px'
    }0); 
 
    overlayContent.children('span').velocity({ 
        scaleX: 0
        scaleY: 0
        translateZ: 0
    }50).velocity({ 
        height: diameterValue + 'px'
        width: diameterValue + 'px'
        top: -(diameterValue / 2) + 'px'
        left: -(diameterValue / 2) + 'px'
    }0); 
}
标签: 手机菜单
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/612.html
评论0
头像

友情提示:垃圾评论一律封号 加我微信:826096331拉你进VIP群学习群

1 2