游戏官网手机版模板 | 武侠页游 WAP 页面全套，jQuery 开箱即用

基于 jQuery + SuperSlide / TouchSlide 打造的武侠页游官网手机版模板。开箱即用，替换品牌素材即可上线。

一款游戏上线前，官网是玩家接触产品的第一入口。开服公告滚动、新手攻略、壁纸下载、礼包分享——这些模块看似简单，实际开发中滚动特效、触屏轮播、弹窗与复制交互都要逐一调试。这套模板以”独步天下”武侠页游为原型，把手机端官网的完整页面与交互全部做完，替换图片与文案即可直接上线。

模板亮点

1. 5 个页面开箱即用

• 官网首页：主视觉 + 开服公告滚动 + 下载按钮 + 宣传视频弹窗
• 官网首页（含资讯）：在首页基础上增加 新闻 / 公告 / 活动 / 维护 四个 Tab 选项卡
• 新手攻略 + 高清壁纸：攻略列表与壁纸触屏轮播双 Tab
• 分享页：一键复制 + 礼包弹窗，用于社交传播
• 演示导航页（index.html）：模板入口，汇总全部页面链接，方便交付演示

2. 游戏官网场景交互一应俱全

• 开服公告上下滚动：SuperSlide txtScroll-top 无缝循环滚动，展示”区服 + 开服时间 + 游戏名称”
• 宣传视频弹窗：jquery.reveal 模态弹窗内嵌 MP4 播放器，关闭弹窗自动暂停视频
• 微信二维码弹窗：内置微信号展示位，扫码引导玩家加群
• 一键复制组件：ZeroClipboard 实现复制卡号 / 链接，复制成功自动弹出礼包弹窗或网页复制提示
• 新手攻略 / 壁纸 Tab 切换：global.js 通用选项卡逻辑，鼠标悬停即切换

3. 触屏轮播体验完整

高清壁纸模块基于 TouchSlide 实现：自动播放（6 秒间隔）、自动分页、左右箭头手动切换、leftLoop 无缝循环，专为手机触屏滑动优化。

4. 移动端 WAP 适配

• viewport 禁止缩放，页面宽度锁定 320px ~ 640px，主流手机分辨率全覆盖
• 触摸高亮、盒模型、输入框外观均做了移动端重置，接近原生 App 的操作手感
• 微软雅黑字体栈 + 20px 基准字号，中文显示清晰饱满

5. 整图切页结构，换皮成本极低

页面采用”整图 + 绝对定位热区”的经典游戏官网结构，所有视觉均为 img/ 目录下的切图。换一款游戏上线，只需输出同尺寸切图同名覆盖，零 CSS 基础也可完成换皮。

技术栈

技术	版本	用途
jQuery	1.7.1	DOM 操作 / 事件
SuperSlide	2.1.1	开服公告文字上下无缝滚动
TouchSlide	1.1	高清壁纸触屏轮播
jquery.reveal	—	二维码 / 视频 / 礼包模态弹窗
ZeroClipboard	1.0.7	一键复制（卡号 / 链接）
normalize.css	—	样式重置

项目结构

game-mobile/
├── index.html              # 模板演示导航页（入口，汇总 4 个页面链接）
├── 手机-首页.html           # 官网首页（主视觉 + 公告滚动 + 下载 + 视频弹窗）
├── 手机-首页+微.html        # 官网首页（含 新闻/公告/活动/维护 Tab）
├── 手机-新手+美图.html      # 新手攻略 + 高清壁纸轮播
├── 手机-分享.html           # 分享页（一键复制 + 礼包弹窗）
├── css/
│   ├── style.css           # 主样式（主色 #c1202f 中国红）
│   └── normalize.css       # 样式重置
├── js/
│   ├── jquery.min.js       # jQuery 1.7.1
│   ├── jquery.SuperSlide.2.1.1.js  # 文字滚动
│   ├── TouchSlide.1.1.js   # 触屏轮播
│   ├── jquery.reveal.js    # 模态弹窗
│   └── global.js           # Tab 选项卡通用逻辑
├── ZeroClipboard/          # 一键复制组件（js + swf）
├── img/                    # 全套页面切图与二维码素材
└── src/
    └── movie.mp4           # 游戏宣传视频

快速开始

纯静态模板，无需构建：

# 方式一：浏览器直接打开
双击 index.html（演示导航页）即可浏览全部页面

# 方式二：本地静态服务器
python3 -m http.server 8080
# 访问 http://localhost:8080/

# 方式三：VS Code Live Server 插件，右键 index.html → Open with Live Server

建议使用 Chrome 设备模拟（手机视图）预览，以获得真实移动端效果。

二次开发指南

需求	操作
更换品牌	替换 img/ 下同名切图（主视觉、按钮、二维码等），整图结构换皮极快
修改文案 / 链接	直接编辑各 HTML 内的文字与 href；微信号在弹窗处修改
更换主题色	修改 css/style.css 中 .ui_color 等颜色类（默认 #c1202f）
增删页面	复制任一 手机-*.html 改名修改，并在 index.html 导航页补链接
替换视频音乐	覆盖 src/movie.mp4，视频弹窗自动加载

适用场景

武侠 / 仙侠 / MMORPG 页游官网手机版、手游 WAP 下载页、H5 游戏推广落地页、游戏开服活动页，也可作为”整图热区式”移动端官网的通用骨架。

从零自研 vs 使用本模板

维度	从零自研	使用本模板
交付周期	1~2 周起	换图换文案，1 天上线
页面还原度	需反复走查	成熟游戏官网布局直接可用
交互与动画	滚动/轮播/弹窗逐个开发	公告滚动、触屏轮播、弹窗全内置
移动端适配	需单独调试	WAP 适配已完成
维护成本	自行承担	结构简单，改图即可迭代

在线预览

纯静态模板，将整个目录部署至任意静态托管（GitHub Pages / OSS / 云虚拟主机等）即可在线访问。

http://8.166.93.126:8989/game-mobile