基于Jquery的页面过渡效果(原创)
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
name="viewport">
<style type="text/css">
*
{
box-sizing: border-box;
}
Body
{
width:350px;
height:100%;
border:0px;
margin:0px;
padding:0px;
}
#Page
{
width: 100%;
height: 100%;
border: 0px;
margin: 0px;
padding: 0px;
}
#NextPage
{
width: 100%;
height: 100%;
border: 0px;
margin: 0px;
padding: 0px;
display:none;
}
.PageTransition
{
-webkit-animation:PageTransition 0.25s;
-webkit-animation-direction:alternate;
-webkit-animation-iteration-count:2;
}
@-webkit-keyframes PageTransition /* Safari and Chrome */
{
to{-webkit-transform:rotateY(90deg);}
from{-webkit-transform:rotateY(0deg);}
}
</style>
<script src="../Script/jquery-1.9.1.min.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
//旋转过渡页面(Page为跳转链接地址)
//来自：http://www.cnblogs.com/cielwater
function PageTransition(Page) {
$("Body").addClass("PageTransition");
$("#NextPage").attr("src", Page);
setTimeout(function () {
$("#Page").hide().remove();
$("#NextPage").show().attr("id", "Page");
$("Body").append('<iframe id="NextPage" src=""></iframe>');
setTimeout(function () {
$("Body").removeClass("PageTransition");
}, 250)
}, 250);
}
</script>
</head>
<body>
<iframe id="Page" src=""></iframe>
<iframe id="NextPage" src=""></iframe>
</body>
</html>
<!DOCTYPE html>
<html>
<head runat="server">
<title></title>
<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
name="viewport" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<style type="text/css">
*
{
box-sizing: border-box;
}
html
{
height:100%;
border:0px;
margin:0px;
padding:0px;
overflow:hidden;
-webkit-perspective:1000px;
perspective:1000px;
background-color:White;
}
body
{
width:100%;
height:100%;
border:0px;
margin:0px;
padding:0px;
overflow:hidden;
}
#Page
{
width: 100%;
height: 100%;
border: 0px;
margin: 0px;
padding: 0px;
}
#NextPage
{
width: 100%;
height: 100%;
border: 0px;
margin: 0px;
padding: 0px;
display:none;
}
.PageTransitionPlay
{
-webkit-animation:PageTransitionPlay 0.25s;
animation:PageTransitionPlay 0.25s;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
perspective-origin: 0 50%;
animation-fill-mode:forwards;
-webkit-animation-fill-mode:forwards;
}
.PageTransitionOver
{
-webkit-animation:PageTransitionOver 0.25s;
animation:PageTransitionOver 0.25s;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
#Menu
{
position:fixed;
bottom:0px;
padding:0px;
margin:0px;
}
button
{
height:40px;
}
@-webkit-keyframes PageTransitionPlay /* Safari and Chrome */
{
to{-webkit-transform:rotateY(90deg);}
from{-webkit-transform:rotateY(0deg);}
}
@-webkit-keyframes PageTransitionOver /* Safari and Chrome */
{
to{-webkit-transform:rotateY(360deg);}
from{-webkit-transform:rotateY(270deg);}
}
@keyframes PageTransitionPlay
{
to{transform:rotateY(0deg);}
from{transform:rotateY(90deg);}
}
@keyframes PageTransitionOver
{
to{transform:rotateY(360deg);}
from{transform:rotateY(27deg);}
}
</style>
<script src="../Script/jquery-1.9.1.min.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">//旋转过渡页面(Page为跳转链接地址)
//来自：http://www.cnblogs.com/cielwater
function PageTransition(Page) {
$("Body").addClass("PageTransitionPlay");
$("#NextPage").attr("src", Page);
setTimeout(function () {
$("#Page").hide().remove();
$("#NextPage").show().attr("id", "Page");
$("Body").addClass("PageTransitionOver");
$("Body").append('<iframe id="NextPage" src=""></iframe>');
setTimeout(function () {
$("Body").removeClass("PageTransitionPlay");
$("Body").removeClass("PageTransitionOver");
}, 250);
}, 250);
}</script>
</head>
<body>
<iframe id="Page" src=""></iframe>
<iframe id="NextPage" src=""></iframe>
</body>
</html>
因为使用JQueryMObile的时候页面的脚本总是不像自己想的运行，于是自己干脆使用Iframe写了页面过渡效果
将ID为Page的Iframe的Src链接设置为首页地址就OK了
在Iframe中页面调用PageTransition()函数就可以旋转过渡页面了
第一个效果类似卷轴展开
第二个效果为翻页
基于Jquery的页面过渡效果(原创)的更多相关文章
- 基于jquery的页面代码的优化
高亮显示,选中的文字链接 显示效果如下 默认选择“通知公告”效果 通知公告 学院动态 行业动态 选择“学院动态”效果 通知公告 学院动态 行业动态 选择“行业动态”效果 通知公 ...
- 基于jquery的页面预载入效果(loading)
css代码: <style> #loading{ position:absolute; width:300px; top:0px; left:50%; margin-left:-150px ...
- 基于jquery的页面分屏切换模板
闲来无事,搞了个页面的分屏效果,先来看下效果: 出于可自定义宽高的目的,屏幕分块由CSS控制,由js控制估计等分模块效果一般. 程序相关说明: HTML结构: <div class=" ...
- 基于jQuery实现页面滚动时顶部导航显示隐藏效果
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8& ...
- 基于jquery实现页面loading加载效果
实现loading 加载提示 ······ 透明遮罩 居中效果 具体代码如下: CSS样式部分: <style type="text/css"> .background ...
- 基于Jquery+Ajax+Json+高效分页
摘要 分页我相信大家存储过程分页已经很熟悉了,ajax更是耳熟能详了,更别说我们的json,等等. 如果说您没用过这些东东的话,我相信看完这篇博文会对您有帮助的,,如果有任何问题不懂或者有bug没问题 ...
- 基于JQuery实现滚动到页面底端时自动加载更多信息
基于JQuery实现滚动到页面底端时自动加载更多信息 关键代码: 代码如下: var stop=true; $(window).scroll(function(){ totalheight = par ...
- 基于jQuery鼠标滚轮滑动到页面节点部分
基于jQuery鼠标滚轮滑动到页面节点部分.这是一款基于jQuery+CSS3实现的使用鼠标滚轮或者手势滑动到页面节点部分特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: &l ...
- 基于jQuery页面窗口拖动预览效果
今天给大家分享一款基于Query页面窗口拖动预览效果.这是一款基于jQuery+HTML5实现的模拟页面窗口显示拖动窗口预览特效.这款实例适用浏览器:IE8.360.FireFox.Chrome.Sa ...
随机推荐
- js创建，获取，检测cookie
- PHP保留2位小数 格式化小数、浮点数
JS保留两位小数例子 四舍五入使用函数 toFixed() <html> <head> </head> <script language="java ...
- 【总结】/etc/rc.d/rc.local 与 /etc/profile .bash_profile .bashrc 文件执行顺序
登陆shell与交互式非登陆shell的区别 登录shell 所谓登录shell,指的是当用户登录系统时所取的那个 shell.登录shell属于交互式shell. 登录shell将查找4个不同的启动 ...
- 单词words
论一类脑筋急转弯题和奇技淫巧题的解题技巧 [题意] 给定n个长为m且只包含xyz的字符串,定义两个字符串的相似程度为它们对应位置相同字符个数(比如xyz和yyz的相似程度为2,后两位相同),分别求出相 ...
- ecshop调用后台指定广告位下所有广告循环
ecshop本身的广告调用规则是:对某个广告位下的广告列表随机显示其中一条. 而我们有时需要将某个广告位下的所有广告全部显示出来,那么如何处理呢,下面就自己做了一个函数: \includes\lib_ ...
- RobotFrameWork（五）控制流之if语句——Run Keyword If
5.1 语句简介 robotframework中的if语句是使用关键字Run Keyword If来代替的 Run Keyword If 函数释义:如果给出的判断条件满足,就执行给出的关键字. 函数结 ...
- xss小试
javascript:alert(document.cookie)javascript:alert(document.domain) 预防: HTTP cookie设置为readOnly 豆瓣 coo ...
- aes加密C语言
/** * \file aes.h * * \brief AES block cipher * * Copyright (C) 2006-2010, Brainspark B.V. * * This ...
- iOS中关于NavigationController中preferredStatusBarStyle一直不执行的问题
重点:真的能改吗?跑起来毛用没有. 1.还要在plist文件里把View controller-based status bar appearance设置成YES. 2.一定要写UINavigatio ...
- iOS 状态栏隐藏显示
在 info.plist 文件中 配置 View controller-based status bar appearance 对应的值为 NO 这样可以使用 application 对象来设置 状态 ...