让页面布局更具灵活性和复用性-微信摇一摇效果示例
2017-01-18 23:40

所谓web页面的布局,就是一堆div,table,a,span等标签的罗列嵌套,但是怎么嵌套才能让赋予他们独立的生命呢,这个就需要我们对于布局中的每一层嵌套都有他相关的意义。

    一个页面最外层是body标签,但是我们一般不会在body标签上加过多的样式,我们会写一个div作为外层容器来容纳所有的页面元素

<div class='container'>
    //这里写页面的具体内容
</div>

而我们需要注意的细节就是每一块内容的实现要具有无关性。这个不太好解释,我们就举一个例子来介绍吧。

这个布局在是实现了页面的中间分割的效果。那么对于这个我们应该怎么布局呢

首先在最外层写一个容器div

<div class='container'></div>
.container{position:fixed;z-Index:1;left:0;top:0;width:100%:height:100%;overflow:hidden;}

然后这个我们写两个子容器,一个是上半部分的页面元素,一个是下半部分的页面元素。

最终我们要实现的就是上下两块地页面布局。这个很容易

<div class='inner1'></div>
<div class='inner2'></div>
.inner1,.inner2{height:50%;overflow:hidden;}

两个子元素写好了,下面就是要实现让两个自容器里面的页面像一个完整的页面展示,像上面的截图两个div合起来的时候是一个完整的妹子。(分开了就成了一个有高颜值,一个有好身材的两个部分了。这个就不是完美的女神了,有看脸的汉子,有看身材的汉子,爱慕者一下就减少了一半了。)

怎么样写才能让两个自容器的妹子合成一个完整的妹子呢?

看这张图片,我把两个子元素的内容分别画了一张图,上半部分子容器中放一个div,然后把整个妹子图片放进去,下半部分也是加一个div把妹子图片放进去,但是定位显示下半身,这样两个子容器拼接到一起时就能显示成一个完整的妹子了。

<div class='inner1'>
    <div class='inner1-girl'><img src='girl.png'/></div>
</div>
<div class='inner2'>
    <div class='inner2-girl'><img src='girl.png'/></div>
</div>
.inner1,.inner2{height:50%;overflow:hidden;}
.inner1-girl img{width:100%;height:100%;}
.inner1-girl,.inner2-girl{height:200%;}
.inner2-girl{position:relative;top:-100%;}
.inner2-girl img{width:100%;height:100%;}

到这里我们就把两个子元素的妹子拼接成了一个完整的妹子了。inner-girl的高度都为200%,就是子元素的2被,就跟主容器的高度一样了,inner2-girl的top:-100%;是相对于他的父元素的,也就是向上移动了一个自容器的高度,这样就可以显示妹子的下半身了。

这个布局整体来说不算困难,因为我最早写这个布局的时候这些子元素的定位都是用js计算得到的高度和位置。最近发现这种做法实在是太费事了。所以才又分析了一下页面的构成,重新布局了这个效果的实现。

在这个布局实现的整个代码中,我们可以看到都是使用的百分比实现的,那么container如果改变高度为200px,400px,600px,80%等等,我们的内部布局是不用做任何改变的,他们完全可以自适应外层容器的高度而且保持我们要实现的效果。

我们如果想把妹子替换其他的,那也是可以的,只要保证上下两部分的内容高度一致,那么他们整体看起来就可以像一个完整的页面。

这个效果有什么用呢,其实没有特别的大用途,除了可以做一些内容的切换或者动画效果,场景切换的过渡外。

我们要注意的是这个效果的布局的结构和样式的不依赖性。布局样式跟所在容器没有依赖关系,这样他的复用性就提高了,当另一个地方要用的这个效果时,轻松的copy,paste就OK了。

    当然,我们也可以实现一个js插件,可以对需要的页面生成这种布局效果。

    至于妹子的开合,是js控制的动画问题了,我们这里说布局就不提他了,因为手机端对css3支持较好,用transition过度动画就能实现,或者你愿意用top值,甚至margin值实现都可以。


原创文章,转载请注明来自:妹纸前端-www.webfront-js.com.
阅读(2792)
辛苦了,打赏喝个咖啡
微信
支付宝
妹纸前端
妹纸前端工作室 | 文章不断更新中
京ICP备16005385号-1