基于flipsnap框架，滑动页面的布局

　　　　基于上篇介绍的flipsnap框架，当滑动页面数为基数时页面该怎么布局呢？假如滑动页面数为3个，布局设计如下图所示1、2、3三个页面，向左拖动，页面2、页面3出现。

　　此时页面可分三种设计方法：

　　　　方法一：浮动方法。如果子元素为奇数，则子元素的宽度不精确，且子元素不能设置border，如果设置border，宽度就更不精确了。

　　　　方法二：弹性布局方法。此方法也是是不错的选择。但经测试，如果页面中弹性布局运用的很多，在UC等浏览器上，非常卡。说明弹性布局非常耗性能。

　　　　方法三：定位方法。此方法可解决方法一、二的缺点。注意：inner部分需设置高度，不然子元素会被隐藏，因为outer设置了overflow：hidden。

因此，此时采用方法三进行布局。代码如下：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>滑动页面数为3个时</title>
<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;" />
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
/*重置{*/
body,div{ padding:0;margin:0;} 
/*}重置*/
.html.body{width:100%;height:100%;}
.outer{width:100%;height:100%;overflow:hidden;margin-top: 40px;}        /*超出窗口部分隐藏*/
.inner > div:nth-child(1){background:#ff0;height:200px;}
.inner > div:nth-child(2){background:#0ff;height:200px;}
.inner > div:nth-child(3){background:#0f0;height:200px;}

/*方法一：浮动方法。如果子元素为奇数，则子元素的宽度不精确，且子元素不能设置border，如果设置border，宽度就更不精确了。*/
/*.inner{width:300%;}
.inner > div{float:left;width:33.33%;}*/

/*方法二：弹性布局方法。此方法也是是不错的选择。但经测试，如果页面中弹性布局运用的很多，在UC等浏览器上，非常卡。说明弹性布局非常耗性能。*/
/*.inner{display:-webkit-box;-webkit-box-orient:horizontal;}
.inner{width:300%;}
.inner > div{-webkit-box-flex: 1;}*/

/*方法三：定位方法。此方法可解决方法一、二的缺点。注意：inner部分需设置高度，不然子元素会被隐藏，因为outer设置了overflow：hidden；*/
.inner{width:100%;height:200px;position:relative;text-align: center;line-height: 200px;font-size: 80px;}
.inner > div:nth-child(1){position:absolute;left:0;right:0;}
.inner > div:nth-child(2){position:absolute;left:100%;right:-100%;}
.inner > div:nth-child(3){position:absolute;left:200%;right:-200%;}

</style>
</head>

<body>    
    <div class="outer">
        <div class="inner">
            <div>1</div>
            <div>2</div>
            <div>3</div>
        </div>
    </div>
    
    <script src="flipsnap.js"></script>　
    
    <script type="text/javascript">
        var flipsnap=Flipsnap('.inner') ;
        /*当横竖屏切换时，宽高度自适应屏幕*/
        window.addEventListener("resize",function () {         
            var fliwidth=document.querySelector('body').offsetWidth;      
            flipsnap.distance=fliwidth;        
            flipsnap.refresh();        
        },false);        
    </script>
</body>
</html>

 

 

posted on 2012-10-31 23:15  挨踢前端  阅读(2980)  评论(0)  编辑  收藏  举报

导航