2010 四月 | web标准学习

jquery动态菜单效果

这个我在网上看到的一位大牛写的jquery动态菜单，写的真好，我本来想学着自己写一个但是人家写的太好自己写的不行。所以今天我就把这个代码放上来供大家学习参考这位大牛写的代码注释也足够清楚大家可以细细研究。多余的话就不多说了，唉对了祝大家五一玩的开心！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>jOuery:动态下滑菜单演示</title> <style> /*------------------------*/ #content { width: 760px; margin: 50px auto; margin-bottom:0; padding:20px 20px 40px; background: #FFF; border: 1px solid #CCC; } /*------------------------*/ .menu { height: 45px; display: block; } .menu ul { list-style: none; padding: 0; margin: 0; } .menu ul li { float: left; /* 菜单子元素的内容超出不可见 */ overflow: hidden; position: relative; text-align: center; line-height: 45px; } .menu ul li a { /* 必须是相对定位 */ position: relative; display: block; width: 110px; height: 45px; font-family: Arial; font-size: 11px; font-weight: bold; letter-spacing: 1px; text-transform: uppercase; text-decoration: none; cursor: pointer; } .menu ul li a span { /* 所有层将使用绝对定位 */ position: absolute; left: 0; width: 110px; } .menu ul li a span.out { top: 0px; } .menu ul li a span.over, .menu ul li a span.bg { /* 起初.over层和.bg层相对a元素-45px以达到隐藏 */ top: -45px; } /** 完整版示例 **/ #menu { background:url(http://www.xh-css.cn/jquery/images/bg_menu.gif) scroll 0 -1px repeat-x; border:1px solid #CCC; } #menu ul li a { color: #000; } #menu ul li a span.over { color: #FFF; } #menu ul li span.bg { height: 45px; background: url(http://www.xh-css.cn/jquery/images/bg_over.gif) center center no-repeat; } /** 简化版示例 **/ #menu2 { background:#45A8DF; } #menu2 ul li a { color:#FFF; } #menu2 ul li a span.over { background: #A6DD00; color:#333; } #menu2 ul li.nav1 a span.over { background: #fea274; } #menu2 ul li.nav2 a span.over { background: #b0bbba; } #menu2 ul li.nav3 a span.over { background: #a3f091; } #menu2 ul li.nav4 a span.over { background: #86dbf9; } #menu2 ul li.nav5 a span.over { background: #e0caf0; } #menu2 ul li.nav6 a span.over { background: #9dace9; } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> <script language="javascript"> $(document).ready(function() { /* 完整版示例 */ // 把每个a中的内容包含到一个层（span.out）中，在span.out层后面追加背景图层（span.bg） $("#menu li a").wrapInner( '<span class="out"></span>' ).append( '<span class="bg"></span>' ); // 循环为菜单的a每个添加一个层（span.over） $("#menu li a").each(function() { $( '<span class="over">' + $(this).text() + '</span>' ).appendTo( this ); }); $("#menu li a").hover(function() { // 鼠标经过时候被触发的函数 $(".out",this).stop().animate({'top':'45px'},250); // 向下滑动 - 隐藏 $(".over",this).stop().animate({'top':'0px'},250); // 向下滑动 - 显示 $(".bg",this).stop().animate({'top':'0px'}, 120); // 向下滑动 - 显示 }, function() { // 鼠标移出时候被触发的函数 $(".out",this).stop().animate({'top':'0px'},250); // 向上滑动 - 显示 $(".over",this).stop().animate({'top':'-45px'},250); // 向上滑动 - 隐藏 $(".bg",this).stop().animate({'top':'-45px'},120); // 向上滑动 - 隐藏 }); /* 简化版示例 */ $("#menu2 li a").wrapInner( '<span class="out"></span>' ); $("#menu2 li a").each(function() { $('<span class="over">' + $(this).text() + '</span>' ).appendTo( this ); }); $("#menu2 li a").hover(function() { $(".out",this).stop().animate({'top':'45px'},200); // 向下滑动 - 隐藏 $(".over",this).stop().animate({'top':'0px'},200); // 向下滑动 - 显示 }, function() { $(".out",this).stop().animate({'top':'0px'},200); // 向上滑动 - 显示 $(".over",this).stop().animate({'top':'-45px'},200); // 向上滑动 - 隐藏 }); }); </script> </head> <body> <div id="content"> <div id="menu" class="menu"> <ul> <li><a href="javascript:;">Home</a></li> <li><a href="javascript:;">HTML/CSS</a></li> <li><a href="javascript:;">JavaScript</a></li> <li><a href="javascript:;">Resources</a></li> <li><a href="javascript:;">Tutorials</a></li> <li><a href="javascript:;">About</a></li> </ul> </div> <p> </p> <p>简化版（无图片）示例</p> <br/> <div id="menu2" class="menu"> <ul> <li class="nav1"><a href="javascript:;">Home</a></li> <li class="nav2"><a href="javascript:;">HTML/CSS</a></li> <li class="nav3"><a href="javascript:;">JavaScript</a></li> <li class="nav4"><a href="javascript:;">Resources</a></li> <li class="nav5"><a href="javascript:;">Tutorials</a></li> <li class="nav6"><a href="javascript:;">About</a></li> </ul> </div> </div> </body> </html>

