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

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

    1.向下展开

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

        实现原理:

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

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

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

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

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

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

已标记关键词 清除标记
表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页