jquery+css3动画弧形弹出菜单

jquery+css3动画弧形弹出菜单

大小:32KB更新:2017-12-14 14:08

类别:综合控件系统:Win7, WinAll

包名:

立即下载(32KB)
  • jquery+css3动画弧形弹出菜单 0

jquery+css3动画弧形弹出菜单是js特效代码制作的一个菜单弹出效果,单击展开菜单,会扇形展开其下的子菜单,比较适用的移动端的软件制作,有需要的朋友欢迎来下载试用

js代码简介:

JS代码就是JavaScript编写的脚本文件的代码。用单独文件保存,扩展名为.JS

JS即Javascript,Javascript是一种由Netscape的LiveScript发展而来的脚本语言,主要目的是为了解决服务器终端语言,比如Perl,遗留的速度问题。当时服务端需要对数据进行验证,由于网络速度相当缓慢,只有28.8kbps,验证步骤浪费的时间太多。于是Netscape的浏览器Navigator加入了Javascript,提供了数据验证的基本功能。

jquery+css3动画弧形弹出菜单

代码引用:

<script type="text/javascript" src="js/jquery.min.js"></script>

<script type="text/javascript">

(function(){

var ul=$("#navs"),li=$("#navs li"),i=li.length,n=i-1,r=120;

ul.click(function(){

$(this).toggleClass('active');

if($(this).hasClass('active')){

for(var a=0;a<i;a++){

    li.eq(a).css({

        'transition-delay':""+(50*a)+"ms",

        '-webkit-transition-delay':""+(50*a)+"ms",

        '-o-transition-delay':""+(50*a)+"ms",

        'transform':"translate("+(r*Math.cos(90/n*a*(Math.PI/180)))+"px,"+(-r*Math.sin(90/n*a*(Math.PI/180)))+"px",

        '-webkit-transform':"translate("+(r*Math.cos(90/n*a*(Math.PI/180)))+"px,"+(-r*Math.sin(90/n*a*(Math.PI/180)))+"px",

        '-o-transform':"translate("+(r*Math.cos(90/n*a*(Math.PI/180)))+"px,"+(-r*Math.sin(90/n*a*(Math.PI/180)))+"px",

        '-ms-transform':"translate("+(r*Math.cos(90/n*a*(Math.PI/180)))+"px,"+(-r*Math.sin(90/n*a*(Math.PI/180)))+"px"

    });

}

}else{

li.removeAttr('style');

}

});

})($);

</script>

显示全部

同类相关
玩家评论
我要跟贴
取消
最新手游