根据提供的文件信息，我们可以深入探讨相关的JavaScript技术及其实现效果——即如何使页面中的图片跟随鼠标滚动，并在必要时提供关闭功能。此类效果常用于网页设计中，特别是那些需要增强用户体验或实现特定视觉效果（如对联广告）的场景。
### 一、基础知识
#### 1. CSS定位
在示例代码中，`<div id="LRfloatershow3" style="...">` 使用了CSS定位属性来确定其位置。`position: fixed;` 和 `position: absolute;` 是两种常见的CSS定位方式。
- **position: fixed;**：元素相对于浏览器窗口定位。即使页面被滚动，该元素也不会移动。
- **position: absolute;**：元素相对于最近的非static定位祖先元素进行定位。
#### 2. JavaScript事件处理
示例代码中的 `function cloleft();` 定义了一个函数，用于隐藏指定的DOM元素。这通常通过监听特定事件（如点击事件）并调用此函数来触发。
### 二、实现滚动跟随效果
为了实现图片跟随鼠标滚动的效果，我们需要监听滚动事件并根据滚动条的位置调整图片的位置。下面是一个简单的实现方法：
```javascript
window.addEventListener('scroll', function() {
var imgElement = document.getElementById('LRfloatershow3');
var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
// 调整图片的位置
imgElement.style.top = (scrollTop + 100) + 'px';
});
```
这段代码中：
- 使用 `window.addEventListener('scroll', ...)` 监听滚动事件。
- 获取当前的滚动位置 `window.pageYOffset` 或 `document.documentElement.scrollTop`。
- 更新图片的位置，使其始终位于距离顶部100像素的位置。
### 三、添加关闭功能
示例代码还包含了一个简单的关闭功能，允许用户点击后隐藏图片。可以通过以下方式改进：
```javascript
function closeImage() {
var imgElement = document.getElementById('LRfloatershow3');
imgElement.style.display = 'none';
}
// 添加一个关闭按钮
var closeButton = document.createElement('button');
closeButton.innerText = '关闭';
closeButton.onclick = closeImage;
// 将关闭按钮添加到图片旁边
var imgContainer = document.getElementById('LRfloatershow3');
imgContainer.appendChild(closeButton);
```
这里的关键是：
- 创建一个按钮并设置其点击事件为 `closeImage` 函数。
- 将按钮添加到图片容器中，使得用户可以轻松找到关闭按钮。
### 四、扩展应用
对于需要左右两侧同时滚动的对联广告，可以通过类似的方法实现。只需创建两个类似的元素，并分别为它们添加滚动监听器即可。
```javascript
// 左侧图片
window.addEventListener('scroll', function() {
var leftImg = document.getElementById('leftImg');
var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
leftImg.style.top = (scrollTop + 100) + 'px';
});
// 右侧图片
window.addEventListener('scroll', function() {
var rightImg = document.getElementById('rightImg');
var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
rightImg.style.top = (scrollTop + 100) + 'px';
});
```
### 五、注意事项
- 确保所有CSS样式正确地应用于HTML元素。
- 测试不同的浏览器兼容性，确保在各种设备上都能正常工作。
- 考虑性能优化，避免因频繁更新DOM而引起的性能问题。
通过以上步骤，你可以轻松实现图片跟随鼠标滚动的效果，并根据需要添加更多交互功能。这种技术不仅适用于广告展示，还可以广泛应用于多种网页设计场景中。
