jQuery实现个性翻牌效果导航菜单的方法


Posted in Javascript onMarch 09, 2015

本文实例讲述了jQuery实现个性翻牌效果导航菜单的方法。分享给大家供大家参考。具体实现方法如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>jQuery个性翻牌效果的导航菜单</title>

<meta http-equiv="content-type" content="text/html;charset=gb2312">

<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="js/jquery1.3.2.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>

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
基于Jquery的简单图片切换效果
Jan 06 Javascript
jquery下checked取值问题的解决方法
Aug 09 Javascript
如何使用jQUery获取选中radio对应的值(一句代码)
Jun 03 Javascript
jquery实现点击向下展开菜单项(伸缩导航)效果
Aug 22 Javascript
JavaScript中利用各种循环进行遍历的方式总结
Nov 10 Javascript
基于jQuery实现Accordion手风琴自定义插件
Oct 13 Javascript
详解angularJs指令的3种绑定策略
Apr 13 Javascript
JS非空验证及邮箱验证的实例
Aug 11 Javascript
详解如何模拟实现node中的Events模块(通俗易懂版)
Apr 15 Javascript
uni app仿微信顶部导航条功能
Sep 17 Javascript
bootstrapValidator表单校验、更改状态、新增、移除校验字段的实例代码
May 19 Javascript
详解JavaScript中的执行上下文及调用堆栈
Apr 29 Javascript
jQuery实现可用于博客的动态滑动菜单
Mar 09 #Javascript
JQuery操作元素的css样式
Mar 09 #Javascript
jQuery实现仿美橙互联两级导航菜单的方法
Mar 09 #Javascript
jquery获取及设置outerhtml的方法
Mar 09 #Javascript
jQuery给动态添加的元素绑定事件的方法
Mar 09 #Javascript
jquery滚动加载数据的方法
Mar 09 #Javascript
jQuery晃动层特效实现方法
Mar 09 #Javascript
You might like
浅析echo(),print(),print_r(),return之间的区别
2013/11/27 PHP
php统计时间和内存使用情况示例分享
2014/03/13 PHP
php 访问oracle 存储过程实例详解
2017/01/08 PHP
JS子父窗口互相操作取值赋值的方法介绍
2013/05/11 Javascript
使用jquery获取网页中图片高度的两种方法
2013/09/26 Javascript
jQuery操作input值的各种方法总结
2013/11/21 Javascript
使用jquery实现以post打开新窗口
2014/03/19 Javascript
28个常用JavaScript方法集锦
2015/01/14 Javascript
jQuery实现长按按钮触发事件的方法
2015/02/02 Javascript
javaScript数组迭代方法详解
2016/04/14 Javascript
基于bootstrap按钮式下拉菜单组件的搜索建议插件
2017/03/25 Javascript
JS原生数据双向绑定实现代码
2017/08/14 Javascript
element form 校验数组每一项实例代码
2019/10/10 Javascript
基于JavaScript的数据结构队列动画实现示例解析
2020/08/06 Javascript
Python读取环境变量的方法和自定义类分享
2014/11/22 Python
python打开url并按指定块读取网页内容的方法
2015/04/29 Python
python 识别图片中的文字信息方法
2018/05/10 Python
python之cv2与图像的载入、显示和保存实例
2018/12/05 Python
基于Django ORM、一对一、一对多、多对多的全面讲解
2019/07/26 Python
Django3.0 异步通信初体验(小结)
2019/12/04 Python
tensorflow实现训练变量checkpoint的保存与读取
2020/02/10 Python
Python 定义只读属性的实现方式
2020/03/05 Python
Python实现CAN报文转换工具教程
2020/05/05 Python
Python  word实现读取及导出代码解析
2020/07/09 Python
Python安装Bs4的多种方法
2020/11/28 Python
CSS3中各种颜色属性的使用教程
2016/05/17 HTML / CSS
伦敦剧院及景点门票:Encore Tickets
2018/07/01 全球购物
施华洛世奇波兰官网:SWAROVSKI波兰
2019/06/18 全球购物
财务会计毕业生个人求职信
2014/02/03 职场文书
婚前协议书范本
2014/04/15 职场文书
法院反腐倡廉心得体会
2014/09/09 职场文书
我们的节日重阳节活动总结
2015/03/24 职场文书
实习报告怎么写
2019/06/20 职场文书
导游词之鲁迅祖居
2019/10/17 职场文书
基于Redis延迟队列的实现代码
2021/05/13 Redis
Python中三种花式打印的示例详解
2022/03/19 Python