这里有新鲜出炉的 jQuery 示例,程序狗速度看过来!
jQuery 是一个兼容多浏览器的 javascript 框架,核心理念是 write less,do more(写得更少, 做得更多)。jQuery 在 2006 年 1 月由美国人 John Resig 在纽约的 barcamp 发布,吸引了来自世界各地的众多 JavaScript 高手加入,由 Dave Methvin 率领团队进行开发。
这篇文章主要介绍了 jQuery 实现背景弹性滚动导航效果的方法, 涉及 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>
- <title>
- 背景弹性滚动的导航效果
- </title>
- <meta http-equiv="content-type" content="text/html;charset=gb2312" />
- <!--把下面代码加到<head>与</head>之间-->
- <style type="text/CSS">
- .nav-wrap { margin: 0 auto; background-color: #121212; border-top: 1px
- solid #FFF; border-bottom: 1px solid #FFF; } .group:after { visibility:
- hidden; display: block; font-size: 0; content: " "; clear: both; height:
- 0; } *:first-child+html .group { /* IE7 */ zoom: 1; } #example { width:
- 960px; margin: 0 auto; list-style: none; position: relative; } #example
- li { display: inline; } #example li a { position: relative; z-index: 200;
- color: #AAA; font-size: 14px; display: block; float: left; padding: 12px
- 10px 10px 10px; text-decoration: none; text-transform: uppercase; } #example
- li a:hover { color: #FFF; } #example #magic-line-two { width: 100px; position:
- absolute; top: 0; left: 0; background: #666; z-index: 100; -moz-border-radius:
- 5px; -webkit-border-radius: 5px; } .current a { color: #FFF !important;
- }
- </style>
- <script type="text/javascript" src="jquery.min.js">
- </script>
- <script type="text/javascript">
- $(function() {
- var $el, leftPos, newWidth, $mainNav = $("#example");
- /*
- EXAMPLE
- */
- $mainNav.append("<li id='magic-line-two'></li>");
- var $magicLineTwo = $("#magic-line-two");
- $magicLineTwo.width($(".current").width()).height($mainNav.height()).css("left", $(".current a").position().left).data("origLeft", $(".current a").position().left).data("origWidth", $magicLineTwo.width()).data("origColor", $(".current a").attr("rel"));
- $("#example li").find("a").hover(function() {
- $el = $(this);
- leftPos = $el.position().left;
- newWidth = $el.parent().width();
- $magicLineTwo.stop().animate({
- left: leftPos,
- width: newWidth,
- backgroundColor: $el.attr("rel")
- })
- },
- function() {
- $magicLineTwo.stop().animate({
- left: $magicLineTwo.data("origLeft"),
- width: $magicLineTwo.data("origWidth"),
- backgroundColor: $magicLineTwo.data("origColor")
- });
- });
- });
- </script>
- </head>
- <body>
- 预览效果时左下角会提示错误,而且看不到效果,刷新一下就可以看到效果了;当然,在实际使用中,不会出现这样的问题。
- <br>
- <!--把下面代码加到<body>与</body>之间-->
- <div class="nav-wrap">
- <ul class="group" id="example">
- <li class="current">
- <a href="#" _fcksavedurl="#">
- Home
- </a>
- </li>
- <li>
- <a href="#" _fcksavedurl="#">
- About me
- </a>
- </li>
- <li>
- <a href="#" _fcksavedurl="#">
- Our Team
- </a>
- </li>
- <li>
- <a href="#" _fcksavedurl="#">
- Portfolio
- </a>
- </li>
- <li>
- <a href="#" _fcksavedurl="#">
- The Show
- </a>
- </li>
- <li>
- <a href="#" _fcksavedurl="#">
- Videos
- </a>
- </li>
- <li>
- <a href="#" _fcksavedurl="#">
- CSS/HTML
- </a>
- </li>
- <li>
- <a href="#" _fcksavedurl="#">
- jQuery
- </a>
- </li>
- <li>
- <a href="#" _fcksavedurl="#">
- Navigation
- </a>
- </li>
- <li>
- <a href="#" _fcksavedurl="#">
- Wordpress
- </a>
- </li>
- <li>
- <a href="#" _fcksavedurl="#">
- Contact
- </a>
- </li>
- </ul>
- </div>
- </body>
- </html>
PS:这里再为大家推荐几款代码格式化、美化工具,相信大家在以后的开发过程中会用得到:
希望本文所述对大家 jQuery 程序设计有所帮助。
来源: http://www.phperz.com/article/17/0722/265255.html