跨平台移动开发模仿正点日历引导页弹一弹动画

正点日历引导页弹一弹动画效果

正点日历引导页弹一弹动画 -示例代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>XuijsDemo</title>
<script src="content/scripts/xui-2.2.0.min.js"></script>
<script src="content/scripts/emile.js"></script>
<style type="text/css" media="screen">
body {margin:0;padding:0;background:#F5F6FA;
}
#container {overflow:hidden;position:absolute;left:0;top:0;width:320px;height:480px;}
#carda {position:absolute;left:0;top:0;width:320px;height:480px;background:#A4CDE0;
}
#cardb {position:absolute;left:0;top:500px;width:320px;height:480px;
background:#0073AA;
}
h1 {text-align:center;
}
button {display:block;font-size:2em;width:280px;margin:0 auto 20px auto;
}
</style>
<script>
function initialise()
{}
//style  样式处理
function styleshow()
{}
//style 动画、形变、渐变
function fx()
{emile('carda', 'top:-100px;', {duration: 1,after: function(){emile('cardb', 'top:-600px;padding-bottom:0px;opacity:1', { duration: 1, easing: bounce,after: function(){emile('carda', 'top:0px;padding-bottom:0px;opacity:1', { duration: 2000, easing: bounce});}});}});}
function bounce(pos) {if (pos < (1/2.75)) {return (7.5625*pos*pos);} else if (pos < (2/2.75)) {return (7.5625*(pos-=(1.5/2.75))*pos + .75);
    } else if (pos < (2.5/2.75)) {return (7.5625*(pos-=(2.25/2.75))*pos + .9375);
    } else {return (7.5625*(pos-=(2.625/2.75))*pos + .984375);
    }}
</script>
</head>
<body onload="initialise();styleshow();fx();">
<div id="container"><div id="carda"><img src="Content/Images/banner1.png"  style="width:320px; height:480px;" /></div><div id="cardb"><img src="Content/Images/banner1.png" style="width:320px; height:480px;" /></div>
</div>
</body>
</html>

面板隐藏效果

面板隐藏效果示例代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>XuijsDemo</title>
<script src="content/scripts/xui-2.2.0.min.js"></script>
<script src="content/scripts/emile.js"></script>
<style type="text/css" media="screen">
body {margin:0;padding:0;background:#180052;
}
#container {overflow:hidden;position:absolute;left:0;top:0;width:320px;height:480px;
}
#card {position:absolute;left:0;top:0;width:320px;height:480px;background:#0073AA;
}
h1 {text-align:center;
}
button {display:block;font-size:2em;width:280px;margin:0 auto 20px auto;
}
</style>
<script>
function initialise()
{}
//style  样式处理
function styleshow()
{}
//style 动画、形变、渐变
function fx()
{}
function bounce(pos) {if (pos < (1/2.75)) {return (7.5625*pos*pos);} else if (pos < (2/2.75)) {return (7.5625*(pos-=(1.5/2.75))*pos + .75);
    } else if (pos < (2.5/2.75)) {return (7.5625*(pos-=(2.25/2.75))*pos + .9375);
    } else {return (7.5625*(pos-=(2.625/2.75))*pos + .984375);
    }}
</script>
</head>
<body onload="initialise();styleshow();fx();">
<div id="container"><div id="card"><h1>隐藏面板</h1><button onclick="emile('card', 'left:-320px', {duration: 800});">向 左</button><button onclick="emile('card', 'left:640px', {duration: 800});">向 右</button><button onclick="emile('card', 'top:-480px', {duration: 800});">向 上</button><button onclick="emile('card', 'top:960px', {duration: 800});">向 下</button></div>
</div>
</body>
</html>

弹一弹动画

弹一弹动画示例代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>XuijsDemo</title>
<script src="content/scripts/xui-2.2.0.min.js"></script>
<script src="content/scripts/emile.js"></script>
<style type="text/css" media="screen">
body {margin:0;padding:0;background:#0073AA;
}
#container {overflow:hidden;position:absolute;left:0;top:0;width:320px;height:480px;
}
#card {position:absolute;left:0;top:0;width:320px;height:480px;background:#A4CDE0;
}
h1 {text-align:center;
}
button {display:block;font-size:2em;width:280px;margin:0 auto 20px auto;
}
</style>
<script>
function initialise()
{}
//style  样式处理
function styleshow()
{}
//style 动画、形变、渐变
function fx()
{}
function bounce(pos) {if (pos < (1/2.75)) {return (7.5625*pos*pos);} else if (pos < (2/2.75)) {return (7.5625*(pos-=(1.5/2.75))*pos + .75);
    } else if (pos < (2.5/2.75)) {return (7.5625*(pos-=(2.25/2.75))*pos + .9375);
    } else {return (7.5625*(pos-=(2.625/2.75))*pos + .984375);
    }}
