jQuery

导航迷你条

2012年1月27日 jQuery 没有评论 | 热度：24 ℃

鼠标移上去会出现有色的线条，移动到别的区域它也会跟着移动，同时也会自动隐藏与感应出现，看示例：

<!doctype html> <html> <head> <meta charset="utf-8" /> <title>堆糖网</title> <meta name="keywords" content="" /> <meta name="description" content="" /> <style type="text/css"> /* 此段样式为清除浮动通用样式 */ .clr{zoom:1;border:1px solid green} .clr:after{content:"\0020";display:block;height:0;overflow:hidden;clear:both;} /****/ .mynav ul{margin:0;padding:0;list-style:none;} .mynav li{float:left;+display:inline;line-height:21px;margin:4px 0 0;padding:0;vertical-align:middle;border:1px solid #f00;} .mynav li a:link,.mynav li a:visited{display:block;line-height:31px;padding:12px 12px 14px;font-size:16px;text-decoration:none;font-family:'\5FAE\8F6F\96C5\9ED1';color:#666;} .mynav li a:hover{color:#f21664;text-decoration:none;} .mynav li.cur a:link,.mynav li.cur a:visited{color:#f21664;} .mynav li.cur a:hover{color:#f21664;} </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> </head> <body> <div id="mynav1" class="mynav clr" > <ul> <li><a href="">我的堆糖</a></li> <li><a href="">发现</a></li> <li><a href="">小组</a></li> <li><a href="">专辑</a></li> </ul> </div> <div id="mynav2" class="mynav clr"> <ul> <li><a href="">我的堆糖</a></li> <li><a href="">发现</a></li> <li><a href="">小组</a></li> <li><a href="">专辑</a></li> </ul> </div> <script> $(function (){ //无默认选中项 $('#mynav1').minibar() //有默认选中项 $('#mynav2').minibar({"idx":2}) }) ;(function($){ $.fn.minibar = function(opt){ var $mynav = this.css("position","relative"), //一般为主导航 $ba = $('<div/>').appendTo($mynav); //迷你条 //配置项合并 opt = $.extend({},$.fn.minibar.defaults,opt); //鼠标hover 事件 $mynav.find('li').hover(function (){ var t = this; //终止迷你条还原过程 clearTimeout($ba.data('timer')) //直接到达当前鼠标hover 的位置 _set(t) },function (){ //鼠标hover 的li 节点 var t = this; //通过data 来保存计时器 $ba.data('timer',setTimeout(function (){ //迷你条还原，从当前鼠标hover 的位置moveto 原选中位置 _set($mynav.find('.'+opt.cur),t) },300)) }) //设置初始位置【我的堆糖】 class="cur" 标识 opt.idx && _set($mynav.find('li').eq(opt.idx).addClass(opt.cur)) //内部调用方法 function _set(sel,sel2){ var $cu = $(sel), //一般为初始位置，有可能没有初始位置 class="cur" 标识 $tu = $(sel2); //一般为鼠标hover 的位置 if( $cu.length ){ var ow = $cu.outerWidth(), ol = $cu.position().left; //当前所在条初始化 if( $ba.css("position") !== "absolute" ){ $ba.css({ "position" : "absolute", "height" : 4, "top" : 0, "overflow" : "hidden", "backgroundColor" : "#F21664", "width" : 0, "left" : ol + ow/2 }) } $ba.stop().animate({ "width" : ow, "left" : ol },300) }else if( $tu.length ){ //如果没有找到 class="cur" 的初始位置，则就地隐去 var ow = $tu.outerWidth(), ol = $tu.position().left; $ba.stop().animate({ "width" : 0, "left" : ol + ow/2 },300) } } return $mynav; //保持队形了 } //默认配置项 $.fn.minibar.defaults = { "idx" : null, //初始化就选中的序号数，默认null 表示无选中项 "cur" : "cur" //选中项的className }; })(jQuery) </script> </body> </html>

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

jQuery图片特效，鼠标经过图标高亮显示

2012年1月14日 jQuery 没有评论 | 热度：31 ℃

预览：http://preview.zcool.com.cn/preview/code/new_code/068/

下载：http://archive.plugins.jquery.com/project/jFade

jquery动画效果菜单

2011年8月13日 jQuery 没有评论 | 热度：121 ℃

3个jquery制作的动画效果的网站菜单，示例页内共有三个导航菜单，每一个都有自己的特点。
范例一特点：用背景图实现（带圆角，注意图的做法，两张或整合成），主要用于导航栏项目文字长短不一的情况（不定宽！）
范例二特点：用背景图或背景色来实现，导航栏项目为四字。去掉LI中宽度的设置，可用于任何长度的文字。
范例三特点：用下划线实现，导航栏文字字数为四字，去掉或重新设置A标记中的宽度，可用于任何长度的文字
相信用到你的网站上会增色不少。

在线演示：http://www.uedbox.com/demo/jquery-Menu-1/menu.html

jQuery

体验盒子

导航迷你条

jQuery图片特效，鼠标经过图标高亮显示

jquery动画效果菜单

10个实用的jQuery图像插件

WordPress的jquery库不起作用？

jQuery实现锚点scoll效果

jQuery制作具有滑动动画效果的层

JS笔记：检测客户端（引擎、浏览器、平台、操作系统、移动设备）

yahoo特色功能滑动效果

即时提示插件cursorMessage

Jquery侧栏、TAB效果

一个网页设计需求方眼中的网页设计(摘录）

jquery：倒计时插件（jquery.countdown）多国语言版

几款前段工具和插件

35个新的实用的 jQuery 插件