基于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 ...
随机推荐
- 如何设置phpMyAdmin自动登录和取消自动登录
如何设置phpMyAdmin自动登录? 首先在根目录找到config.sample.inc.php复制一份文件名改为config.inc.php(如果已经存在 config.inc.php 文件,则直 ...
- Linux服务器，PHP的10大安全配置实践
PHP被广泛用于各种Web开发.而当服务器端脚本配置错误时会出现各种问题.现今,大部分Web服务器是基于Linux环境下运行(比如:Ubuntu,Debian等).本文例举了十大PHP最佳安全实践方式 ...
- (2016弱校联盟十一专场10.3) A.Best Matched Pair
题目链接 #include<cstdio> #include<cstring> #include<algorithm> #include<stack> ...
- MySql 连接字符串
一.MySQL Connector/ODBC 2.50 (MyODBC 2.50)连接方式 1.本地数据库连接Driver={MySQL};Server=localhost;Option=16834; ...
- C#读取XML文件并取值
1.新建XML文件: <?xml version="1.0" encoding="utf-8" ?> <SystemInfo> < ...
- Intent之复杂数据的传递
想在两个Activity之间传递一个对象Result,在网上差了很多,都需要序列化或者时下Paracelable,等等,试了很多都不行. 后来才制单,这个Result,根本不需要集成Sereriabl ...
- ubuntu 下安装 cx_Oracle库
1.下载3个zip包: 下载地址:http://www.oracle.com/technetwork/database/features/instant-client/index-097480.htm ...
- tp框架之数据添加
1.数组添加 //$attr = array("Code"=>"n088","Name"=>"哈萨克族"); ...
- MyBatis持久层框架使用总结
MyBatis 本是apache的一个开源项目iBatis, 2010年这个项目由apache software foundation 迁移到了google code,并且改名为MyBatis . 2 ...
- Ubuntu 配置有线网 IP
方法1: 最直接的办法,就是在右上端的网络那里点设置,然后add,选以太网,然后IPV4里,手动设置 -- add IP -- 填入IP地址.网关.子网掩码,OK. 方法2,3见网上教程: Ubunt ...