基于flipsnap框架，滑动页面的布局
基于flipsnap框架，滑动页面的布局<div class="postText"><div id="cnblogs_post_body"> 基于上篇介绍的flipsnap框架，当滑动页面数为基数时页面该怎么布局呢？假如滑动页面数为3个，布局设计如下图所示1、2、3三个页面，向左拖动，页面2、页面3出现。
http://pic002.cnblogs.com/images/2012/436120/2012103122572679.gif
此时页面可分三种设计方法：
方法一：浮动方法。如果子元素为奇数，则子元素的宽度不精确，且子元素不能设置border，如果设置border，宽度就更不精确了。
方法二：弹性布局方法。此方法也是是不错的选择。但经测试，如果页面中弹性布局运用的很多，在UC等浏览器上，非常卡。说明弹性布局非常耗性能。
方法三：定位方法。此方法可解决方法一、二的缺点。注意：inner部分需设置高度，不然子元素会被隐藏，因为outer设置了overflow：hidden。
因此，此时采用方法三进行布局。代码如下：
<div class="cnblogs_code"><!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>
页:
[1]