前言:前两天看了大漠的文章《管理CSS层叠》http://www.w3cplus.com/css3/managing-the-css-cascade.html 有感,直接利用 inherit 这个属性解决了一个需要js动态获取的问题。
需求:最近接到一个移动端展示首页的切页需求,要求全屏滚动,图片撑满屏幕,滑动加载下一屏。
分析:全屏滚动自然用到了类似fullpage的插件,然后放上图片、按钮就行了。
方法、步骤:
(1)选取基于Zepto的插件,zepto.fullpage.js;
(2)配置本地环境,引入相应的js文件、CSS文件;
(3)采用flex布局。
(4)布局优化,检查细调。
难点:
(1)其实就是一个,图片的布局,简单优雅,易于维护。
HTML结构:
如上,body标签下面就是整个插件的父类 .wp-inner ,然后每一屏就是 .page .page ,接着就是我写的图片的父类及图片,很简单清爽的结构;
CSS代码: 就这么几行,唯一的难点就是让图片撑满整个屏幕,一般的想法是直接利用js,获取屏幕高度,然后看情况是否需要动态修改,唯一的问题就是自己写的js跟插件封装的方法是否融洽……
思维发散ing……
最后观察到其实js最用作用于页面上其实给了.page添加了一个行内样式style="height:xxx;",那么我们能不能直接利用呢,能用CSS解决的问题就不用JS剞劂是我们坚守的原则。
最后 尝试发现,直接对图片、及图片控制的父元素的高度写一个CSS样式就行了
其实最终发现,很多时候可以合理利用CSS做好交互,只是对CSS属性认识不够深刻罢了~
页面地址的话,以后补上,原因你懂的~