jQuery實(shí)現(xiàn)切換頁面過渡動(dòng)畫效果

直接為大家介紹制作過程，希望大家可以喜歡。

成都創(chuàng)新互聯(lián)公司長期為成百上千家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺(tái)，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為溫泉企業(yè)提供專業(yè)的網(wǎng)站建設(shè)、做網(wǎng)站，溫泉網(wǎng)站改版等技術(shù)服務(wù)。擁有十余年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。

HTML結(jié)構(gòu)

該頁面切換特效的HTML結(jié)構(gòu)使用一個(gè)main元素來作為頁面的包裹元素，div.cd-cover-layer用于制作頁面切換時(shí)的遮罩層，div.cd-loading-bar是進(jìn)行ajax加載時(shí)的loading進(jìn)度條。

main

div

class="cd-index

cd-main-content"

div

h1Page

Transition/h1

!--

your

content

here

--

/div

/div

/main

div

class="cd-cover-layer"/div

!--

this

is

the

cover

layer

--

div

class="cd-loading-bar"/div

!--

this

is

the

loading

bar

--

CSS樣式

該頁面切換特效中使用body::before和body::after偽元素在頁面切換過程中創(chuàng)建兩個(gè)遮罩層來遮住頁面內(nèi)容。它們的定位是固定定位，高度等于50vh，寬度為100%。默認(rèn)情況下，使用CSS

transform屬性將它們隱藏起來（translateY(-100%)/translateY(100%)）。當(dāng)用戶切換頁面的時(shí)候，這些元素被移動(dòng)回視口當(dāng)中（通過在body元素上添加.page-is-changing

class）。

下面的圖片演示了這個(gè)過程：

頁面切換特效

body::after,

body::before

{

/*

these

are

the

2

half

blocks

which

cover

the

content

once

the

animation

is

triggered

*/

height:

50vh;

width:

100%;

position:

fixed;

left:

0;

}

body::before

{

top:

0;

transform:

translateY(-100%);

}

body::after

{

bottom:

0;

transform:

translateY(100%);

}

body.page-is-changing::after,

body.page-is-changing::before

{

transform:

translateY(0);

}

頁面切換時(shí)，頁面內(nèi)容的淡入淡出效果是通過改變div.cd-cover-layer的透明度實(shí)現(xiàn)的。它覆蓋了.cd-main-content元素，并具有相同的背景色，然后在body被添加.page-is-changing

class的時(shí)候，將透明度從0修改為1。

Loading進(jìn)度條使用.cd-loading-bar::before偽元素來制作。默認(rèn)它被縮小（scaleX(0)）和transform-origin:

left

center。當(dāng)頁面切換開始時(shí)它被使用scaleX(1)放大會(huì)原來的尺寸。

.cd-loading-bar

{

/*

this

is

the

loading

bar

-

visible

while

switching

from

one

page

to

the

following

one

*/

position:

fixed;

height:

2px;

width:

90%;

}

.cd-loading-bar::before

{

/*

this

is

the

progress

bar

inside

the

loading

bar

*/

position:

absolute;

left:

0;

top:

0;

height:

100%;

width:

100%;

transform:

scaleX(0);

transform-origin:

left

center;

}

.page-is-changing

.cd-loading-bar::before

{

transform:

scaleX(1);

}

特效中平滑的過渡效果使用CSS

Transitions來實(shí)現(xiàn)。每一個(gè)動(dòng)畫元素都被添加了不同的transition-delay，以實(shí)現(xiàn)不同的元素動(dòng)畫順序。

JAVASCRIPT

該頁面切換特效中在鏈接上使用data-type="page-transition"屬性，用于觸發(fā)頁面切換事件。當(dāng)插件檢測到用戶點(diǎn)擊事件，changePage()方法將被執(zhí)行。

$('main').on('click',

'[data-type="page-transition"]',

function(event){

event.preventDefault();

//detect

which

page

has

been

selected

var

newPage

=

$(this).attr('href');

//if

the

page

is

not

animating

-

trigger

animation

if(

!isAnimating

)

changePage(newPage,

true);

});

這個(gè)方法會(huì)觸發(fā)頁面切換動(dòng)畫，并通過loadNewContent()方法加載新內(nèi)容。

function

changePage(url,

bool)

{

isAnimating

=

true;

//

trigger

page

animation

$('body').addClass('page-is-changing');

//...

loadNewContent(url,

bool);

//...

}

當(dāng)新的內(nèi)容被加載后，會(huì)替代原來main元素中的內(nèi)容。.page-is-changing

