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

javascript新手语法小结

Jun 15 Javascript

新鲜出炉的js tips提示效果

Apr 03 Javascript

jQuery模拟点击A标记示例参考

Apr 17 Javascript

浅谈Sizzle的“编译原理”

Apr 14 Javascript

JavaScript时间转换处理函数

Apr 14 Javascript

js实现字符串和数组之间相互转换操作

Jan 12 Javascript

jQuery AJAX timeout 超时问题详解

Jun 21 Javascript

js模态对话框使用方法详解

Feb 16 Javascript

JS字符串长度判断,超出进行自动截取的实例(支持中文)

Mar 06 Javascript

React Native之prop-types进行属性确认详解

Dec 19 Javascript

浅析vue插槽和作用域插槽的理解

Apr 22 Javascript

微信小程序获取复选框全选反选选中的值(实例代码)

Dec 17 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页面缓存ob系列函数介绍

2012/10/18 PHP

PHP实现CSV文件的导入和导出类

2015/03/24 PHP

PHP Include文件实例讲解

2019/02/15 PHP

PHP getID3类的使用方法学习笔记【附getID3源码下载】

2019/10/18 PHP

js登录弹出层特效

2014/03/07 Javascript

老生常谈 js中this的指向

2016/06/30 Javascript

利用原生js和jQuery实现单选框的勾选和取消操作的方法

2016/09/04 Javascript

谈谈JavaScript数组常用方法总结

2017/01/24 Javascript

微信小程序实现图片懒加载的示例代码

2017/12/13 Javascript

AngularJs1.x自定义指令独立作用域的函数传入参数方法

2018/10/09 Javascript

Vue父组件如何获取子组件中的变量

2019/07/24 Javascript

如何基于layui的laytpl实现数据绑定的示例代码

2020/04/10 Javascript

Python中自定义函数的教程

2015/04/27 Python

Python爬虫之xlml解析库(全面了解)

2017/08/08 Python

全面分析Python的优点和缺点

2018/02/07 Python

Python基于递归实现电话号码映射功能示例

2018/04/13 Python

python对html过滤处理的方法

2018/10/21 Python

python获取中文字符串长度的方法

2018/11/14 Python

python Tkinter版学生管理系统

2019/02/20 Python

django的ORM模型的实现原理

2019/03/04 Python

pytorch nn.Conv2d()中的padding以及输出大小方式

2020/01/10 Python

新年福利来一波之Python轻松集齐五福(demo)

2020/01/20 Python

关于tf.nn.dynamic_rnn返回值详解

2020/01/20 Python

10分钟入门CSS3 Animation

2018/12/25 HTML / CSS

大学生职业生涯规划书模板

2014/01/18 职场文书

班级安全教育实施方案

2014/02/23 职场文书

教师党员公开承诺事项

2014/05/28 职场文书

学校爱国卫生月活动总结

2014/06/25 职场文书

公民授权委托书

2014/10/15 职场文书

公路局群众路线教育实践活动第一阶段工作汇报

2014/10/25 职场文书

学习普通话的体会

2014/11/07 职场文书

答谢词范文

2015/01/05 职场文书

小区保洁员岗位职责

2015/04/10 职场文书

农村党支部承诺书

2015/04/30 职场文书

Python基础之hashlib模块详解

2021/05/06 Python

jQuery实现广告显示和隐藏动画

2021/07/04 jQuery