根据 苏晨 写的代码基础上美化

苏晨式原创预览

这是饺子小小的美化版预览图

视频演示

引言

在互联网产品中，广告位是流量转化的核心场景之一。一个优秀的广告展示模块不仅需要吸引用户注意力，更要兼顾交互流畅性与视觉美观度。本文将基于一组实际可用的 HTML 代码，拆解一个支持自动循环滚动、悬停暂停、图片垂直居中及下方留白的广告图片滚动模块，解析其核心功能与技术实现逻辑。

核心功能解析

1. 双区域灵活布局，适配多场景需求

模块包含两个独立的滚动区域（.one与.two），可根据业务需求分别配置：

• 区域一（.one）：高度 160px，适用于展示尺寸较大、需要重点突出的广告图片（如 APP 封装、推广服务等核心业务）。
• 区域二（.two）：高度 90px，适合放置次要或辅助性广告（如补充推广信息），通过更小的尺寸节省页面空间。
  两个区域可同时存在或单独使用，满足不同页面位置的广告展示需求。

2. 无限循环滚动，避免视觉断层

模块通过 JavaScript 动态克隆广告项（$Box_li.clone(true).appendTo($Box_ul)），实现内容超出容器时的无限滚动效果。具体逻辑如下：

• 计算所有广告项的总宽度（s += $(this).outerWidth(true)），若总宽度超过容器宽度，则触发滚动；
• 滚动时通过left偏移量逐步移动广告列表，当偏移量达到总宽度负值时（left <= -s），重置位置为 0，形成 “循环” 视觉效果。
  这一设计避免了传统滚动模块滚动到末尾后的空白感，提升广告展示的连续性。

3. 悬停暂停交互，增强用户控制感

模块支持自动循环滚动的交互：

• 鼠标移入广告区域时（$Box_ul.hover），通过cancelAnimationFrame暂停滚动动画；
• 鼠标移出后，自动恢复滚动（Tmove()）。
  这一功能让用户可以自主停留查看感兴趣的广告内容，降低因快速滚动导致的信息遗漏，提升用户体验。

4. 图片垂直居中 + 下方留白，优化视觉层级

通过 CSS 的 Flex 布局与内边距（padding）设计，实现广告图片的垂直居中与下方留白：

• 垂直居中：在广告项的链接（a标签）中使用display: flex; align-items: center，确保图片在竖直方向上居中显示；
• 下方留白：在广告项（li标签）中添加padding-bottom: 20px（区域二为 15px），使图片整体上移，下方留出空白区域。这一设计不仅避免了图片紧贴底部的局促感，还为悬停文字（span）的展开提供了视觉缓冲，增强页面层次感。

5. 渐变文字悬停效果，强化广告信息传递

广告项支持半透明文字渐变展开的交互效果：

• 初始状态下，文字（span）高度为 0、字体大小为 0，完全隐藏；
• 鼠标悬停时，文字高度逐渐展开至与广告项同高（height: 150px/80px），字体大小变为 20px，同时背景为半透明浅灰色（#f9f9f9cc），与图片形成对比。
  这一设计通过动态交互吸引用户注意力，同时确保广告标题（如 “APP 封装 签名 分发”）清晰可见，提升信息传递效率。

6. 响应式适配，兼容多设备终端

模块通过以下 CSS 属性实现跨设备适配：

• max-width: 100%; max-height: 100%：限制图片最大尺寸，避免图片过大导致布局错乱；
• object-fit: contain：保持图片宽高比，确保不同比例的图片（如方形、矩形）均能完整显示；
• 容器宽度设置为width: 100%：适配不同屏幕尺寸（PC、平板、手机），确保广告区域占满父容器宽度。

技术实现亮点

• 兼容性处理：通过window.requestAnimationFrame兼容写法（setTimeout兜底），确保不同浏览器（如旧版 Chrome、Firefox）下滚动动画的流畅性；
• 性能优化：使用requestAnimationFrame替代setInterval，动画渲染与浏览器重绘同步，降低 CPU 负载；
• 样式重置：重置ul的默认内边距（padding: 0）和外边距（margin: 0），避免不同浏览器的默认样式差异导致布局错位。

应用场景

该模块适用于各类需要高频展示广告的互联网产品，例如：

• 企业官网：展示核心服务（如 APP 封装、推广合作）的宣传图片；
• 电商平台：滚动展示限时活动、热门商品；
• 资讯类网站：推送广告位或合作品牌信息。

使用说明：

1.下载文件直接上传\wp-content\themes\zibll下，原本有func的把func的代码粘进去就行。

2.使用小工具并且配置，这里注意，需要改文件两个位置 第一个位置：这个函数在文件的最下面，这里需要把划线的地方和小工具设置的必须一致