### JavaScript编写点击查看大图的页面半透明遮罩层效果实例知识点
#### 1. 页面遮罩层效果与大图预览
在Web页面设计中，为了增强用户的交互体验，常常会在点击查看大图时，给页面添加一个半透明遮罩层，这样可以使图片更加突出，同时也能限制用户的操作范围，专注于当前展示的图片。遮罩层通常采用半透明或浅色背景，使得页面上的其他内容能够透视显示，但不干扰图片的展示。
#### 2. CSS3的rgba使用
实现页面遮罩层的半透明效果通常用到CSS3的rgba颜色模式。rgba中的a代表alpha透明度，它的值范围是从0.0（完全透明）到1.0（完全不透明）。例如，`background: rgba(0,0,0,0.5);`表示背景色为黑色并且透明度为50%，既不会完全遮挡页面内容，也不会让内容过于模糊，达到一种折中的效果。
#### 3. 浏览器兼容性
虽然CSS3提供了rgba这样的便利属性来控制透明度，但考虑到老旧浏览器，特别是IE6/7/8这样的低版本IE浏览器，开发者们往往需要额外的兼容性代码。在上述代码中，使用了`background:transparent\9;`和`filter:progid:DXImageTransform.Microsoft.Gradient(...);`来为旧IE浏览器提供透明效果。这是因为在旧版IE中，rgba并不能直接被识别，需要通过特定的滤镜来实现相似效果。
#### 4. JavaScript实现点击事件
为了实现点击图片后出现遮罩层并展示大图的功能，需要使用JavaScript监听图片的点击事件。在上述代码中，通过`img.onclick=function(){...}`为图片元素绑定了点击事件。当图片被点击时，会创建一个新的Image对象，并将其src属性设置为被点击图片的src值，然后将其添加到遮罩层内。随后调用`mask.show()`方法来展示遮罩层。
#### 5. 遮罩层的动态显示与隐藏
遮罩层的显示和隐藏是通过JavaScript中的`show()`和`hide()`方法来控制的。当需要显示遮罩层时，`show()`方法首先隐藏页面的滚动条，并计算遮罩层的大小以覆盖整个视窗，然后显示遮罩层。当遮罩层被点击时，通过`hide()`方法恢复页面滚动条的显示，并清空遮罩层中的内容，最后隐藏遮罩层本身。
#### 6. 兼容不同浏览器的元素尺寸调整
为了确保遮罩层在不同浏览器以及窗口大小变化时均能覆盖整个页面，需要监听窗口的`resize`事件，并在事件触发时调用`mask.setSize()`方法重新计算遮罩层的尺寸。此方法通过获取当前文档的宽度和高度，更新遮罩层元素的尺寸样式，从而确保遮罩层总是能够覆盖整个页面。
#### 7. 实际应用与代码注释
上述代码提供了一个完整的示例，展示如何通过JavaScript和CSS来实现点击图片查看大图时的页面半透明遮罩层效果。通过代码注释，开发者们可以更清楚地理解每一行代码的作用，便于学习和应用。尽管实现这样的效果并不复杂，但对于初学者来说，完整的代码和注释可以让其更容易地掌握技术细节。