class被從body中移除，新加載的內(nèi)容會(huì)被添加到window.history中（使用pushState()方法）。

function

loadNewContent(url,

bool)

{

var

newSectionName

=

'cd-'+url.replace('.html',

''),

section

=

$('div

class="cd-main-content

'+newSectionName+'"/div');

section.load(url+'

.cd-main-content

*',

function(event){

//

load

new

content

and

replace

main

content

with

the

new

one

$('main').html(section);

//...

$('body').removeClass('page-is-changing');

//...

if(url

!=

window.location){

//add

the

new

page

to

the

window.history

window.history.pushState({path:

url},'',url);

}

});

}

為了在用戶點(diǎn)擊瀏覽器的回退按鈕時(shí)觸發(fā)相同的頁面切換動(dòng)畫效果，插件中監(jiān)聽popstate事件，并在它觸發(fā)時(shí)執(zhí)行changePage()函數(shù)。

$(window).on('popstate',

function()

{

var

newPageArray

=

location.pathname.split('/'),

//this

is

the

url

of

the

page

to

be

loaded

newPage

=

newPageArray[newPageArray.length

-

1];

if(

!isAnimating

)

changePage(newPage);

});

JQuery切換樣式

這個(gè)用jQuery實(shí)現(xiàn)一般是添加一個(gè)類和刪除一個(gè)類。

首先要有一個(gè)寫好的class樣式類。通過下面這個(gè)代碼實(shí)現(xiàn)：

var obj2 = $("div"); // 改變樣式的對象

obj2.addClass("className"); // 添加樣式，className為已經(jīng)存在一個(gè)class名字

obj2.removeClass("className"); // 刪除樣式

切換樣式

JQuery中有一個(gè)方法toggle()，JQuery代碼如下：

1 toggleBtn.toggle(function(){

2 //元素顯示 代碼③

3 }, function(){

4 //元素隱藏 代碼④

5 })

toggle()方法此處的作用是交替執(zhí)行代碼③和代碼④兩個(gè)函數(shù)，如果元素原來是顯示的，則隱藏它：如果元素原來是隱藏的，則顯示它。此時(shí)，toggle()方法主要是控制行為上的重復(fù)切換。

另外JQuery還提供了一個(gè)toggleClass()方法控制樣式上的重復(fù)切換。如果類名存在則刪除它，如果類名不存在則添加它。例如對p元素進(jìn)行toggleClass()方法操作。

1 $("p").toggleClass("another"); //重復(fù)切換類名“another”

當(dāng)不斷單擊“切換樣式”按鈕時(shí)，p元素的class的值就會(huì)在“myClass”和“myClass another”之間重復(fù)切換。

jQuery如何實(shí)現(xiàn)：點(diǎn)擊按鈕-文本之間的切換

已知的文本（綠色，紅色），那么你可以使用if判斷來做；

$(".btn").on("click",function(){

var?text?=?$("#text").html();

if(text=="綠色"){

$("#text").html("紅色");

}else?if(text=="紅色"){

$("#text").html("綠色");

}

})

jquery點(diǎn)擊圖標(biāo)來回切換的幾種方法（如開關(guān)

先給導(dǎo)航塊的a標(biāo)簽設(shè)置img屬性和data-img屬性；img屬性為未選中圖片，data-img為選中圖片。第一個(gè)按鈕的img圖片應(yīng)設(shè)置為默認(rèn)選中的狀態(tài)。

//點(diǎn)擊每個(gè)按鈕后進(jìn)行按鈕切換圖片操作

$(".tab-bar-item").on("click",?function?()?{

//先const clickImg變量為他的data屬性（選中圖片） ，然后找到img圖片的src屬性將未選中的圖片點(diǎn)擊后替換為選中圖片

const?clickImg?=?$(this).data("img");

$(this).find("img").attr("src",clickImg);

//找到被點(diǎn)擊標(biāo)簽的其他兄弟標(biāo)簽，用each遍歷 const noclick為未選中的img圖片，將點(diǎn)擊標(biāo)簽的其他兄弟標(biāo)簽的img換為未選中圖片就可以了

$(this).siblings().each(function(){

const?noclickImg=?$(this).attr("img")

$(this).find("img").attr("src",noclickImg);

})

}

網(wǎng)頁題目：jquery切換,jquery切換圖片路徑
URL地址：http://chinadenli.net/article1/dsgseid.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制開發(fā)、網(wǎng)站內(nèi)鏈、動(dòng)態(tài)網(wǎng)站、品牌網(wǎng)站建設(shè)、自適應(yīng)網(wǎng)站、商城網(wǎng)站

廣告

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