基于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 ...
随机推荐
- thinkphp3.2.3之自动完成的实现
有时候,我们希望系统能够帮我们自动完成一些功能,比如自动为密码加密,忽略空等,这个时候我们就需要利用到自动完成(填写)的功能. ThinkPHP 模型层提供的数据处理方法,主要用于数据的自动处理和过滤 ...
- 微信服务号模板消息接口新增"设置行业"和"添加模板"及细节优化
微信服务号模板消息可以向用户发送重要的服务通知,如信用卡刷卡通知,商品购买成功通知等.昨日,微信团队发布公告称模板消息新增“设置行业”和“添加模板”接口及细节优化,详细变动如下 模板消息[业务通知]自 ...
- Spring面试题
69道Spring面试题和答案 原文地址 译者:深海(1422207401@qq.com) 校对:方腾飞 目录 Spring 概述 依赖注入 Spring beans Spring注解 Spr ...
- php项目整理之no1
1.login.php <head></head> 2.check_login.php 3.user.php 4.getData.php
- python 内置&&递归
lambda 优点: 1:可以简单使用一个脚本来替代我们的函数 2:不用考虑命名的问题 3:简化代码的可读性,不用跳转到def了,省去这样的步骤 内置函数:bif filter:过滤器 map:映射 ...
- UIPickerView选择器的使用方法
UIPickerView是选择列表内容的控件 使用方法与UITableView类似 都需要用array传入数据 用Delegate DataSource中的代理方法实现各种显示功能 @interfac ...
- 如何在github下载开源项目到本地（Coding iOS 客户端为例）
一.前言 以 Coding iOS 客户端 为例讲解如何在github下载开源项目到本地 github地址:https://github.com/Coding/Coding-iOS 二.分析 根据项目 ...
- OF寄存器的判断
1000 0000 ADD 1100 0000 10 1:符号位是否有进位 有则为1 2:最高有效数值位是否向符号位产生进位 有则为1 1 XOR 0=1所以PF=1
- 如何创建 Code Snippet
比如有一行自定义代码段: @property (nonatomic,copy) NSString *<#string#>; 需要添加到 Code Snippet 上,以帮助开发人员开发更便 ...
- LRU算法
LRU,Least recently used[最近最少使用算法],该算法[或变种]被广泛用于缓存管理中,其设计思想是基于:经常被访问的数据在未来一段时间也会被访问,最近最少被访问的数据在未来一段时间 ...