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

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

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

<!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="320px; height:480px;" />
  </div>
  <div id="cardb">
    <img src="Content/Images/banner1.png" style="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 中国大陆许可协议进行许可

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

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