求兼容所有瀏覽器的jquery全屏圖片（鼠標(biāo)滑輪滾動）上下切換的源代碼

網(wǎng)頁設(shè)計中對許多電腦的屏幕大小有所考慮，所以大多時候，網(wǎng)頁都是已1000個像素為標(biāo)準(zhǔn)。因此，如果你用ctrl+鼠標(biāo)中鍵，這樣會使字變大，讓圖片失真，這不是人TX要的效果！%D%A

10余年的海港網(wǎng)站建設(shè)經(jīng)驗，針對設(shè)計、前端、開發(fā)、售后、文案、推廣等六對一服務(wù)，響應(yīng)快，48小時及時工作處理。全網(wǎng)整合營銷推廣的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動調(diào)整海港建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計，從而大程度地提升瀏覽體驗。成都創(chuàng)新互聯(lián)從事“海港網(wǎng)站設(shè)計”,“海港網(wǎng)站推廣”以來，每個客戶項目都認(rèn)真落實執(zhí)行。

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

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

運行效果圖如下：

主要代碼如下：

$(function()

{

//加載時的圖片

var

$loader=

$('#st_loading');

//獲取的ul元素

var

$list=

$('#st_nav');

//當(dāng)前顯示的圖片

var

$currImage

=

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

//加載當(dāng)前的圖片

//同時顯示導(dǎo)航的項

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

$loader.hide();

$currImage.fadeIn(3000);

//滑出導(dǎo)航

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層顯示和隱藏當(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();

});

//點擊略縮圖，改變大的圖片

$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)移至菜單層的時候會自動地進行滾動

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)離開菜單的時候

$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è)計有所幫助。

如何把HTML文件的背景圖片設(shè)成全屏?

步驟一、首先打開需要修改的HTML文件。

步驟二、然后始化樣式，將代碼添加在style/style標(biāo)簽內(nèi)。

步驟三、添加一個div容器，然后命名為bg-box

步驟四、背景全屏需要容器全屏，將bg-box的樣式補全。

步驟五、設(shè)置完畢，圖片背景以及全屏了。

如何使用Jquery實現(xiàn)雙擊進入網(wǎng)頁全屏/退出全屏

!DOCTYPE?html

html?lang="en"

head

meta?charset="UTF-8"

/head

body

button?id="in"雙擊進入全屏/button

button?id="out"雙擊退出全屏/button

script?src=""

/script

script?type="text/javascript"

$(function?()?{

$("body").on("dblclick",?"#in",?function?()?{

requestFullScreen();

});

$("body").on("dblclick",?"#out",?function?()?{

exitFullscreen();

});

//進入全屏

function?requestFullScreen()?{

var?de?=?document.documentElement;

if?(de.requestFullscreen)?{

de.requestFullscreen();

}?else?if?(de.mozRequestFullScreen)?{

de.mozRequestFullScreen();

}?else?if?(de.webkitRequestFullScreen)?{

de.webkitRequestFullScreen();

}

}

//退出全屏

function?exitFullscreen()?{

var?de?=?document;

if?(de.exitFullscreen)?{

de.exitFullscreen();

}?else?if?(de.mozCancelFullScreen)?{

de.mozCancelFullScreen();

}?else?if?(de.webkitCancelFullScreen)?{

de.webkitCancelFullScreen();

}

}

});

/script

/body

/html

效果圖

網(wǎng)站欄目：jquery全屏圖片,html5背景圖片全屏
標(biāo)題路徑：http://jinyejixie.com/article2/dssoeic.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供靜態(tài)網(wǎng)站、面包屑導(dǎo)航、商城網(wǎng)站、品牌網(wǎng)站設(shè)計、App設(shè)計、網(wǎng)站改版

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)