编程 Javascript

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程序设计有所帮助。

- Author -

hcqenjoy

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

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