HTML5+CSS3+JavaScript Web前端开发案例教程课件：公司简介.pptxVIP

公司简介

案例介绍技术准备案例实现010203

01案例介绍

案例介绍案例名称：公司简介核心功能：时间轴UI布局页面滚动监听

案例介绍公司简介页面效果

02技术准备

技术准备技术1：CSSposition定位position属性用于CSS中指定元素在文档中的定位方式，并通过top、right、bottom和left属性设置被定位元素的位置。

技术准备position属性提供了五个用于定位的值，分别是：static，HTML元素的默认值，即没有定位，遵循正常的文档流对象；fixed，元素的位置相对于浏览器窗口是固定位置；relative，相对定位元素的定位是相对其正常位置；absolute，绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于html；sticky，粘性定位，基于用户的滚动位置来定位。

技术准备fixed固定定位与sticky粘性定位的示例代码如下所示：/*固定定位*/.pos_fixed{position:fixed;top:30px;right:5px;}/*粘性定位*/div.sticky{position:sticky;top:0;}

技术准备技术2：scroll滚动事件原生JavaScript为DOM元素提供了onscroll事件，当元素滚动条在滚动时触发，例如，为div标签绑定onscroll事件，示例代码如下所示：divonscroll=myFunction()

技术准备也可以在JavaScript脚本中,使用addEventListener()方法绑定事件，示例代码如下所示：object.addEventListener(scroll,myScript);

技术准备触发被选元素scroll事件的示例代码如下所示：$(div).scroll(function(){$(span).text(x+=1);});

03案例实现

案例实现文件结构：