jquery页面切换,jquery实现页面切换

jquery mobile切换页面的几种方法

a href="index.html"普通切换页面，不是在一个页面的html/a

a href="#index" data-transition="slide"带滑动效果的切换当前页面的div页面/a

一个完整的jqm页面

div data-role="page" id="index"

div data-role="header".../div

div role="main" class="ui-content".../div

div data-role="footer".../div

/div

一个页面可以有很多个data=role="page" 他表示一个页面 id就是为了方便超链接点击找到他显示他

还有通过js来切换页面：

$.mobile.changePage("about/us.html", "slideup");

第一个是地址或者ID，第二个效果

相关问答

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

});

Q2: 如何用jquery实现页面跳转？

Query实现页面跳转的3种方法：

Response.Redirect("",false); 目标页面和原页面可以在2个服务器上，可输入网址或相对路径。后面的bool值为是否停止执行当前页。 跳转向新的页面，原窗口被代替。" 浏览器中的URL为新路径。 :Response.Redirect方法导致浏览器链接到一个指定的URL。当Response.Redirect()方法被调用时，它会创建一个应答，应答头中指出了 状态代码302（表示目标已经改变）以及新的目标URL。浏览器从服务器收到该应答，利用应答头中的信息发出一个对新URL的请求。这就是说， 使用Response.Redirect方法时重定向操作发生在客户端，总共涉及到两次与服务器的通信（两个来回）：第一次是对原始页面的请求, 得到一个302应答，第二次是请求302应答中声明的新页面，得到重定向之后的页面。

Server.Transfer("Default2.aspx?name=zhangsan",true); 目标页面和原页面可以在同一个服务器上。 跳转向新的页面，原窗口被代替。 波球论坛 浏览器中的URL为原路径不变。 默认情况下，Server.Transfer方法不会把表单数据或查询字符串从一个页面传递到另一个页面，但只要把该方法的第二个参数设置成 Tb310True，就可以保留第一个页面的表单数据和查询字符串。 同时，使用Server.Transfer时应注意一点：目标页面将使用原始页面创建的应答流，这导致ASP.NET的机器验证检查b310,,博球,博球网,行家心水,赛事推荐,赛事分析,资料库,足球赛事,篮球,NBA,赔率,比分,篮球数据,足球数据. (Machine Authentication Check，MAC)认为新页面的ViewState已被篡改。因此，如果要保留原始页面的表单数据和查询字符串集合， 必须把目标页面Page指令的EnableViewStateMac属性设置成False。

Server.Execute("Default5.aspx?address=beijing); 目标页面和原页面可以在同一个服务器上。 跳转向新的页面，再跳转会原页面。 浏览器中的URL为原路径不变。 当指定的ASPX页面执行完毕，控制流程重新返回原页面发出Server.Execute调用的位置。 这种页面导航方式类似于针对ASPX页面的一次函数调用，被调用的页面能够访问发出调用页面的表单数据和查询字符串集合，所以要把 被调用页面Page指令的EnableViewStateMac属性设置成False。 

Q3: 如何用jquery实现页面跳转

例：img src="img/1.jgp" /;

//点击图片事件

$("img").click(function(){

//点击图片后发送跳转到指定页面的事件。

window.location.href="输入另一个页面的链接"；

Q4: 如何提高jquery moble页面切换速度

现在一般的移动端应用，大都使用css3的transition来做过度页面效果。

你要提高jquery mobile的页面切换速度，从以下几方面入手：

(1) 检查触发切换页面的事件。如果是click, 改为touchstart,避免移动设备的延迟。

(2) jquery mobile我有一段时间没用了，记不太清楚是不是有选项可以移除掉页面过度的效果，这个需要你自己查一下。

(3) 如果你需要使用它的效果，又想增加切换速度，可以检查下jquery mobile的css文件，里面应该有设置transition动画效果的持续时间，找出来，将时间改少即可。