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 相关文章推荐
document.getElementById介绍
Sep 13 Javascript
jquery控制select的text/value值为选中状态
Jun 03 Javascript
js改变embed标签src值的方法
Apr 10 Javascript
javascript模拟php函数in_array
Apr 27 Javascript
jQuery css() 方法动态修改CSS属性
Sep 25 Javascript
js表单登陆验证示例
Oct 19 Javascript
js print打印网页指定区域内容的简单实例
Nov 01 Javascript
BootStrap CSS全局样式和表格样式源码解析
Jan 20 Javascript
JS实现HTML页面中动态显示当前时间完整示例
Jul 30 Javascript
Vue-cli3项目引入Typescript的实现方法
Oct 18 Javascript
vue 组件开发原理与实现方法详解
Nov 29 Javascript
vue中实现拖动调整左右两侧div的宽度的示例代码
Jul 22 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
dedecms后台验证码总提示错误的解决方法
2007/03/21 PHP
PHP json_encode() 函数详解及中文乱码问题
2015/11/05 PHP
PHP多维数组遍历方法(2种实现方法)
2015/12/10 PHP
PHP分页初探 一个最简单的PHP分页代码的简单实现
2016/06/21 PHP
详解PHP中的 input属性(隐藏 只读 限制)
2017/08/14 PHP
js apply/call/caller/callee/bind使用方法与区别分析
2009/10/28 Javascript
邮箱下拉自动填充选择示例代码附图
2014/04/03 Javascript
将form表单中的元素转换成对象的方法适用表单提交
2014/05/02 Javascript
jQuery动画特效实例教程
2014/08/29 Javascript
jQuery中hide()方法用法实例
2014/12/24 Javascript
jQuery实现点击小图显示大图代码分享
2015/08/25 Javascript
javascript多物体运动实现方法分析
2016/01/08 Javascript
举例讲解如何判断JavaScript中对象的类型
2016/04/22 Javascript
Bootstrap警告(Alerts)的实现方法
2017/03/22 Javascript
vue 2.0路由之路由嵌套示例详解
2017/05/08 Javascript
node跨域请求方法小结
2017/08/25 Javascript
浅谈JavaScript的innerWidth与innerHeight
2017/10/12 Javascript
JavaScript指定断点操作实例教程
2018/09/18 Javascript
angular4强制刷新视图的方法
2018/10/09 Javascript
为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)
2019/10/14 Javascript
小程序实现列表展开收起效果
2020/07/29 Javascript
微信小程序换肤功能实现代码(思路详解)
2020/08/25 Javascript
详解使用 pyenv 管理多个版本 python 环境
2017/10/19 Python
Pyorch之numpy与torch之间相互转换方式
2019/12/31 Python
python连接手机自动搜集蚂蚁森林能量的实现代码
2021/02/24 Python
加拿大著名时装品牌:SOIA & KYO
2016/08/23 全球购物
ghd澳大利亚官方网站:英国最受欢迎的美发工具品牌
2018/05/21 全球购物
餐饮部总监岗位职责范文
2014/02/13 职场文书
《莫高窟》教学反思
2014/02/25 职场文书
社区精神文明建设汇报材料
2014/08/17 职场文书
护理专业自我评价
2015/03/11 职场文书
2015驻村干部工作总结
2015/04/07 职场文书
2015暑期社会实践个人总结
2015/07/13 职场文书
2016廉洁教育心得体会
2016/01/20 职场文书
八年级作文之我的母亲
2019/12/10 职场文书
CSS精灵图的原理与使用方法介绍
2022/03/17 HTML / CSS