js实现导航或图片展开效果

    最近正在做的项目首页有一个图片向上展开效果，在想办法实现的过程中，总结了一下运用js实现 div展开效果：

    1.向下展开

        向下展开效果，最常见的是运用在首页导航中，例如华中师范大学研究生院首页。

        实现原理：

        从上图可以看出（图画的有点恶心，将就着能看懂就行，呵呵），实现展开效果需要一个div作为container作为遮罩层，将需要展开的内容（也就是里面的div）利用绝对定位，显示出一开始从外层container能看见的内容，初始工作已经完成。

        (这是精髓哦)在触发一个事件后，就会实现展开效果，那么肯定需要一个定时器，是不是利用定时器将里面的div的相对定位的top值逐渐变大是不是就可以了，大家可以试一下，却是会出现效果，出现一种类似无缝滚动的效果（其实无缝滚动就是这样实现的）。所以，不能仅仅将内div运用定时器，同样container也需要同事长，才可以实现向下展开的效果。

        以上代码是小弟自己玩着实验的一个向下展开效果，其中不免笑点，大家可以提出宝贵意见，共勉！对了还有向上展开。

        自己感觉向上展开实现要相对容易一些，只需将外层的container逐渐变大即可实现，不用对内部的展开的内容设置相对定位，在定时器的帮组下，随着外层container逐渐变高，内部div也会相应的显示出来，实现展开的效果！

        这是兄弟第一次的开源发博文，望各位大牛指点！

转载于:https://my.oschina.net/u/564368/blog/92729