用jquery來設(shè)置網(wǎng)頁導(dǎo)航欄向下滾動時(shí)隱藏，向上滾動時(shí)顯示的代碼

script?type="text/javascript"?src=""/script

創(chuàng)新互聯(lián)公司是一家專業(yè)提供輝南企業(yè)網(wǎng)站建設(shè),專注與成都網(wǎng)站設(shè)計(jì)、網(wǎng)站制作、H5響應(yīng)式網(wǎng)站、小程序制作等業(yè)務(wù)。10年已為輝南眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站設(shè)計(jì)公司優(yōu)惠進(jìn)行中。

script

(function()?{

new?Headroom(document.querySelector("#nav-scroll"),?{?//這里的nav-scroll改為你的導(dǎo)航欄的id或class

offset?:?5,?//?在元素沒有固定之前，垂直方向的偏移量（以px為單位）

tolerance:?5,?//?scroll?tolerance?in?px?before?state?changes????????

classes:?{

initial:?"animated",??//?當(dāng)元素初始化后所設(shè)置的class

pinned:?"slideUp",?//?向上滾動時(shí)設(shè)置的class

unpinned:?"slideDown"?//?向下滾動時(shí)所設(shè)置的class

}

}).init();????

}());

/script

然后，加上樣式就可以了：

.animated?{position:?fixed;top:?0;left:?0;right:?0;transition:?all?.2s?ease-in-out;}

.animated?.slideDown?{top:?-100px;}

.animated?.slideUp?{top:?0;}

jQuery實(shí)現(xiàn)帶滾動導(dǎo)航效果的全屏滾動相冊實(shí)例

本文實(shí)例講述了jQuery實(shí)現(xiàn)帶滾動導(dǎo)航效果的全屏滾動相冊。分享給大家供大家參考。具體如下：

運(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');

//是這元素具有滾動性

makeScrollable($thumbs_wrapper,$thumbs);

});

}

//點(diǎn)擊菜單項(xiàng)目的時(shí)候（向上向下箭頭切換）

//使略縮圖的div層顯示和隱藏當(dāng)前的

//打開菜單（如果有的話）

$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)打開了的菜單的函數(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)鼠標(biāo)移至菜單層的時(shí)候會自動地進(jìn)行滾動

function

makeScrollable($outer,

$inner){

var

extra

=

800;

//獲取菜單的寬度

var

divWidth

=

$outer.width();

//移除滾動條

$outer.css({

overflow:

'hidden'

});

//查找容器上的最后一張圖片

var

lastElem

=

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

$outer.scrollLeft(0);

//當(dāng)用戶鼠標(biāo)離開菜單的時(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);

});

}

});

希望本文所述對大家的jQuery程序設(shè)計(jì)有所幫助。

簡單易懂的jQuery導(dǎo)航(三級菜單)源碼

!--?三級操蛋導(dǎo)航?--

div?class="nav_left"

div?class="nav_leftlist"

h2b/b用戶系統(tǒng)/h2

dl

dtb/b用戶管理/dt

dd

a?class="cur"?href=""商戶信息b/b/a

a?href=""用戶信息b/b/a

/dd

/dl

/div

div?class="nav_leftlist"

h2b/b財(cái)務(wù)系統(tǒng)/h2

dl

dtb/b系統(tǒng)賬務(wù)/dt

dd

a?href=""平臺賬單b/b/a

a?href=""賬單明細(xì)b/b/a

/dd

/dl

dl

dtb/b商戶賬務(wù)/dt

dd

a?href=""商戶賬單b/b/a

a?href=""提現(xiàn)管理b/b/a

/dd

/dl

dl

dtb/b用戶賬務(wù)/dt

dd

a?href=""用戶賬單b/b/a

a?href=""提現(xiàn)管理b/b/a

/dd

/dl

/div

/div

style

.nav_left{background:?#232b35;height:?100%;width:?220px;min-height:?600px;position:?fixed;top:?100px;left:?0;}

.nav_leftlist{}

.nav_leftlist?h2{height:?50px;line-height:?50px;padding-left:?40px;font-size:?16px;background:?#3b444f;color:?#999999;position:?relative;cursor:?pointer;}

.nav_leftlist?h2?b{position:?absolute;top:?20px;left:?13px;width:?16px;height:?9px;background:?url(../images/icon04.png)?no-repeat;background-position:?0?0;cursor:?pointer;}

.nav_leftlist?h2?b.cur{background-position:?-16px?0;}

.nav_leftlist?dl{}

.nav_leftlist?dl?dt{height:?50px;line-height:?50px;background:?#2c3643;font-size:?16px;color:?#ffffff;padding-left:?60px;position:?relative;cursor:?pointer;}

.nav_leftlist?dl?dt?b{position:?absolute;top:?20px;left:?34px;width:?16px;height:?9px;background:?url(../images/icon04.png)?no-repeat;background-position:?0?-10px;}

.nav_leftlist?dl?dt?b.cur{background-position:?-16px?-10px;}

.nav_leftlist?dl?dd{}

.nav_leftlist?dl?dd?a{display:?block;height:?50px;line-height:?50px;color:?#fff;padding-left:?80px;font-size:?16px;position:?relative;}

.nav_leftlist?dl?dd?a.cur{color:?#ee581c;}

.nav_leftlist?dl?dd?a.cur?b{display:?block;position:?absolute;top:?16px;right:?-1px;width:?11px;height:?18px;background:?url(../images/icon04.png)?no-repeat;background-position:?0?-20px;}

/style

/body

script?type="text/javascript"?src="../js/jquery.js"?/script

script?type="text/javascript"?

$(function(){

$('.nav_leftlist').on('click',?'h2',?function(event)?{

$(this).siblings('dl').toggle();

if($(this).siblings('dl').css('display')=='none'){

$(this).find('b').addClass('cur');

}else{

$(this).find('b').removeClass('cur');

}

});

$('.nav_leftlist').on('click',?'dl?dt',?function(event)?{

$(this).siblings('dd').toggle();

if($(this).siblings('dd').css('display')=='none'){

$(this).find('b').addClass('cur');

}else{

$(this).find('b').removeClass('cur');

}

});

})

/script

效果圖：

jquery導(dǎo)航條怎么更改對應(yīng)標(biāo)簽的背景顏色？

可以這樣做：

1、首先a{display：block；

width：60px;

height:40px;

}

把每個(gè)導(dǎo)航超鏈接a標(biāo)簽都設(shè)置成塊兒，設(shè)置好尺寸，具體根據(jù)圖片的尺寸。不做成塊兒，就無法設(shè)置寬高，也就看不到你設(shè)置的背景圖片的

然后

a:hover{

background:url(images/bg_2.jpg);

}

舉例的這個(gè)bg_2.jpg就

2、首先制作好一個(gè)自己喜歡的導(dǎo)航條背景，長度和寬度都可設(shè)置成和官方一樣的。

將自己制作好的導(dǎo)航條背景名字改成nv.png記住如果你做出來的是其他格式的話要轉(zhuǎn)換成.png格式的才行。

3、打開你的ftp上傳工具連接到網(wǎng)站目錄。

1然后找到template/default/style/t5/下面的nv.png文件，這是官方默然的文件路徑，如果你用的是其他模板的話找到nv.png。上傳覆蓋自己弄好的背景至template/default/style/t5里面后臺更新緩存就完成更換了。

【延展】

導(dǎo)航條：

導(dǎo)航條起到了各個(gè)頁面的關(guān)聯(lián)作用，導(dǎo)航條的類型有很多，有通欄導(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)用。