慕课手机展示页demo总结

慕课手机demo

学习了一下慕课手机展示页demo，于是自己跟着实现了一下

实现思路

• 采用BEM开发模式；
• 布局主要为 relative + absolute + float；
• 动画采用 css3 + js；
• 通过监听滚轮高度判断页面位置，设置相应的动画播放；
• 通过onmouseover、onmouseout事件监听鼠标在导航项之间的移动，设置nav-tip元素位置样式实现滑动门效果；
• 通过onclick事件判断鼠标所点击的导航项或侧边大纲项，设置滚轮高度移动到相应位置，通过判断滚轮位置设置相应导航项和大纲项样式，从而实现双向定位；

设置元素的动画初始样式、完成样式，过渡时间等。将要设置动画的元素以数组形式存放在screenAnimateElements对象中。在页面加载时，循环遍历这个对象为其中每个元素添加动画初始样式。判断滚轮高度，当页面滚动到相应部位时，设置相应导航项、大纲项的样式且播放相应屏的动画（通过为元素添加动画完成样式）。实现滑动门时，当鼠标移出，则判断此时页面位置（可以通过滚轮高度或循环查找导航项中的类是否包含我们设置的状态类），再设置滑动门到相应的导航项。

BEM模式

Bem 是块（block）、元素（element）、修饰符（modifier）的简写，由 Yandex 团队提出的一种前端 CSS 命名方法论。使用BEM能清晰的看懂html code，明白元素之间的联系。规则