滑动门需注意的问题
之前写过一篇文章：滑动门的“2”种实现方法，介绍了滑动门的2种实现思路。这次说一下滑动门中需要注意的一个问题，问题出在所使用的图片是圆角的(4个角都是)，且背景透明。
发现最后的效果是：右上角、右下角的圆角没有了。这与我们的期望不符。如下图所示：
详见有此问题的demo
我们期望的效果是这样：
对于以上存在的问题，为什么右上角右下角的圆角出不来，刚开始着实让人摸不着头脑，反反复复检查图片，检查代码，甚至换浏览器查看都没有找到问题所在。不过后来终于想明白了，问题出在所使用的图片上，并且和滑动门的实现原理密切相关。
本例中滑动门的实现原理简单说就是：外层标签“产生左上角、左下角”，“虚拟的右上角、右下角是直角”，内层标签“产生右上角、右下角”，并且内层标签覆盖在外层之上浮向最右边，“虚拟的左上角、左下角是直角”，二者叠加在一起刚好形成4个圆角。
本例中所使用的图片4个角都是圆角且背景透明。
结合以上2点可以看到：当内层标签“产生右上角、右下角”，并且内层标签覆盖在外层之上浮向最右边的时候，由于右上角、右下角是透明的，透明的右上角、右下角与外层虚拟的右上角、右下角直角叠加在一起，实际上看到的还是直角。这就是原因所在。
本例中所使用的图片还有一个特点：图片为一个整体的“连体图片”，如下图：
原因找到以后，可针对性的用2中方法解决此问题。
(1)将图片拆分。既然透明的右上角、右下角与外层虚拟的右上角、右下角直角叠加在一起，实际上看到的还是直角，那外层虚拟的右上角、右下角直角如果是透明的，叠加在一起的话，看起来不就是圆角了吗？
拆分后的图片如下：
(2)右上角右下角带背景切图。既然透明的右上角、右下角与外层虚拟的右上角、右下角直角叠加在一起，实际上看到的还是直角，如果右上角右下角带背景(不透明)，与外层标签叠在一起，再与周围环境的背景叠在一起，看起来不就是圆角了吗？
带背景后的图片如下：
所以理解滑动门的原理很重要。
最近评论