仿app右侧滑动特效

来源:luqidong 发布时间:2014-05-28 21:18:55 点击数:

一般app都有这样的特效,点击一个链接跳转,然后内容从右侧滑动出来 像翻书一样,这样的体验对于用户来说是比较顺畅自然的。那么移动web站如何做才能有app的效果呢?

首先我们看下豆瓣的右侧滑动特效:

78OA办公系统

从右侧出来一个层,然后加载中,然后在跳转到另一个页面。

其实这个原理很简单,我们只要在点击a标签要做跳转的时候给他加个右侧滑动,等到刷新页面的时候已经跳转到另一个页面了。也就是说,加载中只是个这个页面的一个“幌子”让你认为是跳转到另一个页面正在加载中。下面是源码

 

    <style>
        * {
            padding: 0px;
            margin: 0px;
        }
 
        .mianban {
            height: 100%;
            width: 100%;
            background-color: #ddd;
            position: fixed;
            top: 0px;
            left: 100%;
            z-index: 10;
        }
 
        .c_loading {
            margin: 0 auto;
            margin-top: 50%;
            width: 50px;
            height: 50px;
            color: #333;
        }
    </style>
 
</head>
<body>
<div class="c_main">
    <a href="http://www.luqidong.com">点击右侧滑动</a>
</div>
<div class="mianban">
    <div class="c_loading">
        loading...
    </div>
</div>
<script>
    $(function(){
        $("a").click(function(){
//                $(".mianban").animate({
//                    left:'0px'
//                },500,'ease-in-out');
            $( ".mianban" ).animate({
                left: "0%"
            }, 30 );
        });
    });
 
效果图如下:
78OA办公系统
本文由78oa编辑所撰,如若转载请注明出处。