</script>
</head>
<body onload="initialise();styleshow();fx();">
<div id="container"><div id="card"><h1>弹一弹效果</h1><button onclick="emile('card', 'left:-320px', {duration: 800, easing: bounce});">向左弹一弹</button><button onclick="emile('card', 'left:320px', {duration: 800, easing: bounce});">向右弹一弹</button><button onclick="emile('card', 'top:-480px', {duration: 800, easing: bounce});">向上弹一弹</button><button onclick="emile('card', 'top:480px', {duration: 800, easing: bounce});">向下弹一弹</button></div>
</div>
</body>
</html>

代码示例包

点击下载

声明：本博客高度重视知识产权保护，发现本博客发布的信息包含有侵犯其著作权的链接内容时，请联系我，我将第一时间做相应处理,联系邮箱ffgign@qq.com。

作者：Mark Fan (小念头) 来源：http://cube.cnblogs.com
说明：未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。如有疑问，可以通过 ffgign@qq.com 联系作者，本文章采用知识共享署名-非商业性使用-相同方式共享 2.5 中国大陆许可协议进行许可

转载于:https://www.cnblogs.com/cube/p/3437620.html

跨平台移动开发模仿正点日历引导页弹一弹动画相关推荐

引导页就该这样设计！细数那些精彩纷呈的引导页面
随着苹果ios8的发布,可以看到App store货架上,众多主流App迫不及待地向人们展示产品视频预览,接下去会是被设计师.市场宣传相继关注的焦点,产品宣传的下一轮引爆点.作为能在App store ...
Android之app引导页(背景图片切换加各个页面动画效果)
转载:http://blog.csdn.net/lowprofile_coding/article/details/48037095 先看效果图: 1.显示三个页面的Activity 用view p ...
Android 引导页开发管理2
<Android 引导页开发管理1>说明的是连续页面的闪烁效果,本次文章显示的是,一张效果效果图等待3s后进入主页面. 后续开发可以显示一段flash或者其他效果图看看. 1.splash ...
一、零基础入门微信小程序开发之创建项目工程同时完成引导页开发
前言创建这个系列博客的原因是因为最近在加深微信小程序的学习,按照我之前的学习习惯是不喜欢记录的,加上自己有拖延症就更不太愿意做这件事情了,同时我要给学生上课,但总是缺少教材所以就开了这个系列的博客, ...
uniapp开发App引导页
App的引导页是当用户第一次打开一款App时所展示的3-5精美的图片,用于告知用户产品的功能及特点.好的引导页会促使用户对产品增加更多的兴趣,当然这是UI设计的能力体现了,尽管很多人都会快速的滑过.对 ...
Android开发--实现Android引导页
几乎每个app都有引导页,下面我们来做一个引导页的实现. 引导页,是指软件首次进入或者更新完成后,软件显示的页面,一般展示软件特色功能或者更新的内容. 先判断是否第一次启动app,如果是,则进入引导页 ...
Android开发引导页进入应用，第二次欢迎页进入应用
先看一下引导页的效果图具体步骤 1.先从一个主页进入,判断是不是第一次进入,如果是第一次就跳转到引导页不是就跳转到登录页(BaseActivity为个人项目的其他页面所用,一般继承默认的Act ...
Android项目实战（三）：实现第一次进入软件的引导页
最近做的APP接近尾声了,就是些优化工作了, 我们都知道现在的APP都会有引导页,就是安装之后第一次打开才显示的引导页面(介绍这个软件的几张可以切换的图) 自己做了一下,结合之前学过的慕课网_Vie ...
【新书推荐】《微软开源跨平台移动开发实践》带你走近微软开源开源跨平台技术
上周收到本书作者李争送的一本12月份的新书<微软开源跨平台移动开发实践--利用ASP.NET Core 1.0 .Apache Cordova.Xamarin和Azure快速构建移动应用解决方案 ...

跨平台移动开发模仿正点日历引导页弹一弹动画

跨平台移动开发模仿正点日历引导页弹一弹动画相关推荐

最新文章

热门文章

跨平台移动开发 模仿正点日历引导页弹一弹动画

跨平台移动开发 模仿正点日历引导页弹一弹动画相关推荐

最新文章

热门文章

跨平台移动开发模仿正点日历引导页弹一弹动画

跨平台移动开发模仿正点日历引导页弹一弹动画相关推荐