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 执行顺序
Dec 18 Javascript
关于JS数组追加数组采用push.apply的问题
Jun 09 Javascript
jQuery中data()方法用法实例
Dec 27 Javascript
Node.js中的流(Stream)介绍
Mar 30 Javascript
JavaScript数组对象赋值用法实例
Aug 04 Javascript
Angular ng-repeat遍历渲染完页面后执行其他操作详细介绍
Dec 13 Javascript
jQuery ajax的功能实现方法详解
Jan 06 Javascript
React为 Vue 引入容器组件和展示组件的教程详解
May 03 Javascript
修改node.js默认的npm安装目录实例
May 15 Javascript
jQuery AJAX应用实例总结
May 19 jQuery
Vue中正确使用Element-UI组件的方法实例
Oct 13 Javascript
如何实现小程序与小程序之间的跳转
Nov 04 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设计模式之解释器模式的深入解析
2013/06/13 PHP
Thinkphp中volist标签mod控制一定记录的换行BUG解决方法
2014/11/04 PHP
用JavaScript获取网页中的js、css、Flash等文件
2006/12/20 Javascript
对象的类型:本地对象(1)
2006/12/29 Javascript
(currentStyle)javascript为何有时用style得不到已设定的CSS的属性
2007/08/15 Javascript
javascript中字符串拼接需注意的问题
2010/07/13 Javascript
javascript学习笔记(一) 在html中使用javascript
2012/06/18 Javascript
浅谈Sizzle的“编译原理”
2015/04/14 Javascript
通过实例理解javascript中没有函数重载的概念
2015/06/03 Javascript
基于JavaScript实现移动端点击图片查看大图点击大图隐藏
2015/11/04 Javascript
jquery插件EasyUI中form表单提交实例分享
2016/01/11 Javascript
学习Bootstrap滚动监听 附调用方法
2016/07/02 Javascript
JavaScript学习笔记整理_setTimeout的应用
2016/09/19 Javascript
JS实现探测网站链接的方法【测试可用】
2016/11/08 Javascript
react-router中的属性详解
2017/06/01 Javascript
vue-resource:jsonp请求百度搜索的接口示例
2019/11/09 Javascript
python基础教程之类class定义使用方法
2014/02/20 Python
Python中的作用域规则详解
2015/01/30 Python
Python的Django框架中的数据库配置指南
2015/07/17 Python
详解如何利用Cython为Python代码加速
2018/01/27 Python
python图像和办公文档处理总结
2019/05/28 Python
Python日期格式和字符串格式相互转换的方法
2020/02/18 Python
Python错误的处理方法
2020/06/23 Python
详解基于Scrapy的IP代理池搭建
2020/09/29 Python
python通过cython加密代码
2020/12/11 Python
css3中检验表单的required,focus,valid和invalid样式
2014/02/21 HTML / CSS
SISLEY希思黎官方旗舰店:享誉全球的奢华植物美容品牌
2018/04/25 全球购物
经典c++面试题五
2014/12/17 面试题
中专生职业生涯规划书范文
2014/01/10 职场文书
社会学专业求职信
2014/02/24 职场文书
2014年庆祝国庆65周年演讲稿
2014/09/21 职场文书
正风肃纪查摆剖析材料
2014/10/10 职场文书
审计局2014法制宣传日活动总结
2014/11/01 职场文书
世界红十字日活动总结
2015/02/10 职场文书
2019朋友新婚祝福语精选
2019/10/10 职场文书
关于redisson缓存序列化几枚大坑说明
2021/08/04 Redis