例如導(dǎo)航的div div class="nav"a href="index.html"首頁(yè)/aa href="product.html"產(chǎn)品/aa href="case.html"案例中心/a/div
專(zhuān)注于為中小企業(yè)提供成都網(wǎng)站建設(shè)、成都網(wǎng)站制作服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)勐臘免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了上千余家企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過(guò)網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。
下面的html內(nèi)容：
div class="main"
div class="content"首頁(yè)的內(nèi)容/div
div class="content"產(chǎn)品的內(nèi)容/div
div class="content"案例中心的內(nèi)容/div
/div
至于class=“content”可以是你自己加上的為了便于jQuery獲取，沒(méi)有這個(gè)樣式類(lèi)
script type="text/javascript"
$(document).ready(function()
{
var tabs = $('.nav a');
var cons = $('.main div.content');
tabs.first().addClass("now").show(); //默認(rèn)第一個(gè)顯示
cons.first().show().nextAll().hide(); //默認(rèn)第一個(gè)顯示，其他隱藏
tabs.each(function(index){
$(this).mouseover(function(){
$(this).addClass("now").siblings().removeClass("now");
cons.eq(index).show().siblings().hide();
});
});
});
/script
本文實(shí)例講述了jQuery實(shí)現(xiàn)兩款有動(dòng)畫(huà)功能的導(dǎo)航菜單代碼。分享給大家供大家參考。具體如下：
這里介紹兩個(gè)有動(dòng)畫(huà)功能的jQuery導(dǎo)航菜單，每個(gè)具備移動(dòng)背景的效果，第二則是漸變背景效果，兩個(gè)都不錯(cuò)，根據(jù)你的喜好選擇了，菜單的風(fēng)格和顏色自己修改一下就能用了。
運(yùn)行效果截圖如下：
在線(xiàn)演示地址如下：
具體代碼如下：
!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兩個(gè)有動(dòng)畫(huà)功能的導(dǎo)航菜單/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="#"網(wǎng)站首頁(yè)/a
a
href="#"關(guān)于我們/a
a
href="#"新聞中心/a
a
href="#"產(chǎn)品中心/a
a
href="#"解決方案/a
a
href="#"聯(lián)系我們/a
/div
/div
div
style="clear:both;height:50px;"/div
div
class="menu"
id="test2"
div
class="showhover"/div
div
class="showmenu"
a
href="#"網(wǎng)站首頁(yè)/a
a
href="#"關(guān)于我們/a
a
href="#"新聞中心/a
a
href="#"產(chǎn)品中心/a
a
href="#"解決方案/a
a
href="#"聯(lián)系我們/a
/div
/div
/body
/html
希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。
本文實(shí)例講述了jQuery實(shí)現(xiàn)帶滾動(dòng)導(dǎo)航效果的全屏滾動(dòng)相冊(cè)。分享給大家供大家參考。具體如下：
運(yùn)行效果圖如下：
主要代碼如下：
$(function()
{
//加載時(shí)的圖片
var
$loader=
$('#st_loading');
//獲取的ul元素
var
$list=
$('#st_nav');
//當(dāng)前顯示的圖片
var
$currImage
=
$('#st_main').children('img:first');
//加載當(dāng)前的圖片
//同時(shí)顯示導(dǎo)航的項(xiàng)
$('img').load(function(){
$loader.hide();
$currImage.fadeIn(3000);
//滑出導(dǎo)航
setTimeout(function(){
$list.animate({'left':'0px'},500);
},
1000);
}).attr('src',$currImage.attr('src'));
//計(jì)算出將被顯示的略縮圖所在的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');
//是這元素具有滾動(dòng)性
makeScrollable($thumbs_wrapper,$thumbs);
});
}
//點(diǎn)擊菜單項(xiàng)目的時(shí)候（向上向下箭頭切換）
//使略縮圖的div層顯示和隱藏當(dāng)前的
//打開(kāi)菜單（如果有的話(huà)）
$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();
});
//點(diǎn)擊略縮圖，改變大的圖片
$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'});
});
//隱藏當(dāng)前已經(jīng)打開(kāi)了的菜單的函數(shù)
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');
}
//是當(dāng)前的略縮圖div層滾動(dòng)
//當(dāng)鼠標(biāo)移至菜單層的時(shí)候會(huì)自動(dòng)地進(jìn)行滾動(dòng)
function
makeScrollable($outer,
$inner){
var
extra
=
800;
//獲取菜單的寬度
var
divWidth
=
$outer.width();
//移除滾動(dòng)條
$outer.css({
overflow:
'hidden'
});
//查找容器上的最后一張圖片
var
lastElem
=
$inner.find('img:last');
$outer.scrollLeft(0);
//當(dāng)用戶(hù)鼠標(biāo)離開(kāi)菜單的時(shí)候
$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);
});
}
});
希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。
你好 經(jīng)測(cè)試? 效果如下
問(wèn)題分析：沒(méi)效果是不是js導(dǎo)入問(wèn)題? 建議alert（“1”）看看有沒(méi)有效果? 我這效果是有的
希望能幫到你 謝謝
可以這樣做：
1、首先a{display：block；
width：60px;
height:40px;
}
把每個(gè)導(dǎo)航超鏈接a標(biāo)簽都設(shè)置成塊兒，設(shè)置好尺寸，具體根據(jù)圖片的尺寸。不做成塊兒，就無(wú)法設(shè)置寬高，也就看不到你設(shè)置的背景圖片的
然后
a:hover{
background:url(images/bg_2.jpg);
}
舉例的這個(gè)bg_2.jpg就
2、首先制作好一個(gè)自己喜歡的導(dǎo)航條背景，長(zhǎng)度和寬度都可設(shè)置成和官方一樣的。
將自己制作好的導(dǎo)航條背景名字改成nv.png記住如果你做出來(lái)的是其他格式的話(huà)要轉(zhuǎn)換成.png格式的才行。
3、打開(kāi)你的ftp上傳工具連接到網(wǎng)站目錄。
1然后找到template/default/style/t5/下面的nv.png文件，這是官方默然的文件路徑，如果你用的是其他模板的話(huà)找到nv.png。上傳覆蓋自己弄好的背景至template/default/style/t5里面后臺(tái)更新緩存就完成更換了。
【延展】
導(dǎo)航條：
導(dǎo)航條起到了各個(gè)頁(yè)面的關(guān)聯(lián)作用，導(dǎo)航條的類(lèi)型有很多，有通欄導(dǎo)航條，有為了美觀性的中英切換導(dǎo)航，還有帶有下拉框的導(dǎo)航條，這些導(dǎo)航條都是根據(jù)網(wǎng)站內(nèi)容而定，因此學(xué)習(xí)該課程你能夠了解現(xiàn)在網(wǎng)站經(jīng)常出現(xiàn)的導(dǎo)航條樣式，并可以靈活的運(yùn)用。
跟樓主一樣也在找這個(gè)效果，找到一個(gè)叫NAV.JS，可以實(shí)現(xiàn)。你去百度一下NAV.JS。 還有一種是supersild插件實(shí)現(xiàn)，去下載一個(gè)supersild.js
script type="text/javascript"
jQuery(".xnav").slide({
type:"menu", //效果類(lèi)型
titCell:".m", // 鼠標(biāo)觸發(fā)對(duì)象
targetCell:".sub", // 效果對(duì)象，必須被titCell包含
delayTime:0, // 效果時(shí)間
triggerTime:0,//鼠標(biāo)延遲觸發(fā)時(shí)間
defaultIndex:mindex
//returnDefault:false //返回默認(rèn)狀態(tài)
});
/script
以上代碼可以插在底部（為了避免沖突）
這個(gè)代碼要插在頂部 用js可以在靜態(tài)頁(yè)面里也實(shí)現(xiàn)。
script
var mindex =0;//定義菜單menu
/script
樓主，找到更好的 告訴一下 。
重慶分公司
重慶分公司
