页面交互效果实现分析

现在前端页面能够实现的交互效果越来越酷炫，也越来越复杂。但是这些特效背后的形成机制，却始终简洁优雅。

简单说来，一个交互效果的实现，是由HTML提供页面骨架，JavaScript负责行为事件，而页面中呈现出的各种各样的效果，是由CSS完成的。当然，每一个特效形成的具体原理各有不同，不过也是有规律可寻。

显示与隐藏

典型代表： 下拉菜单 提示框

利用CSS的display属性，在事件发生后实现相应区块内容的显示和隐藏显示和隐藏。 需要注意的是，在具体实现中，最好不要在JS代码直接写style.display,而是通过改变相应内容的className去实现，这样就把JS与CSS很好的进行了分离。这种显示和隐藏，根据不同的情况还存在很多的变体，opactiy（蒙版） 、overflow（图片轮播）。

数值改变

典型代表： 顶部广告 图片轮播

页面中很多元素的CSS属性都是数值型的，结合setInterval() setTimeout()等方法，可以让CSS属性值动态的改变，从而实现一些简单的动画效果。不过对于一些复杂的动画效果，最好是用CSS3去实现，呈现出来会更细腻流畅。

　
相互关联

典型代表： 网页定位导航 放大镜

页面中各元素不是孤立存在的，它们之间也是有许多的联系。，网页定位导航的实现，就是利用了页面内容与导航条间的联系， 放大镜效果，是通过建立鼠标位置的移动与放大展示图片的联系。

当然这里效果总结只是总体的很小一部分，而且随着CSS3、HTML5等新特性被浏览器的逐渐支持，会有更多新奇好玩的效果出现。等有机会了，再进行总结。