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