jquery动态导航插件,可选上下左右切换,html结构和样式及行为完全分离,就像往常我们做导航一样不需添加任何额外的标签。注意:在ul标签务必加上class样式nav,此样式可根据实际情况修改,比如添加背景图片改变高度和宽度等。如果.nav样式与您现有样式冲突请自行修改为其它名称。
<!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>
<style type="text/css">
<!--
body, td, th {
font-size: 14px;
background-color:#FFF
}
h1{border-bottom:1px solid #999; margin:50px 60px;}
/*导航默认样式,可根据实际情况修改*/
* {
margin:0;
padding:0
}
.nav {
width:980px;
height:30px;
left:50%;
margin-left:-490px;
list-style:none;
position:relative;
}
.nav li {
display:inline-block;
margin:0 3px;
position:relative;
overflow:hidden;
height:30px; /*建议此高度大于等于里面的a标签高度*/
float:left;
}
.nav li span {
display:inline-block;
overflow:hidden
}
.nav li a {
text-decoration:none;
outline:none;
color:#666;
display:inline-block;
padding:0 10px;
text-align:center;
background-color: #E1E1E1;
font-weight:bold;
height:30px;
line-height:30px;
}
/*鼠标经过时样式*/
.nav li a.over {
background-color:#666;
color:#FFF
}
-->
</style>
<script type=text/javascript src="http://www.codefans.net/ajaxjs/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
(function($){
$.fn.dynamicNav=function(options){
//默认配置
var defaults = {
direction:"up", //动画切换方向,总共4种up 、down 、left 、right
duration:100 //三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如:1000)
};
//覆盖默认配置
var opts = $.extend(defaults, options);
this.each(function(){
var navList=$(this).find("li"),
navLink=navList.find("a");
//在a标签外侧插入span
navList.wrapInner("<span></span>");
var span=navLink.parent();
//判断是否垂直切换
if(opts.direction=="up" || opts.direction=="down"){
var v=true;
}
//判断是否改变span初始位置及a样式
if(opts.direction=="right" || opts.direction=="down"){
var restSpan=true;
}
navLink.each(function(){
//获取a高度和宽度
var w=$(this).outerWidth(),
p=$(this).parent();
//初始复制现有a标签
$(this).clone().appendTo(p).addClass("over");
//如果是垂直切换
if(v){
p.css("width",w);
}else{
p.css("width",2*w).parent().css("width",w);
}
});
//如果向右或向下切换,改变span初始位置及a样式
if(restSpan){
span.each(function(){
if(opts.direction=="right"){
$(this).css({"margin-left":-$(this).outerWidth()/2});
}
if(opts.direction=="down"){
$(this).css({"margin-top" : -$(this).outerHeight()/2});
}
$(this)
.find('a')
.last()
.removeClass("over")
.prev()
.addClass("over");
});
}
//鼠标经过时动画函数
function over(o){
o.animate(v?{"margin-top": -o.outerHeight()/2}:{"margin-left": -o.outerWidth()/2}, opts.duration);
}
//鼠标移开时动画函数
function out(o){
o.animate(v?{"margin-top":0}:{"margin-left": 0}, opts.duration);
}
//鼠标经过和离开
span.hover(function(){
restSpan ? out($(this)) : over($(this));
},function(){
restSpan ? over($(this)) : out($(this));
});
});
};
})(jQuery);
$(function(){
//向左
$("#nav1").dynamicNav({
direction:"left", //动画切换方向,总共4种up 、down 、left 、right
duration:300 //三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如:1000)
});
//向右
$("#nav2").dynamicNav({
direction:"right",
duration:200
});
//向上
$("#nav3").dynamicNav({
direction:"up",
duration:100
});
//向下
$("#nav4").dynamicNav({
direction:"down",
duration:400
});
});
</script>
</head>
<body>
<h1>向左(速度300毫秒)</h1>
<ul class="nav" id="nav1">
<li><a href="#">首页</a></li>
<li><a href="#">前端技术</a></li>
<li><a href="#">视觉设计</a></li>
<li><a href="#">文章归档</a></li>
<li><a href="#">工具/书籍</a></li>
<li><a href="#">关于我</a></li>
</ul>
<h1>向右(速度200毫秒)</h1>
<ul class="nav" id="nav2">
<li><a href="#">首页</a></li>
<li><a href="#">前端技术</a></li>
<li><a href="#">视觉设计</a></li>
<li><a href="#">文章归档</a></li>
<li><a href="#">工具/书籍</a></li>
<li><a href="#">关于我</a></li>
</ul>
<h1>向上(速度100毫秒)</h1>
<ul class="nav" id="nav3">
<li><a href="#">首页</a></li>
<li><a href="#">前端技术</a></li>
<li><a href="#">视觉设计</a></li>
<li><a href="#">文章归档</a></li>
<li><a href="#">工具/书籍</a></li>
<li><a href="#">关于我</a></li>
</ul>
<h1>向下(速度400毫秒)</h1>
<ul class="nav" id="nav4">
<li><a href="#">首页</a></li>
<li><a href="#">前端技术</a></li>
<li><a href="#">视觉设计</a></li>
<li><a href="#">文章归档</a></li>
<li><a href="#">工具/书籍</a></li>
<li><a href="#">关于我</a></li>
</ul>
</body>
</html>
http://www.codefans.net/jscss/code/2960.shtml
分享到:
相关推荐
On-Off Toggle Switches 是一款交互式的,可访问的 web 开关切换转换插件,把复选框转换成开关切换。 web 上面的开关切换只是单独的一个结构转变,点击或者拖动的时候从左到右切换或者是从右到左切换。 在线演示 ...
一款jQuery插件slide幻灯片切换图片宽高自适应 74.一款jQuery漂亮淡出淡入焦点大图切换源码 75.一款jquery缩略图商品切换放大展示功能插件 76.一款使用jQuery左右控制横向图片滚动的代码 77.一款基于jquery...
可显示隐藏密码切换的jQuery插件是一款选中“显示密码”的复选框,勾选之后输入的密码就变成明文了。这样的功能可以很好的防止输错密码,尤其是一些只需输入一次密码的注册。
内容索引:脚本资源,jQuery,图片切换,焦点图切换 AnythingSlider 基于jQuery的焦点图轮番切换插件,可以适用于任何切合,就像这款插件的名字一样——AnythingSlider,图片张数可选,左右各有切换按钮,除此之外还有...
jQuery响应式手机端触屏滑动图片轮播插件,含多种图片滑动切换效果可选,兼容PC端与手机端。
可显示隐藏密码切换的jQuery插件是一款选中显示密码的复选框,勾选之后输入的密码就变成明文了。这样的功能可以很好的防止输错密码,尤其是一些只需输入一次密码的注册。
特点:支持自定义座位类型和价格,支持自定义样式,支持设置不可选的座位,也支持键盘控制选座。 运行效果图: ——————-查看效果 下载源码——————- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览...
truncate.js 一个用于HTML截断和切换的jQuery插件为什么要使用JavaScript截断文本? 基于字符数的服务器端文本截断始终是不正确的。 除非使用等宽字体,否则字符串“ iiiii”的宽度比“ MMMMM”的宽度小大约58%。 ...
jQuery插件,kinslideshow,制作焦点图、广告、图片切换很方便,没发现不兼容的,使用起来方便,下面是一些参数配置 [removed] var moveStyle var rand = parseInt(Math.random() * 4) switch (rand) { case...
用于切换 Font Awesome 图标的 jQuery 插件 用法 $(selector).fatoggle(['fa-play','fa-pause'], options); 例子: 选项: radio : (true or false) 在无序列表中使用的字体真棒图标,true 将作为单选按钮切换,...
hide() 和 show() 都可以设置两个可选参数:speed 和 callback。 语法: $(selector).hide(speed,callback) $(selector).show(speed,callback) speed 参数规定显示或隐藏的速度。可以设置这些值:"slow", "fast", ...
切换 来自 jQuery 的简单插件,用于在漂亮的可定制开关中转换输入复选框 HTML 元素。
切换上下文中所有复选框的状态。 启用范围选择。 限制每个上下文中已选中复选框的数量。 数据API,例如Twitter Bootstrap。 文档和示例 想要贡献? 欢迎所有帮助! 先决条件 。 。 开发流程 此存储库。 克隆...
context (Element, jQuery) : (可选) 作为待查找的 DOM 元素集、文档或 jQuery 对象。 示例 找到所有 p 元素,并且这些元素都必须是 div 元素的子元素。 HTML 代码: <p>one</p> <div><p>two</p></div> <p>three...
此jQuery插件为Ajax分页插件,一次性加载,故分页切换时无刷新与延迟,如果数据量较大不建议用此方法,因为加载会比较慢。 名 描述 参数值 maxentries 总条目数 必选参数,整数 items_per_page 每页显示的条目...
PlusSlider jQuery插件 不可知的,易变的jQuery内容滑块,可以轻松配置和设置样式。 安装 通过 bower install jquery.plusslider --save 。 或者,通过bower bower install angular-plusslider --save安装版本。 ...
osSlider 栅格轮播插件插件信息作者 橙色阳光版本 v1.0依赖 jquery.1.8.0文件关系 ./script/osSlider.js 插件主js文件 必要文件./css/osSlider.css 插件默认渲染style文件 可选文件注意事项class选择器已有 ....
Bootstrap 4切换Bootstrap 4 Toggle是一个Bootstrap插件/小部件,可将复选框转换为切换。图书馆分布项目描述支持bootstrap4(需要jQuery)支持bootstrap4 +(ES6类,没有依赖项)支持bootstrap4 +(React组件,没有...