I
《Web 前端开发技术》
期 末 项 目 设 计
题 目 仿英雄联盟游戏官网
学 院 信息 科学与工程学院
专 业 软件工程
学生姓名 李仟禧
学 号 201810414415 班级 2018- 4
任课教师 刘 永 红
2019 年 12 月 21 日
II
III
目 录
绪 论...................................................................................................................................................................1
开发背景....................................................................................................................................................1
研究意义....................................................................................................................................................2
国内外研究现状........................................................................................................................................2
本文的研究内容及主要解决的问题.......................................................................................................2
论文的组织结构........................................................................................................................................2
1 系统分析.........................................................................................................................................................4
1.1 技术可行性..................................................................................................................................4
1.3 模块概述..............................................................................................................................................4
1.4 本章小结..............................................................................................................................................4
2 开发平台及技术基础.....................................................................................................................................5
2.1 开发平台..............................................................................................................................................5
2.2 本章小结..............................................................................................................................................5
3 系统设计.........................................................................................................................................................6
3.1 总体设计..............................................................................................................................................6
3.3 本章小结............................................................................................................................................12
4 系统实现.......................................................................................................................................................13
4.1 网页部分代码讲解...........................................................................................................................13
4.1.1 主页网页部分.................................................................................................................................13
如图 1-1 的网页头部部分运用了 div 盒子框架仿照了英雄联盟官方网页的头部导航。...............13
插入英雄联盟 logo 图片在左上方，用<a> 元素 href 属性，链接到网页自身。............................13
<a class="logo" href="#" title="英雄联盟官网">..................................................................................13
<img src="images/logo-public.png" alt="英雄联盟" width="167" height="60">...............................13
</a>.........................................................................................................................................................13
无序 HTML 列表<ul>嵌套,<span> 来组合行内元素..........................................................................13
<ul class="head-nav">.............................................................................................................................13
<li>..........................................................................................................................................................13
<a href="#" target="_blank" title="游戏资料">....................................................................................13
<span class="head-nav-title">游戏资料</span>...................................................................................13
IV
<span class="head-nav-subtitle">GAME INFO</span>.......................................................................13
</a>.........................................................................................................................................................13
</li>.........................................................................................................................................................13
..................................................................................................................................................................13
</ul>.........................................................................................................................................................13
定义盒子在网页右上方，<p>标签链接到登录网页的界面..............................................................13
<div class="head-userinfo-brief">...........................................................................................................13
<p class="unlogin">亲爱的召唤师，欢迎<a href="../登录注册界面/login.html">登录</a></p>...13
</div>......................................................................................................................................................13
点击图 1-1 中的“查看详情”按钮可弹出相关视频...............................................................................14
If 语句来判断此时视频是播放还是暂停的状态，若是正在播放点击按钮后则暂停，反之则播放 。
..................................................................................................................................................................14
其中的 document.getElementById("Vidio").style.display = "inline";代码作用是用户点击按钮后，
原本的视频从 display:none;转换成 display:inline;实现了视频的弹出。...........................................14
<video width="520" height="300" controls autoplay class="vidio" id="Vidio">.................................14
<source src="2.mp4" type="video/mp4">.............................................................................................14
</video>..................................................................................................................................................14
<a class="top-act-link" onclick="openWin()" href="#">查看详情</a>................................................14
<script>....................................................................................................................................................14
function openWin() {..............................................................................................................................14
var video = document.getElementById('Vidio');....................................................................................14
if (video.paused) {...................................................................................................................................14
video.play();............................................................................................................................................14
} else {.....................................................................................................................................................14
video.pause();..........................................................................................................................................14
} {............................................................................................................................................................14
document.getElementById("Vidio").style.display = "inline";...............................................................14
}...............................................................................................................................................................14
}...............................................................................................................................................................14
</script>..................................................................................................................................................14
如要退出视频则按下键盘的“ESc”键，视频会暂停并转换为 display:none;实现视频在网页隐藏的
V
功能，在 body 部分加入 onkeydown 键盘触发事件，确保鼠标指向页面的任意位置时都能触发
该键盘触发事件。..................................................................................................................................14
<body onkeydown="keyCode(event)">..................................................................................................14
<script>....................................................................................................................................................14
function keyCode(event) {......................................................................................................................14
var x = event.keyCode;...........................................................................................................................15
if (x == 27) {...........................................................................................................................................15
var video = document.getElementById('Vidio');....................................................................................15
if (video.played) {...................................................................................................................................15
video.pause();..........................................................................................................................................15
} {............................................................................................................................................................15
document.getElementById("Vidio").style.display = "none";.................................................................15
}...............................................................................................................................................................15
}...............................................................................................................................................................15
}...............................................................................................................................................................15
</script>..................................................................................................................................................15
在图 1-1 网页的中间加入<ul>列表可跳转到相关的作业网页界面。..............................................15
<ul class="pagetab-list">.........................................................................................................................15
<li><a class="pagetab-list-lnk" href="../ 新 手 指 引 / 新 手 指 引 .html" target="_blank"> 新 手 指
引</a></li>..............................................................................................................................................15
..................................................................................................................................................................15
</ul>.........................................................................................................................................................15
图 1-2 实现了轮播图效果，运用到了 setInterval()方法按照所定义的周期来调用 autoplay()函数实
现图片经过一定时间（3s）后的左滑，轮播图两侧有点击按钮，当鼠标点击后会出发 onclick
点击事件，实现图片左右滑动。Sport()函数处理了图片滑动速度。当鼠标移到图片上方时触发
onmouseover，轮播图停止滑动，鼠标从图片上方移开后触发 onmouseout 事件，重新计时后，
轮播图开始滑动。..................................................................................................................................15
JavaScript 部分的代码如下：................................................................................................................15
<script type="text/javascript">................................................................................................................15
var oBox = document.getElementById("box");.....................................................................................15
var oUl = document.getElementById("inner-box");..............................................................................15
