网页组件制作之弹出层

在该笔记中将学到列表展示中弹出层特效的方法与展示效果

本系列的是参考慕课网 清风老师的视频，仅供个人查阅使用，具体讲解推荐参考视频。

涉及的知识点

• 定位：absolute, relative, fixed
• 事件：onload, onclick
• DOM操作：scrollHeight(), clientHeight()
• 层级：z-index

遮罩层的实现

遮罩层的长度和宽度，可以设置为 100%，或者使用 srcollHeight 计算高度。遮罩层使用 position:fixed，可以在滚动的时候也覆盖页面，用 z-index 设置遮罩层为最上层。

实现效果如下：

jQuery笔记

jQuery 介绍

jQuery 的库分为两种类型，一种是生产版，一种是开发版：生产版的名字是：jqurey.min.js，是经过工具压缩或者经过服务器开启 Gzip 压缩的，主要用于产品和项目。开发版的名字是：jquery.js，是完整无压缩版，用于测试，学习和开发。

jQuery 对象

为了不污染顶级变量，并且能够与其他库共存，jQuery 只创建一个名为 jQuery 的对象。所有的函数和方法都在这个对象之下。在 jQuery 库中，$ 就是 jQuery 的一个简写形式，它们都是一个类型是 function 对象，但是 $ 符号可以随时交出控制权。

jQuery 对象是 jQuery 通过包装 DOM 对象后产生的对象，jQuery 对象中无法调用 DOM 对象的任何方法，同样 DOM 也无法使用 jQuery 的方法。

JavaScript 笔记

DOM

DOM 级别

DOM0是不存在的，DOM0 只是 DOM 历史中一个参照点而已，一般是指最初支持的 DHTML。

DOM1是 1998 年被推荐称为 W3C 的推荐标准，DOM1 被分为两个模块组成的：DOM Core 和 DOM HTML。

1. DOM Core：如何映射基于 XML 的文档结构，以便简化为文档中任意部分的访问和操作。DOM Core 有几个相关的方法，如：getElementById、getElementsByTagName、getAttribute、setAttribute，它们并不属于 JavaScript。
2. DOM HTML：在 DOM Core 的基础上加以扩展，增加了针对 HTML 的对象和方法。比如 onclick 属性，比如 src 属性等。

DOM2在 DOM1 的基础上扩展了鼠标和用户界面事件、范围、遍历迭代 DOM 文档的方法，也增加了对 CSS 的支持。DOM2 引入下列新模块：

1. DOM 视图(DOM View)：定义了跟踪不同文档(例如：应用了 CSS 之前和之后的文档)视图的接口
2. DOM 事件(DOM Event)：定义了事件和事件处理的接口
3. DOM 样式(DOM Style)：定义了基于 CSS 为元素应用样式的接口
4. DOM 遍历和范围(DOM Traversal and Range)：定义了遍历和操作文档树的接口

DOM3进一步扩展了 DOM，引入了以统一方式加载和保存文档的方法，也对 DOM Core 进行了扩展，开始支持 XML 1.0，设计 XPath 和 XML Base：

1. DOM 加载和保存(DOM Load and Save)
2. DOM 验证(DOM Validation)：DOM 验证

在该笔记中将学到列表展示中网页广告特效的方法与展示效果

本系列的是参考慕课网 vivian老师的视频，仅供个人查阅使用，具体讲解推荐参考视频。

实现伸缩式的广告

可伸缩的广告很多使用的是 JavaScript 来控制容器的 height 来实现广告的伸缩。也可以使用两个类设置容器的高度，然后设置 transition 添加动画效果，实现伸缩的效果。

在该笔记中将学到列表展示中散列画廊特效的方法与展示效果

本系列的是参考慕课网 Lyn老师的视频，仅供个人查阅使用，具体讲解推荐参考视频。

显示效果如下：

其中，点击屏幕下部的按钮，可以实现居中照片的切换。点击屏幕中的照片，也可以控制照片正反面的切换动画。

在该笔记中将学到列表展示中表单验证的方法与展示效果

本系列的是参考慕课网 江老师老师的视频，仅供个人查阅使用，具体讲解推荐参考视频。

正则表达式

特殊符号： ! $ ^ * + = | . ? / \ ( ) [ ] { }

特殊字符：o t n v f r xnn uxxx cX

以上的特殊符号和特殊字符在正则表达式中匹配的时候，都需要进行转义(\)。

JavaScript中正则表达式的用法有两种：

1. var re = new RegExp("a", "i")
2. var re = /a/i

字符类：

在该笔记中将学到列表展示中焦点图轮播特效的方法与展示效果

本系列的是参考慕课网 阿安老师的视频，仅供个人查阅使用，具体讲解推荐参考视频。

实现的效果有：

1. 当鼠标放在图片上的时候，会显示左边和右边的箭头，在图片的下部会显示五个小圆点，以供点击切换图片
2. 点击左右箭头或者小圆点都可以切换图片，如果鼠标从图片上移开以后，每隔一段时间都可以自动切换到下一张图片上

实现的注意点：所有的图片都是在一个 Div 中并列排布，但是只中间一张图片的区域允许显示，将图片并列排布的原因是为了在图片切换的时候达到滚动的效果。如果有 5 张图片，则这个 div 中需要有 7 个图，这样才能达到图片切换的时候实现无缝滚动的效果。

显示效果如下：

在该笔记中将学到列表展示中信息滚动效果的方法与展示效果

本系列的是参考慕课网 vivian老师的视频，仅供个人查阅使用，具体讲解推荐参考视频。

原来 HTML 中提供了一个专门用来做信息滚动的标签叫 marquee，但是这个标签将要被禁止使用了，所以不建议继续使用这个标签做信息滚动。

无缝滚动的制作

无缝滚动的原理：想要实现内容的无缝滚动，可以在显示内容下面再拷贝一次显示内容，即有两个包含相同内容的容器实现滚动的衔接，就可以实现无缝滚动的效果。

在该笔记中将学到列表展示中带预览图幻灯片效果的方法与展示效果

本系列的是参考慕课网 lyn老师的视频，仅供个人查阅使用，具体讲解推荐参考视频。

适用场景：

1. 单列布局，通过大图突出商品
2. 适合单列布局，不适合左右分栏

VCD 分析法

1. V(view)：视觉，通过 V 的部分分析页面的 html 结构
2. D(data)：数据，页面发生变化的时候需要提供的数据是什么
3. C(controller)：控制，指的是页面部分所有的动作和行为

基本的素材是 view 和 data，controller 部分是脚本流程和功能。

view 部分的开发

通过对项目的视觉分析，列出网页的 html 页面结构图。

data的部分是页面发生变化的时候需要提供的数据，一般是通过 AJAX 从服务器端获取，在本案例中通过 JS 创建了一个数组用来存储数据。

显示效果如下：

在该笔记中将学到列表展示中倒计时效果的方法与展示效果

本系列的是参考慕课网 vivian老师的视频，仅供个人查阅使用，具体讲解推荐参考视频。

显示效果如下：

当团购结束的时候，会显示结束的字样：

使用 Date 类型来获得需要的时间

下面显示的是 Date 类型相关的函数：