jquery导航效果,jQuery导航栏

jquery怎么控制当前页的导航菜单效果？

例如导航的div div class="nav"a href="index.html"首页/aa href="product.html"产品/aa href="case.html"案例中心/a/div

专注于为中小企业提供成都网站建设、成都网站制作服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业勐腊免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了上千余家企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。

下面的html内容：

div class="main"

div class="content"首页的内容/div

div class="content"产品的内容/div

div class="content"案例中心的内容/div

/div

至于class=“content”可以是你自己加上的为了便于jQuery获取，没有这个样式类

script type="text/javascript"

$(document).ready(function()

{

var tabs = $('.nav a');

var cons = $('.main div.content');

tabs.first().addClass("now").show(); //默认第一个显示

cons.first().show().nextAll().hide(); //默认第一个显示，其他隐藏

tabs.each(function(index){

$(this).mouseover(function(){

$(this).addClass("now").siblings().removeClass("now");

cons.eq(index).show().siblings().hide();

});

});

});

/script

jQuery实现两款有动画功能的导航菜单代码

本文实例讲述了jQuery实现两款有动画功能的导航菜单代码。分享给大家供大家参考。具体如下：

这里介绍两个有动画功能的jQuery导航菜单，每个具备移动背景的效果，第二则是渐变背景效果，两个都不错，根据你的喜好选择了，菜单的风格和颜色自己修改一下就能用了。

运行效果截图如下：

在线演示地址如下：

具体代码如下：

!DOCTYPE

html

PUBLIC

"-//W3C//DTD

XHTML

1.0

Transitional//EN"

""

html

xmlns=""

head

meta

http-equiv="Content-Type"

content="text/html;

charset=utf-8"

/

title两个有动画功能的导航菜单/title

script

src="jquery-1.6.2.min.js"

type="text/javascript"/script

script

type="text/javascript"

