基于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 ...
随机推荐
- windows环境下面安装Apache2.4+MySql5.7+PHP5.6
之前学习PHP一致是只用phpStudy集成开发环境,这对于新手而言无疑是帮助极大的,因为傻瓜式安装与使用方法减少了我们很多不必要的麻烦.但是作为一名合格的PHP开发人员,掌握PHP+MySQL+Ap ...
- MySQL ERROR 1698 (28000) 错误
之前MySQL服务端本机上使用密码登陆root账号是没有问题的,但是今天不知道是因为动了哪里,登陆失败并有这个错误代码: ~$ mysql -u root -p Enter password: ERR ...
- LwIP移植和使用
LwIP移植和使用 本手册基于lwip-1.4.x编写,本人没有移植过1.4.0之前的版本,更早的版本或许有差别.如果看官发现问题欢迎联系<QQ: 937431539 email: 93743 ...
- 详细解读Android中的搜索框—— SearchView
以前总是自己写的 今天看看别人做的 本篇讲的是如何用searchView实现搜索框,其实原理和之前的没啥差别,也算是个复习吧. 一.Manifest.xml 这里我用一个activity进行信息的输入 ...
- C#获取命令行输出内容的方法
获取命令行输出内容的方式有传统和异步两种方式. 传统方式: public static void RunExe(string exePath, string arguments, out string ...
- 数组排序sort()
数组排序sort() sort()方法使数组中的元素按照一定的顺序排列. 语法: arrayObject.sort(方法函数) 参数说明: 1.如果不指定<方法函数>,则按unicode码 ...
- CoreAnimation 之CATextLayer
如果你想在一个图层中显示文字,完全可以借助图层代理直接将Core Graphics写入图层的内容(这就是UILabel的精髓).如果雨果寄宿于图层的视图,直接在图层上操作,其实相当繁琐.你要为每一个显 ...
- Memcache之内存分配机制
可参见:http://blog.csdn.net/hguisu/article/details/7353482
- 响应式字体(js控制)
window.onload=function(x){if ('addEventListener' in document) {document.addEventListener('DOMContent ...
- 无废话ExtJs 入门教程二十[数据交互：AJAX]
无废话ExtJs 入门教程二十[数据交互:AJAX] extjs技术交流,欢迎加群(521711109) 1.代码如下: 1 <!DOCTYPE html PUBLIC "-//W3C ...