基于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 ...
随机推荐
- Swift3.0P1 语法指南——控制流
原档:https://developer.apple.com/library/prerelease/ios/documentation/Swift/Conceptual/Swift_Programmi ...
- C和指针 第十一章 动态内存分配
声明数组时,必须指定数组长度,才可以编译,但是如果需要在运行时,指定数组的长度的话,那么就需要动态的分配内存. C函数库stdlib.h提供了两个函数,malloc和free,分别用于执行动态内存分配 ...
- parse_str怎么用php
1.需求 了解parse_str的用法 2.作用 parse_str接受2个参数,把第一个参数查询字符串解析到第二个参数数组当中,会覆盖数组中原来的值 parse_str($_SERVER['QUER ...
- Linux下对比两个文件夹的方法
最近拿到一份源代码,要命的是这份源代码是浅克隆模式的git包,所以无法完整显示里面的修改的内容. 今天花了一点点时间,找了一个在Linux对比两个文件夹的方法. 其实方法很简单,用meld 去对比两个 ...
- tornadod的异步代码
#!/usr/bin/env python # -*- coding: utf-8 -*- import tornado.httpserver import tornado.ioloop import ...
- 深入Nginx
Nginx功能模块汇总 --with-http_core_module #包括一些核心的http参数配置,对应nginx的配置为http区块部分 --with-http_access_module # ...
- Win10环境下安装Vmware+Ubuntu14 注意点
下载相关软件正常安装完成后可能会碰到以下两个问题,这里备注一下,备用 1.Ubuntu的root密码设置 2.Vmware网络连接设成桥接之后,Win10可以ping通Ubuntu,但Ubuntu无法 ...
- jstl foreach标签
forEach标签 forEach标签用来循环. 属性: * var :定义循环变量 * begin :从哪开始 * end :到哪结束 * step :递增 * items :遍历的内容 * var ...
- 调试asp.net网页时不显示treeview的原因
在.net中本地调试asp.net网页时,treeview控件显示为文字方式,原因是在http://localhost/下面找不到webctrl_client的路径,解决的方法是把webctrl_cl ...
- Xshell5连接虚拟机出现连Could not connect to '192.168.47.128' (port 22): Connection failed，解决办法
该日记写于2016年11月28日.在用Xshell5连接ubuntu虚拟OS时一直连接不上.出现这种情况的原因可能很多,有像百度上面说的没有关闭linux的防火墙,没有启动linux的ssh服务.但这 ...