提示：你可以先修改部分代码再运行。

Filed under: jquery 由 admin
没有评论 »

jquery打造绚丽的导航菜单

前几天见到一个网站的导航菜单效果很华丽，回来自己就想着用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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>绚丽的导航效果</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $("#nav li").wrapInner('<span class="content"></span>').append('<span class="bg"></span>'); $("#nav li span.content").hover(function(){ $(this).next('span').animate({left:"0px"},800); },function(){ $(this).next('span').animate({left:"-198px"},800); }); }) </script> <style type="text/css"> *{ padding:0px; margin:0px;} #nav{ width:200px; height:200px; margin:0 auto; text-align:center; font-size:1.3em;} ul,li{ list-style:none;} li{ width:200px; height:40px; background-color:#99CC00; line-height:40px; border-bottom:1px #fff solid; position:relative; overflow:hidden; float:left;} li span.content{ position:absolute; left:0px; top:0px; display:block; z-index:10; height:40px; width:200px;} li span.bg{ position:absolute; left:-198px; top:0px; width:200px; background-color:red; height:40px; z-index:1;} </style> </head> <body> <ul id="nav"> <li>jquery教程</li> <li>css教程</li> <li>seo教程</li> <li>fireworks教程</li> <li>ps教程</li> </ul> </body> </html>

提示：你可以先修改部分代码再运行。

Filed under: jquery 由 admin
没有评论 »

wordpress3.0就要来了！

wordpress3.0现在正在测试当中，目前有它的beta1版本。听说新增加了许多的功能其中比较吸引人的是它新增的安装时候自定义用户名和密码，这个比以前方便了许多。还有就是多站点功能与对WPMU代码库的合并；以及自定义日志类型，这个大大有利于cms。其他的还有许多的新功能，像可以修改头部和背景而不需要写代码就可以完成。现在我们期待着wordpress3.0正式版的发布，现在我都有点等不及了！大家现在可以下载它的wordpress3.0beta1版先睹为快！

Filed under: 其他由 admin
没有评论 »

自己用jquery写的弹出窗口

前一段时间写的是使用jquery解决ie6或者ie7不支持的伪类问题，现在基本上是告一段落了。今天我写的这个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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jquery写的弹出窗口</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $("#btn").click(function(){ $("#container").fadeIn(800); $("<div id='mask'></div>").appendTo("body"); $("#mask").css("opacity","0.6"); }); $("#shut").click(function(){ $("#mask").remove(); $("#container").hide(); }); }) </script> <style type="text/css"> html, body { width:100%; height:100%; } #container { width:400px; height:300px; border:20px #99CC00 ridge; text-align:center; display:none; position:absolute; left:50%; top:50%; margin-left:-200px; margin-top:-150px; z-index:10; background-color:#99CC00; } label, input { padding:5px; margin:5px; } ul,li{ list-style:none;} #mask { width:100%; height:100%; position:absolute; background-color:#000; left:0; top:0; z-index:8; } </style> </head> <body> <p>前一段时间写的是使用jquery解决ie6或者ie7不支持的伪类问题，现在基本上是告一段落了。今天我写的这个jquery教程，主要是来源于我在网上看到许多人问怎么写像一个这样的效果就是你点击注册会弹出一个注册的对话框并且页面别的内容都被一个层遮罩住了。 </p> <input type="button" id="btn" value="注册会员" /> <div id="container"> <ul> <li>昵称： <input type="text" /> </li> <li>密码： <input type="text" /> </li> <li>确认： <input type="text" /> </li> <li>邮箱： <input type="text" /> </li> </ul> <label> <input type="submit" value="提交"/> <input type="reset" value="重设" /> </label> <input type="button" value="关闭弹出窗" id="shut" /> </div> </body> </html>

提示：你可以先修改部分代码再运行。

这个效果其实还有一定的问题，比如我记得我以前见到的一个推出弹出框可以使用键盘的“Esc”键，但是这个我没有办法实现。您要是能实现的话你可以在这里留言来告诉我，这个效果用到的jquery主要是appentTo属性和remove属性。别的还有就是一些很常用的我们在前一些教程中已经做过讲解这里就不再赘述。

Filed under: jquery 由 admin
没有评论 »

页数 1 2 3 4 5 6 7 8 下一页

一	二	三	四	五	六	日
« 三				五 »
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30

web标准学习—小辉博客

学习交流web标准的知识和经验

jquery动态菜单效果

jquery打造绚丽的导航菜单

wordpress3.0就要来了！

自己用jquery写的弹出窗口

最新文章

内容分类

好站推荐

文章索引模板

日历