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 相关文章推荐
用js实现的检测浏览器和系统的函数
Apr 09 Javascript
jQuery中$.click()无效问题分析
Jan 29 Javascript
AngularJs中route的使用方法和配置
Feb 04 Javascript
JS实现六位字符密码输入器功能
Aug 19 Javascript
canvas实现图像截取功能
Feb 06 Javascript
jQuery实现radio第一次点击选中第二次点击取消功能
May 15 jQuery
代码详解javascript模块加载器
Mar 04 Javascript
讲解vue-router之命名路由和命名视图
May 28 Javascript
浅谈VueJS SSR 后端绘制内存泄漏的相关解决经验
Dec 20 Javascript
Node.js + express实现上传大文件的方法分析【图片、文本文件】
Mar 14 Javascript
Vue引入Stylus知识点总结
Jan 16 Javascript
OpenLayers3实现图层控件功能
Sep 25 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
回首过去10年中最搞笑的10部动漫,哪一部让你节操尽碎?
2020/03/03 日漫
谈谈PHP语法(2)
2006/10/09 PHP
将FCKeditor导入PHP+SMARTY的实现方法
2015/01/15 PHP
Laravel框架基于中间件实现禁止未登录用户访问页面功能示例
2019/01/17 PHP
PHP SESSION机制的理解与实例
2019/03/22 PHP
Laravel 6 将新增为指定队列任务设置中间件的功能
2019/08/06 PHP
PHP安全之register_globals的on和off的区别
2020/07/23 PHP
jQuery使用手册之 事件处理
2007/03/24 Javascript
TinyMCE 新增本地图片上传功能
2010/11/05 Javascript
深入理解JavaScript系列(6):S.O.L.I.D五大原则之单一职责SRP
2012/01/15 Javascript
JS 实现导航栏悬停效果(续2)
2013/09/24 Javascript
Javascript中的Callback方法浅析
2015/03/15 Javascript
在JavaScript中操作数组之map()方法的使用
2015/06/09 Javascript
slideToggle+slideup实现手机端折叠菜单效果
2017/05/25 Javascript
详解node登录接口之密码错误限制次数(含代码)
2019/10/25 Javascript
vue实现简易图片左右旋转,上一张,下一张组件案例
2020/07/31 Javascript
Python实现以时间换空间的缓存替换算法
2016/02/19 Python
python使用xslt提取网页数据的方法
2018/02/23 Python
设置python3为默认python的方法
2018/10/31 Python
Numpy之将矩阵拉成向量的实例
2019/11/30 Python
Python 获取numpy.array索引值的实例
2019/12/06 Python
在Python中用GDAL实现矢量对栅格的切割实例
2020/03/11 Python
python如何支持并发方法详解
2020/07/25 Python
详解pyqt5的UI中嵌入matplotlib图形并实时刷新(挖坑和填坑)
2020/08/07 Python
Python Pandas数据分析工具用法实例
2020/11/05 Python
Python try except finally资源回收的实现
2021/01/25 Python
html5 CSS过度-webkit-transition使用介绍
2013/07/02 HTML / CSS
iframe跨域的几种常用方法
2019/11/11 HTML / CSS
JD Sports意大利:英国篮球和运动时尚的领导者
2017/10/29 全球购物
七年级音乐教学反思
2014/01/26 职场文书
财务情况说明书范文
2014/05/06 职场文书
119消防日活动总结
2014/08/29 职场文书
公司领导班子民主生活会对照检查材料
2014/10/02 职场文书
2015医德医风个人工作总结
2015/04/02 职场文书
中标通知书
2015/04/17 职场文书
使用ICOM IC-R9500接收机同时测评十台收音机中波接收性能
2022/05/10 无线电