点击
搜索 / Search

说是更新,但是新样式并没有上线,因为还存在可以改进的地方。

这次样式更新是之前提到的的博客主题高清化的一部分内容。上次有个小同学问为什么不把页面内容整体居中,这个问题也一直困扰着我,但是尝试了很多方案都不尽如人意。直到最近重新拾起这个问题,我才意识到居中并不是大问题,怎么重新实现原来的效果才是最烦人的。经过一夜的面向 Google 编程之后,新样式终于达到了勉强可用的级别。

在 web 页面中,如果需要让一个div元素居中,有很多种方法。这里采用了一种比较简单的,通过设置margin-leftmargin-right实现效果。

screenshot 1

看起来很好,但是侧边栏的位置并没有变化。而且页面左侧的灰色衬底也保持原位。先不考虑背景,侧边栏的位置需要更新。而在此主题中,该元素是将部分内容藏到浏览器可视范围外,在点击按钮时改变元素左侧起始位置实现滑入/滑出效果的,因此不可能直接把它拉到新位置。真这么做也就没必要设计这个侧边栏了。

screenshot 2

所以需要根据主元素的位置计算侧边栏的位置,同时为其准备一个遮罩。当然更优雅的做法是重写侧边栏的滑动逻辑。先在页面上增加一个div,用来填充主元素左侧的空白。其位置和大小通过 js 取主元素的位置确定,用到了offsetLeft函数。绘制好元素后用白色填充,并设置该元素的z-index,使其位于侧边栏顶层。

*为了视觉效果,遮罩加了透明度

接下来修改侧边栏的位置,就不用废话了。

screenshot 4

然后是滑动动画,依旧是把偏移距离考虑进去。以上都完成之后还存在一个问题,如果页面大小变化了,偏移值会发生改变,导致页面元素位置不正确。因此需要在页面大小改变后重新计算元素位置。最后的效果是这样。

不过还可以看到在改变窗口大小时侧边栏会有异常显示。因此说这个方法并不完美,下一步就是用别的方法重写这个滑出动画了,估计下一篇会讲讲这个。

下附部分代码:

CSS 部分:

JavaScript 部分:

感谢昨天中午影子同志送的 MGSV,折腾完这点东西我就去玩。

声明: 本站所有图文遵循 署名-非商业性使用-相同方式共享 3.0 共享 协议.
转载请注明转自 ershiwo的私人研究所
标签:

Share To

Related Posts

0 Comments

难得的沙发不来一发吗?!