在我们进行前端页面编写时，有一些方便用户进行操作的分栏链接、导航和锚点功能需要进行展示，但又不是主要的导航区，我们会用一种在侧面收拉的功能栏进行编写。这样既美观又可以让页面更生动。那么我们现在就一起来实现它。
打开网易新闻 查看精彩图片
一、逻辑分析
首先我们要分析这个功能的实现方法。我们需要用到css3的定位、过渡和变形，配合JQ使用鼠标事件进行触发动效。
1.需求：
1)整体功能区需要固定在浏览器右侧并不受滚动条影响。
2)需要露出功能区的序号部分。
3)鼠标移入时，功能区会进行展开，并依次延迟执行。
4)鼠标移出时，功能区会进行收起，并依次延迟执行。
5)在变形的过程中，还需进行样式的编写。
2.知识点：
1)Css中的变形、过渡
2)JQ的hover事件、循环、筛选、操作样式、操作属性
二、代码编写
1.建立空白页，并引入在线JQ库
打开网易新闻 查看精彩图片
2.编写HTML结构，由于是侧边栏，我们需要用HTML5的语义标签进行编写
打开网易新闻 查看精彩图片
3.编写Css样式。我们需要将整体功能区域用固定定位的方式写在浏览器最右侧，并露出功能提示区。
打开网易新闻 查看精彩图片
4.进行JQ编写。
打开网易新闻 查看精彩图片
打开网易新闻 查看精彩图片
三、结语
其实动态效果并没有我们想象的那么复杂，再复杂的动效分析到最后也是找到需要操作的对象，操作它的样式、内容和属性。我们只需要展开想象，梳理好逻辑进行编写。在调试过后就可以写出漂亮的动态效果了。
打开网易新闻 查看精彩图片
热门跟贴