jquery网页特效,jquery特效代码

求一个JQuery写的JS特效，我要打开网页后一个图片从网页的右侧滑出，然后图片变模糊，再是文字从右侧滑出

!DOCTYPE HTML

宝坻ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景，ssl证书未来市场广阔！成为创新互联建站的ssl证书销售渠道，可以享受市场价格4-6折优惠！如果有意向欢迎电话联系或者加微信：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; //加上这个取消默认动作，另一个按钮也一样

})

求助，凡客诚品网页中，鼠标上到图片上，然后再其隔壁显示大图的特效用jquery怎么做出来的。

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

id是sss元素的坐标为 x: of.left y: of.top

获得当前元素坐标后，用js就可以计算显示大图的位置了

Loading特效，网页加载中Jquery如何使用加载中的使用

//请求加载提示的显示和隐藏

$('.loading').ajaxStart(function

()

{

$(this).show();

}).ajaxStop(function

()

{

$(this).hide();

});

注意：以上代码在

jQuery1.8

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

jquery-migrate

向下兼容

才能运行。新版本中，必须绑定在

document

元素上。

$(document).ajaxStart(function

()

{

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

}).ajaxStop(function

()

{

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

});

//如果请求时间太长，可以设置超时

$.ajax({

timeout

:

500

})

jQuery实现切换页面过渡动画效果

直接为大家介绍制作过程，希望大家可以喜欢。

HTML结构

该页面切换特效的HTML结构使用一个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伪元素在页面切换过程中创建两个遮罩层来遮住页面内容。它们的定位是固定定位，高度等于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);

}

页面切换时，页面内容的淡入淡出效果是通过改变div.cd-cover-layer的透明度实现的。它覆盖了.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来实现。每一个动画元素都被添加了不同的transition-delay，以实现不同的元素动画顺序。

JAVASCRIPT

该页面切换特效中在链接上使用data-type="page-transition"属性，用于触发页面切换事件。当插件检测到用户点击事件，changePage()方法将被执行。

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

});

这个方法会触发页面切换动画，并通过loadNewContent()方法加载新内容。

function

changePage(url,

bool)

{

isAnimating

=

true;

//

trigger

page

animation

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

//...

loadNewContent(url,

bool);

//...

}

当新的内容被加载后，会替代原来main元素中的内容。.page-is-changing

class被从body中移除，新加载的内容会被添加到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);

}

});

}

为了在用户点击浏览器的回退按钮时触发相同的页面切换动画效果，插件中监听popstate事件，并在它触发时执行changePage()函数。

$(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实现网页打开时浏览器图标闪烁

jquery实现网页打开时浏览器图标闪烁法有bug:在打开时,传值判断是页面来的,还是弹窗来的,如果是弹窗... -webkit-backface-v 使用 jQuery 快速高效制作 网页特效

jQuery 库中实现的，并不是浏览器的原生事件。

不过最重要的是把菜单不停闪动的问题解决了！