简单的jQuery翻牌效果导航菜单
- - 可咔酷 | 网络杂货铺前几天，有人在Q问那种翻牌效果的广告怎么实现，抽空整了个简单的jQuery翻牌效果的导航菜单，其实说简单也不是很简单，重要的是想好整个过程的思路就好下手了，不整demo了，直接贴代码. 简单的jQuery翻牌效果导航菜单 . 预览效果时左下角会提示错误，而且看不到效果，刷新一下就可以看到效果了.
简单的jQuery翻牌效果导航菜单
标签：
前端开发
jQuery
代码实例
翻牌效果
| 发表时间：2012-01-12 10:41 | 作者：直觉
出处：http://www.kekaku.com
前几天，有人在Q问那种翻牌效果的广告怎么实现，抽空整了个简单的jQuery翻牌效果的导航菜单，其实说简单也不是很简单，重要的是想好整个过程的思路就好下手了，不整demo了，直接贴代码。
<!DOCTYPE>
<html>
<head>
<title>简单的jQuery翻牌效果导航菜单</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<style type="text/css">
ul, li {
list-style: none;
padding: 0;
margin: 0;
}
#btncell {
width: 300px;
height: 100px;
border: 1px solid #777;
margin: 50px auto;
}
#btncell li {
width: 100px;
float: left;
height: 50px;
font-size: 14px;
text-align: center;
line-height: 28px;
position: relative;
z-index: 1;
}
#btncell li a {
display: block;
height: 28px;
border: 2px solid #333;
text-decoration: none;
width: 50px;
background: #888;
overflow: hidden;
position: absolute;
left: 25px;
top: 10px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script>
<script language="javascript">
var nummove = 0;
var numout = 0;
$(function(){
$("#btncell li").hover(function(){
if (nummove == 0) {
nummove = 1;
$("a", this).animate({
height: "0px",
top: "25px"
}, 80, function(){
nummove = 0;
});
$("a", this).animate({
height: "28px",
top: "10px"
}, 80);
$("a", this).css("background", "yellow");
}
}, function(){
if (numout == 0) {
numout = 1;
$("a", this).animate({
height: "0px",
top: "25px"
}, 80, function(){
numout = 0;
});
$("a", this).animate({
height: "28px",
top: "10px"
}, 80);
$("a", this).css("background", "#888");
numout = 0;
}
})
$("#btncell li a").click(function(){
$(this).parents("li").css("z-index", "2")
$(this).animate({
height: "558px",
top: "-255px",
width: "1000px",
left: "-460px",
opacity: 'toggle',
lineHeight: '558px',
fontSize: '500px'
}, 1000);
$(this).animate({
height: "28px",
top: "10px",
width: "50px",
left: "25px",
opacity: 'toggle',
lineHeight: '28px',
fontSize: '12px'
}, 400);
$(this).parents("li").css("z-index", "1")
})
})
</script>
</head>
<body>
预览效果时左下角会提示错误，而且看不到效果，刷新一下就可以看到效果了。
<ul id="btncell">
<li>
<a href="#">1</a>
</li>
<li>
<a href="#">2</a>
</li>
<li>
<a href="#">3</a>
</li>
<li>
<a href="#">4</a>
</li>
<li>
<a href="#">5</a>
</li>
<li>
<a href="#">6</a>
</li>
</ul>
</body>
</html>| 您可能也喜欢： | ||||
 在桌面當起老師，翻來翻去的黑板桌 (@mydesy) |
 Vespas改賣辦公傢俱？西班牙設計工作室回收改造老舊偉士牌機車 (@mydesy) |
 基于jquery仿QQiPhone首页 |
基于CSS & jQuery动画导航条 |
 8个很棒的 jQuery 倒计时插件和教程 |
