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
分享到:
相关推荐
它通过jQuery库操纵DOM(文档对象模型)元素,实现图片的自动切换、导航控制(如左右箭头或点状指示器)以及过渡效果。基本工作流程如下: 1. 初始化轮播容器:设置初始显示的图片,并隐藏其他图片。 2. 自动切换:...
本教程将详细讲解“jQuery日历插件可选年月(中文)”这一主题,包括其特点、实现原理以及如何在项目中集成和自定义。 首先,该日历插件的特点在于提供了中文月份的支持,这对于中文用户来说是非常友好的,使得用户...
"jQuery简单同一页面多个图片切换插件"就是这样一个工具,它能够帮助开发者轻松地在页面上创建出美观且功能强大的图片轮播效果,并且兼容所有浏览器,确保了用户的广泛适用性。 jQuery 是一个流行的JavaScript库,...
7. **插件开发**:jQuery生态系统中有大量插件,如果这个项目是作为一个插件开发的,那么它可能遵循了jQuery插件的典型结构,包括一个主函数和可选的配置选项。 在"132686994891880932"这个文件中,可能包含了实现...
4. **可选配置**:根据需求调整插件配置,如自动轮播速度、过渡效果类型、是否显示导航点等。 5. **事件监听**:如果需要在图片切换时执行特定操作,可以监听插件提供的事件。 **示例代码** ```html <!DOCTYPE ...
**jQuery UI插件详解** jQuery UI是一个基于JavaScript的开源库,它是jQuery库的扩展,提供了丰富的用户界面组件和交互效果。这个插件以其强大的功能、易于使用的API和可定制的主题而受到开发者的广泛欢迎。在本文...
使用jQuery-searchableSelect插件,首先需要引入jQuery库和插件的JavaScript文件,以及可选的CSS样式文件。然后,对需要应用插件的`select`元素调用`.searchableSelect()`方法。以下是一个简单的示例: ```html <!...
6. **可选功能**:还可以添加自动切换功能,通过`setInterval()`定时切换图片。同时,可以添加指示器,显示当前图片的位置,以及提供全屏模式等附加功能。 标签中的“jQuery”和“焦点图”进一步确认了这个项目是...
jQuery轮播图插件是一种广泛应用于网页设计中的动态展示图像或内容的工具,它通过JavaScript库jQuery实现,为网站添加了交互性和视觉吸引力。在网页设计中,轮播图能够有效地展示多张图片或信息,通常以幻灯片的形式...
在"jQuery插件图片列表切换实例"中,我们将学习如何利用jQuery的功能来创建一个动态展示图片的组件,用户可以轻松地在图片列表之间切换。 首先,确保你已经将jQuery库引入到你的HTML文件中。通常,你可以通过在`...
手风琴(Accordion)效果和轮播(Carousel)切换是两种常见的jQuery插件,当它们结合在一起,可以创造出独特的滑动效果,使得用户可以在有限的空间内查看更多的内容。 首先,我们来理解一下手风琴效果。手风琴是一...
jQuery Strip是一个强大的图像展示插件,专为网页设计师和开发者设计,用于创建美观、动态且用户友好的图片滑动展示。它利用jQuery库的强大功能,提供了一系列丰富的功能和自定义选项,使网页中的图片展示更加吸引人...
- **direction**:切换方向,可选'forward'(向前)或'reverse'(向后)。 你可以通过传递一个对象作为`jQFader`方法的参数来设置这些选项,例如: ```javascript $('#fadeContainer').jQFader({ duration: 1000, ...
jQuery UI 是一个基于 jQuery JavaScript 库的开源用户界面插件集合,它提供了丰富的交互效果、可自定义的主题以及多种多样的组件,使得开发者能够轻松创建功能丰富、用户体验优秀的Web应用程序。这个压缩包文件包含...
3. **自动播放**:可选的自动播放功能使得相册能像幻灯片一样自动切换图片,为用户带来流畅的观看体验。 4. **响应式设计**:插件应具备响应式布局,能根据不同的设备屏幕大小和方向调整布局,确保在手机、平板和...
以常见的jQuery插件`FullCalendar`为例,该插件提供了丰富的功能和自定义选项,能够轻松集成到各种项目中。通过实例代码,我们可以看到如何在页面中创建一个日历签到组件: ```html <!DOCTYPE html> ...
initialState: 'on', // 开始时的状态,可选'on'或'off' width: 50, // 按钮宽度 activeColor: '#4CAF50', // 开启状态的颜色 inactiveColor: '#F44336' // 关闭状态的颜色 } ``` 5. **交互操作**:使用提供的...
9. **日期处理逻辑**:插件内部可能包含复杂的日期处理逻辑,如日期范围限制、不可选日期的标记等,开发者需要理解这些逻辑并根据需求进行配置。 10. **Demo和文档**:提供的示例(demo)可以帮助开发者快速上手,...
【可选日期范围的jQuery时间日期插件】是一种在网页应用中实现用户友好的日期和时间选择功能的工具。这种插件通常通过整合jQuery库,为网页表单提供交互式的日历视图,允许用户在预设的日期范围内选择特定日期或时间...
动画效果是jQuery插件中的常见特性,它可以增加用户交互的流畅性。例如,可以使用`.fadeIn()`和`.fadeOut()`方法来平滑地切换标签页。同时,为了实现关闭其它或关闭所有标签页的功能,需要遍历所有标签页,判断哪些...