jQuery和CSS3摇摆滚动圆形菜单-插件特效-星河码客

在本教程中我们将使用令人难以置信的旋转和缩放jQuery补丁扎卡里·约翰逊,可以发现在这里.我们将创建一个与小图标菜单,旋转时徘徊。同时,我们将使菜单项扩大和揭示一些菜单的内容,比如链接或一个搜索框。这个菜单我们不会创建一个列表,但每个菜单项div元素。我们将包主要div称为菜单的菜单项。每个项目都有一个图标,链接的内容div元素和标题和段落,我们将添加链接或一个搜索框:

最初,项div将大包围的图标,然后我们将扩大,之后我们将揭示的内容。CSS一般的风格等菜单字体将定义如下:.menu{ width:800px; height:52px; position:relative; top:200px; left:100px; font-family: "Trebuchet MS", sans-serif; font-size: 16px; font-style: normal; font-weight: bold; text-transform: uppercase;}里面的物品将浮动菜单,因为我们希望项目扩大到左边,推动了其他物品:.item{ position:relative; background-color:#f0f0f0; float:right; width:52px; margin:0px 5px; height:52px; border:2px solid #ddd; -moz-border-radius:30px; -webkit-border-radius:30px; border-radius:30px; -moz-box-shadow:1px 1px 3px #555; -webkit-box-shadow:1px 1px 3px #555; box-shadow:1px 1px 3px #555; cursor:pointer; overflow:hidden;}然后我们定义的风格图标(类)的联系以下方式:.link{ left:2px; top:2px; position:absolute; width:48px; height:48px;}.icon_home{ background:transparent url(../images/home.png) no-repeat top left;}.icon_mail{ background:transparent url(../images/mail.png) no-repeat top left;}.icon_help{ background:transparent url(../images/help.png) no-repeat top left;}.icon_find{ background:transparent url(../images/find.png) no-repeat top left;}.icon_photos{ background:transparent url(../images/photos.png) no-repeat top left;}其他内容元素我们将样式如下:.item_content{ position:absolute; height:52px; width:220px; overflow:hidden; left:56px; top:7px; background:transparent; display:none;}.item_content h2{ color:#aaa; text-shadow: 1px 1px 1px #fff; background-color:transparent; font-size:14px;}.item_content a{ background-color:transparent; float:left; margin-right:7px; margin-top:3px; color:#bbb; text-shadow: 1px 1px 1px #fff; text-decoration:none; font-size:12px;}.item_content a:hover{ color:#0b965b;}.item_content p { background-color:transparent; display:none;}.item_content p input{ border:1px solid #ccc; padding:1px; width:155px; float:left; margin-right:5px;}白色将我们可以创建一个漂亮的雕刻文字效果。好吧,让我们添加一些魔法。JAVASCRIPT首先,我们需要添加jQuery脚本包体和其他两个脚本的扎卡里。然后我们将添加以下功能:$('.item').hover( function(){ var $this = $(this); expand($this); }, function(){ var $this = $(this); collapse($this); });function expand($elem){ var angle = 0; var t = setInterval(function () { if(angle == 1440){ clearInterval(t); return; } angle += 40; $('.link',$elem).stop().animate({rotate: '+=-40deg'}, 0); },10); $elem.stop().animate({width:'268px'}, 1000) .find('.item_content').fadeIn(400,function(){ $(this).find('p').stop(true,true).fadeIn(600); });}function collapse($elem){ var angle = 1440; var t = setInterval(function () { if(angle == 0){ clearInterval(t); return; } angle -= 40; $('.link',$elem).stop().animate({rotate: '+=40deg'}, 0); },10); $elem.stop().animate({width:'52px'}, 1000) .find('.item_content').stop(true,true).fadeOut() .find('p').stop(true,true).fadeOut();}为了让事情更简单,我们创建了两个函数,一个用于扩大一个项目和一个用于崩溃。扩展功能将使图标周围旋转4次本身(4 1440 360倍)。我们还将使项目增加动画的增加它的宽度。然后,我们让内容出现,整个div和段落元素。函数将崩溃旋转图标,减少项目的宽度,使内容消失。这就是它!我希望你喜欢它!

jQuery和CSS3摇摆滚动圆形菜单

在线演示积分下载 6毛下载砍两刀下载

文件目录······

暂无数据

猜你喜欢更多»