编程 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 相关文章推荐

Textbox控件注册回车事件及触发按钮提交事件具体实现

Mar 04 Javascript

Html5的placeholder属性(IE兼容)实现代码

Aug 30 Javascript

JavaScript实现数字数组正序排列的方法

Apr 06 Javascript

JavaScript常用标签和方法总结

Sep 01 Javascript

微信小程序 Audio API详解及实例代码

Sep 30 Javascript

JS识别浏览器类型(电脑浏览器和手机浏览器)

Nov 18 Javascript

EsLint入门学习教程

Feb 17 Javascript

js实现数字递增特效【仿支付宝我的财富】

May 05 Javascript

JS实现运动缓冲效果的封装函数示例

Feb 18 Javascript

koa+mongoose实现简单增删改查接口的示例代码

May 13 Javascript

Ant Design Pro 下实现文件下载的实现代码

Dec 03 Javascript

javascript使用Blob对象实现的下载文件操作示例

Apr 18 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

php中base_convert()进制数字转换函数实例

2014/11/20 PHP

php图片水印添加、压缩、剪切的封装类实现

2020/04/18 PHP

Linux安装配置php环境的方法

2016/01/14 PHP

Yii2 RESTful中api的使用及开发实例详解

2016/07/06 PHP

PHP实现的网站目录扫描索引工具

2016/09/08 PHP

PHP实现APP微信支付的实例讲解

2018/02/10 PHP

网站被恶意镜像怎么办 php一段代码轻松搞定（全面版）

2018/10/23 PHP

详解php中curl返回false的解决办法

2019/03/18 PHP

yii2.0框架使用 beforeAction 防非法登陆的方法分析

2019/09/11 PHP

在线编辑器的实现原理(兼容IE和FireFox)

2007/03/09 Javascript

jQuery结合PHP+MySQL实现二级联动下拉列表[实例]

2011/11/15 Javascript

简单选项卡 js和jquery制作方法分享

2014/02/26 Javascript

jQuery实现内容定时切换效果完整实例

2016/04/06 Javascript

轻松实现js弹框显示选项

2016/09/13 Javascript

JS实现非首屏图片延迟加载的示例

2018/01/06 Javascript

vue中的自定义分页插件组件的示例

2018/08/18 Javascript

bootstrap与pagehelper实现分页效果

2018/12/29 Javascript

JS学习笔记之原型链和利用原型实现继承详解

2019/05/29 Javascript

用Golang运行JavaScript的实现示例

2019/11/25 Javascript

angula中使用iframe点击后不执行变更检测的问题

2020/05/10 Javascript

Flask SQLAlchemy一对一,一对多的使用方法实践

2013/02/10 Python

Python的垃圾回收机制深入分析

2014/07/16 Python

在Python的Flask框架中构建Web表单的教程

2016/06/04 Python

Django自定义分页与bootstrap分页结合

2021/02/22 Python

Pycharm以root权限运行脚本的方法

2019/01/19 Python

实例讲解Python脚本成为Windows中运行的exe文件

2019/01/24 Python

Python爬虫 scrapy框架爬取某招聘网存入mongodb解析

2019/07/31 Python

django项目登录中使用图片验证码的实现方法

2019/08/15 Python

html5用video标签流式加载的实现

2020/05/20 HTML / CSS

高级Java程序员面试要点

2013/08/02 面试题

党员演讲稿

2014/09/04 职场文书

机械设计专业大学生职业生涯规划书范文

2014/09/13 职场文书

2014年作风建设工作总结

2014/10/29 职场文书

用人单位聘用意向书

2015/05/11 职场文书

tensorflow中的数据类型dtype用法说明

2021/05/26 Python

JavaWeb 入门:Hello Servlet

2021/07/16 Java/Android