$(function()

{

$("#test1

a").mouseover(function()

{

var

index

=

$("#test1

a").index(this);

var

width

=

$("#test1

a").width();

$("#test1

.showhover").stop().animate({left:width*index},1000);

})

$("#test2

a").mouseover(function()

{

var

index

=

$("#test2

a").index(this);

var

width

=

$("#test2

a").width();

$("#test2

.showhover").stop().animate({left:width*index,opacity:'0.6'},1000).stop(false,true).animate({opacity:'1.0'},500);

})

})

/script

style

type="text/css"

.body

{margin:10px;}

img

{border:0;}

a

{text-decoration:none;}

ul{list-style:none;

margin:0;

padding:0;}

.menu

{background:#003399;

height:25px;

width:600px;

position:relative;

overflow:hidden;}

.menu

.showmenu,

.menu

.showhover{

position:absolute;}

.menu

.showmenu

a

{float:left;

display:block;}

.menu

.showmenu

a

{font:700

12px/25px

Microsoft

YaHei;

color:#fff;

width:100px;

height:25px;

text-align:center;}

.menu

.showhover

{background:#990033;

width:100px;

height:25px;}

/style

/head

body

div

class="menu"

id="test1"

div

class="showhover"/div

div

class="showmenu"

a

href="#"网站首页/a

a

href="#"关于我们/a

a

href="#"新闻中心/a

a

href="#"产品中心/a

a

href="#"解决方案/a

a

href="#"联系我们/a

/div

/div

div

style="clear:both;height:50px;"/div

div

class="menu"

id="test2"

div

class="showhover"/div

div

class="showmenu"

a

href="#"网站首页/a

a

href="#"关于我们/a

a

href="#"新闻中心/a

a

href="#"产品中心/a

a

href="#"解决方案/a

a

href="#"联系我们/a

/div

/div

/body

/html

希望本文所述对大家的jQuery程序设计有所帮助。

jQuery实现带滚动导航效果的全屏滚动相册实例

本文实例讲述了jQuery实现带滚动导航效果的全屏滚动相册。分享给大家供大家参考。具体如下：

运行效果图如下：

主要代码如下：

$(function()

{

//加载时的图片

var

$loader=

$('#st_loading');

//获取的ul元素

var

$list=

$('#st_nav');

//当前显示的图片

var

$currImage

=

$('#st_main').children('img:first');

//加载当前的图片

//同时显示导航的项

$('img').load(function(){

$loader.hide();

$currImage.fadeIn(3000);

//滑出导航

setTimeout(function(){

$list.animate({'left':'0px'},500);

},

1000);

}).attr('src',$currImage.attr('src'));

//计算出将被显示的略缩图所在的div元素的宽度

buildThumbs();

function

buildThumbs(){

$list.children('li.album').each(function(){

var

$elem

=

$(this);

var

$thumbs_wrapper

=

$elem.find('.st_thumbs_wrapper');

var

$thumbs

=

$thumbs_wrapper.children(':first');

//每张略缩图占有180像素的宽度和3像素的间距(margin)

var

finalW

=

$thumbs.find('img').length

*

183;

$thumbs.css('width',finalW

+

'px');

//是这元素具有滚动性

makeScrollable($thumbs_wrapper,$thumbs);

});

}

//点击菜单项目的时候（向上向下箭头切换）

//使略缩图的div层显示和隐藏当前的

//打开菜单（如果有的话）

$list.find('.st_arrow_down').live('click',function(){

var

$this

=

$(this);

hideThumbs();

$this.addClass('st_arrow_up').removeClass('st_arrow_down');

var

$elem

=

$this.closest('li');

$elem.addClass('current').animate({'height':'170px'},200);

var

$thumbs_wrapper

=

$this.parent().next();

$thumbs_wrapper.show(200);

});

$list.find('.st_arrow_up').live('click',function(){

var

$this

=

$(this);

$this.addClass('st_arrow_down').removeClass('st_arrow_up');

hideThumbs();

});

//点击略缩图，改变大的图片

$list.find('.st_thumbs

img').bind('click',function(){

var

$this

=

$(this);

$loader.show();

$('img

class="st_preview"/').load(function(){

var

$this

=

$(this);

var

$currImage

=

$('#st_main').children('img:first');

$this.insertBefore($currImage);

$loader.hide();

$currImage.fadeOut(2000,function(){

$(this).remove();

});

}).attr('src',$this.attr('alt'));

}).bind('mouseenter',function(){

$(this).stop().animate({'opacity':'1'});

}).bind('mouseleave',function(){

$(this).stop().animate({'opacity':'0.7'});

});

//隐藏当前已经打开了的菜单的函数

function

hideThumbs(){

$list.find('li.current')

.animate({'height':'50px'},400,function(){

$(this).removeClass('current');

})

.find('.st_thumbs_wrapper')

.hide(200)

.andSelf()

.find('.st_link

span')

.addClass('st_arrow_down')

.removeClass('st_arrow_up');

}

//是当前的略缩图div层滚动

//当鼠标移至菜单层的时候会自动地进行滚动

function

makeScrollable($outer,

$inner){

var

extra

=

800;

//获取菜单的宽度

var

divWidth

=

$outer.width();

//移除滚动条

$outer.css({

overflow:

'hidden'

});

//查找容器上的最后一张图片

var

lastElem

=

$inner.find('img:last');

$outer.scrollLeft(0);

//当用户鼠标离开菜单的时候

$outer.unbind('mousemove').bind('mousemove',function(e){

var

containerWidth

=

lastElem[0].offsetLeft

+

lastElem.outerWidth()

+

2*extra;

var

left

=

(e.pageX

-

$outer.offset().left)

*

(containerWidth-divWidth)

/

divWidth

-

extra;

$outer.scrollLeft(left);

});

}

});

希望本文所述对大家的jQuery程序设计有所帮助。

如何用jquery实现hover导航栏效果？

你好 经测试  效果如下

问题分析：没效果是不是js导入问题  建议alert（“1”）看看有没有效果  我这效果是有的

希望能帮到你 谢谢

jquery导航条效果请教，点击后更改对应标签的背景颜色。

可以这样做：

1、首先a{display：block；

width：60px;

height:40px;

}

把每个导航超链接a标签都设置成块儿，设置好尺寸，具体根据图片的尺寸。不做成块儿，就无法设置宽高，也就看不到你设置的背景图片的

然后

a:hover{

background:url(images/bg_2.jpg);

}

举例的这个bg_2.jpg就

2、首先制作好一个自己喜欢的导航条背景，长度和宽度都可设置成和官方一样的。

将自己制作好的导航条背景名字改成nv.png记住如果你做出来的是其他格式的话要转换成.png格式的才行。

3、打开你的ftp上传工具连接到网站目录。

1然后找到template/default/style/t5/下面的nv.png文件，这是官方默然的文件路径，如果你用的是其他模板的话找到nv.png。上传覆盖自己弄好的背景至template/default/style/t5里面后台更新缓存就完成更换了。

【延展】

导航条：

导航条起到了各个页面的关联作用，导航条的类型有很多，有通栏导航条，有为了美观性的中英切换导航，还有带有下拉框的导航条，这些导航条都是根据网站内容而定，因此学习该课程你能够了解现在网站经常出现的导航条样式，并可以灵活的运用。

这个导航栏的效果怎么用jQuery做出来的？我怎么也做不出来了

跟楼主一样也在找这个效果，找到一个叫NAV.JS，可以实现。你去百度一下NAV.JS。 还有一种是supersild插件实现，去下载一个supersild.js

script type="text/javascript"

jQuery(".xnav").slide({

type:"menu", //效果类型

titCell:".m", // 鼠标触发对象

targetCell:".sub", // 效果对象，必须被titCell包含

delayTime:0, // 效果时间

triggerTime:0,//鼠标延迟触发时间

defaultIndex:mindex

//returnDefault:false //返回默认状态

});

/script

以上代码可以插在底部（为了避免冲突）

这个代码要插在顶部 用js可以在静态页面里也实现。

script

var mindex =0;//定义菜单menu

/script

楼主，找到更好的 告诉一下 。