| 无觅 | ||||
相关 [jquery 效果 导航] 推荐：
Jquery easyui 下loaing效果
- - CSDN博客推荐文章beforeSend:ajaxLoading,\\发送请求前打开进度条. ajaxLoadEnd();\\任务执行成功，关闭进度条. 作者：songhfu 发表于2013-8-10 17:24:30 原文链接. 阅读：15 评论：0 查看评论.
10个最具创意的jQuery导航插件推荐
- qqinxl - ITeye资讯频道这是一个采用jQuery实现的右键菜单，拥有与windows相同的功能和外观. 这件插件可用于帮助我们创建漂亮的向导/步骤指示器. 一个漂亮的插件用于创建自定义选项卡. 可以利用鼠标滚轮和方向进行滑动操作. 让你能够用不同的效果创建吸引人的垂直菜单. 一个利用CSS3技术实现的侧边面板. 可以在这个侧边面板放置各种元素，从邮件收件箱到自定义表单.
10个有趣强大的 jQuery导航教程/插件分享
- Kai - ITeye资讯频道使用jQuery能够做出令人称奇的效果，而且轻而易举. 在导航制作领域，jQuery没有对手. 虽然并不是所有的人都精通jQuey，但学会并使用它们并不难. 网上有许多的jQuery导航教程，可以帮助你学习如何在为用户导航之余为他们增加一些简单而有趣的效果体验. 如你所知，近来有一大批竞争的javascript库出现.
绚丽而又实用的jQuery和CSS3导航菜单
- - CSDN博客推荐文章我们说导航菜单是网站的一扇门，然而精美便捷的导航更是能让用户方便地游走在网站的各个角落，更重要的是，能让用户牢牢地记住这扇大门，记住这个网站. 所以很多网站设计师对网站导航的设计非常重视. 下面我就向大家分享几款个人觉得非常不错的jQuery和CSS3导航，每一款都挺实用的，而且都是开源的，提供下载源码.
20篇教你得到酷炫效果的JQuery教程
- 正宗 - 帕兰映像我们都喜爱jquery带来的梦幻效果. 本之列举的教程标题不同，但它们都带有不同的酷炫视觉效果. 跟着它们逐步重建你的设计，又或是将这些令人震憾的特效融入你的设计中. 想打造一个让人过目不忘的专属网络文件夹?这个特效是不错的示例. 流行的相片墙加上简洁的特效，没有啰嗦的文字堆砌，立刻抓住用户的注意力.
20 个 jQuery 超酷视觉效果构建教程推荐
- qqinxl - ITeye资讯频道作为web开发程序员来说，我们都非常喜欢jQuery构造的超酷视觉效果. 本文中我们将精选一组jQuery效果教程. 大家将从这些教程中学习如何开发超级酷的视觉效果特效. 根据这些教程，大家可以一步一步构建自己的视觉特效. 创建一个基于HTML5的代表作选辑. 这篇教程中，将会介绍如何使用HTML5和jQuery来创建自己超酷的个人代表作选集.
帮助你生成翻页效果的jQuery插件 – bookblock
- - 前端观察今天我们介绍一个漂亮的jQuery翻页效果插件 – bookblock，使用它可以创建动态的类似书本翻页效果的幻灯. 这个插件依赖于 jQuery++，这个类库是一个jQuery的扩展类库，这里使用了它的swipe事件. 主要html代码如下，生成需要展示的图片内容：. 希望大家喜欢这个插件，如果你有任何问题，请给我们留言，谢谢.
JQuery EasyUi之界面设计——前言与界面效果（一）
- - 博客园_首页如果冯巩的开场白是“观众朋友们，我想死你们了”，那么我的开场白是“最近一直很忙，很久没有发文了”. 前面说过了EXT.NET，这里顺便再说说JQuery EasyUI. 为啥我会选择JQuery EasyUI呢. 基本的组件都用，即“麻雀虽小五脏俱全”. 使用简洁方便，比如支持html+js. 世上没有完美的产品，而且其对IE6的兼容性还存在一些问题，但相比extjs，其还是很方便阅读和修改的.
jQuery 教程：简单的遮罩弹窗效果
- - 我爱水煮鱼遮罩弹出效果就是网页中背景变成半透明，然后在屏幕中间出现一个菜单之类的东西. 这种效果在网上很常见，例如：QQ空间浏览相册等. 这种效果的好处就是，可以让用户聚焦到弹出的菜单中. 神说，有代码的文章，应该有个 Demo ，于是就有了 Demo. 首先先来分析一下这个过程：触发某个事件（例如点击按钮），然后出现一个背景遮罩上面还有一个内容层.