弹出层的实现
发布在APICloud移动应用开发平台2015年6月25日view:4755
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

enter image description here

弹出层的实现,不论是做分类还是什么,弹出层都是一个app中必须的,那么弹出层该如何实现呢?

这里是由官方的金龙老师推荐的方法,现在教给大家。

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>弹出层</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
        <style>
                html,body{
                        height: 100%; 
                        background-color: transparent;
                        overflow: hidden;
                }
                #wp{
                        display: -webkit-box;
                        height: 100%;
                }
                #main{
                        width: 75%;
                        background-color: #eee;
                        -webkit-transition: all .3s;
                        transition:all .3s;
                        transform: translateX(-100%);
                        -webkit-transform: translateX(-100%);
                }
                #main.in{
                        transform: translateX(0%);
                        -webkit-transform: translateX(0%);
                }
                #fill{width: 25%;}
        </style>
</head>
<body>
<div id="wp">
        <div id="main" class="">

        </div>
        <div id="fill"></div>
</div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/zepto.js"></script>
<script type="text/javascript">
    apiready = function(){
            var $list = $('#main');
            $list.addClass('in');
            $(document.body).on('touchend',function(evt){
                    if(!$.contains($list[0], evt.target)){
                            $list.removeClass('in');
                            setTimeout(function(){
                                    api.closeFrame();
                            },350);
                    }
            });
    };
</script>
</html>
复制代码

简单来说一下,其实也很简单,就是用到了css3的特性,利用css3作动画效果。

先写好css类,写好之后把translateX设置为-100%;然后再加一个in的类,再把translateX设置为0%;

最后,就是在apiready中添加in这个类即可。

ps:这个页面用openFrame打开,需要注意的是给bgcolor设置透明度bgColor: ‘rgba(0,0,0,0.6)’

好了。刚才一直在研究51用车的那个版本切换效果,也没整好,回头有时间弄个弹出层的插件供大家使用。

评论
发表评论
暂无评论
WRITTEN BY
小金宝同學coolboy
我就是太阳无需凭借谁的光!
TA的新浪微博
PUBLISHED IN
APICloud移动应用开发平台
  • 7天开发APP,重新定义移动应用开发。
  • 可以帮助开发者快速实现移动应用的开发、测试、发布、管理和运营的全生命周期管理。
  • 云API:减少70%服务器端编码工作量,同时提供推送、云修复、大数据分析等服务。
  • 端API:“积木拼装”式的开发跨平台APP,为APP开发者提供大量优质的原生模块,涵盖UI、系统、交互、影音、支付等类型的原生模块。
  • 模块store:“模块Store”通过提供“1+1”的服务(一站式+一键集成),让APP开发以及第三方服务SDK的集成变得非常简单,可以像逛超市一样在APICloud“模块Store”挑选自己中意的第三方服务,只需在线一键绑定,就可以实现不同服务的快速集成。
  • 官方网站:www.apicloud.com

友情链接 大搜车前端团队博客
我的收藏