求一個JQuery寫的JS特效，我要打開網(wǎng)頁后一個圖片從網(wǎng)頁的右側(cè)滑出，然后圖片變模糊，再是文字從右側(cè)滑出

!DOCTYPE HTML

寶坻ssl適用于網(wǎng)站、小程序/APP、API接口等需要進行數(shù)據(jù)傳輸應用場景，ssl證書未來市場廣闊！成為創(chuàng)新互聯(lián)建站的ssl證書銷售渠道，可以享受市場價格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：18980820575（備注：SSL證書合作）期待與您的合作！

html

title09/title

head

style

#image, #text{

position:absolute;

right:-1000px;

top:100px;

width:1000px;

height:500px;

display:none;

font-size:500%;

}

img{

width:100%;

height:100%;

}

.x{

overflow-x:hidden;

}

/style

script src="./jquery/jquery-1.8.3.js"/script

/head

body

div id='image'img src='./images/001.jpg'/div

div id='text'this is the text/div

/body

script

$(function(){

$('body').addClass('x');

$('#image').animate({

right:0,

opacity: 'show'

}, 1000, function(){

$('#image').fadeOut(1000, function(){

$('#text').animate({

right:0,

opacity: 'show'

}, 1000, function(){

$('#text').fadeOut(1000, function(){

$('body').removeClass('x');

});

});

});

}

);

});

/script

/html

簡單寫的,?圖片你自己找個?firefox下正確,?別的瀏覽器沒有測

為什么我的jquery特效一閃沒了，就像頁面自動刷新似的

因為點擊submit按鈕會提交表單，

你可以在$("#b1").click(function(){

$("#form1 input:enabled").val("good");

return false; //加上這個取消默認動作，另一個按鈕也一樣

})

求助，凡客誠品網(wǎng)頁中，鼠標上到圖片上，然后再其隔壁顯示大圖的特效用jquery怎么做出來的。

var of = $("#sss").offset();

id是sss元素的坐標為 x: of.left y: of.top

獲得當前元素坐標后，用js就可以計算顯示大圖的位置了

Loading特效，網(wǎng)頁加載中Jquery如何使用加載中的使用

//請求加載提示的顯示和隱藏

$('.loading').ajaxStart(function

()

{

$(this).show();

}).ajaxStop(function

()

{

$(this).hide();

});

注意：以上代碼在

jQuery1.8

及以后的版本不在有效，需要使用

jquery-migrate

向下兼容

才能運行。新版本中，必須綁定在

document

元素上。

$(document).ajaxStart(function

()

{

$('.loading').show();

}).ajaxStop(function

()

{

$('.loading').hide();

});

//如果請求時間太長，可以設(shè)置超時

$.ajax({

timeout

:

500

})

jQuery實現(xiàn)切換頁面過渡動畫效果

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

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

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

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)建兩個遮罩層來遮住頁面內(nèi)容。它們的定位是固定定位，高度等于50vh，寬度為100%。默認情況下，使用CSS

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

class）。

下面的圖片演示了這個過程：

頁面切換特效

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);

}

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

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

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

left

center。當頁面切換開始時它被使用scaleX(1)放大會原來的尺寸。

.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來實現(xiàn)。每一個動畫元素都被添加了不同的transition-delay，以實現(xiàn)不同的元素動畫順序。

JAVASCRIPT

該頁面切換特效中在鏈接上使用data-type="page-transition"屬性，用于觸發(fā)頁面切換事件。當插件檢測到用戶點擊事件，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);

});

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

function

changePage(url,

bool)

{

isAnimating

=

true;

//

trigger

page

animation

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

//...

loadNewContent(url,

bool);

//...

}

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

class被從body中移除，新加載的內(nèi)容會被添加到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);

}

});

}

為了在用戶點擊瀏覽器的回退按鈕時觸發(fā)相同的頁面切換動畫效果，插件中監(jiān)聽popstate事件，并在它觸發(fā)時執(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實現(xiàn)網(wǎng)頁打開時瀏覽器圖標閃爍

jquery實現(xiàn)網(wǎng)頁打開時瀏覽器圖標閃爍法有bug:在打開時,傳值判斷是頁面來的,還是彈窗來的,如果是彈窗... -webkit-backface-v 使用 jQuery 快速高效制作 網(wǎng)頁特效

jQuery 庫中實現(xiàn)的，并不是瀏覽器的原生事件。

不過最重要的是把菜單不停閃動的問題解決了！

網(wǎng)頁標題：jquery網(wǎng)頁特效,jquery特效代碼
本文來源：http://chinadenli.net/article33/dsgesss.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)建站、商城網(wǎng)站、靜態(tài)網(wǎng)站、Google、虛擬主機、軟件開發(fā)

廣告

聲明：本網(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)