PHP-课程设计-LOL英雄资料网站

1. 项目链接：PHP-课程设计-LOL英雄资料网站-PHP文档类资源-CSDN下载

2. 项目视频：基于HTML+PHP+Jquery的LOL英雄资料网站_哔哩哔哩_bilibili

3. 项目简介：

该项目作为大二下学期Jquery课程设计模仿英雄联盟官方网站的英雄资料、英雄详情、装备和召唤师页面

主要模块如下

英雄页面：英雄列表、增加英雄、删除英雄、分类查询英雄、模糊查询英雄

英雄详情页面：英雄皮肤轮播效果、英雄属性值、英雄背景故事

装备页面：装备列表、装备信息、分类查询装备、模糊查询装备

召唤师技能页面：召唤师技能列表、召唤师技能切换查看

知识点：用Ajax、Jquery实现动态效果，PHP访问json数据处理数据，WampServer当服务器解释php

4. 项目功能简要

项目运行要求：我写的是仿LOL英雄资料的界面，数据都是动态的，依靠php来读取，需运行在Wampserver64上才有效果，或者你的机器上必须装上服务器和PHP。

功能一：图片轮播

功能二：AJAX案列，展示英雄

功能三：AJAX案列，英雄分类和查询指定英雄

功能四：AJAX案列

功能五：AJAX案列，删除英雄

功能六：AJAX案列，添加英雄

功能七：AJAX案列+图片提示案例，装备\召唤师技能

功能一：图片轮播

说明：用图片轮播实现了英雄皮肤切换效果

效果图：

实现Jquery代码：

    // 点击皮肤图像，显示相应皮肤$('.heroskinheadul li').on('click',function(){// 皮肤层的ulvar $ul = $('.heroskinul');var w = 1240;// 1.获取到这个li的下标var idx = $(this).index();var left = -idx * wif(idx == 0){left = 0;}// 2.让ul往左移动多少left$ul.stop().animate({'left':left}, 500);// 3.让兄弟取消选中的样式，自己选中的样式$(this).addClass("current").siblings().removeClass("current");});

功能二：AJAX案列，展示英雄

说明：根据ajax请求php返回json英雄数据，实现了英雄数据显示

效果图：

实现Jquery代码：

// 用ajax获取英雄数据// 根据type来分英雄，0是全部，1是战士，2是法师，3是刺客// 封装成方法// tag 0是查询，1是添加，2是删除 没用var curtype = 0;function getHeroList(ty, na, tg){curtype = ty;$.ajax({  url:'php/lol_hero_list_get.php',type: 'GET',data: {type:ty,name:na, tag:tg},success:function(data,stutas,xhr){var iso = data.status;if(iso == "error"){alert(data.info);return;}var $lidiv = "";if(data.data.length == 0){$('.herotxul').html("未搜索到符合条件的英雄，请重新输入");}else{// 英雄列表显示$('.herotxul').show();// 添加div隐藏$('.addherodiv').hide();for(var i = 0; i < data.data.length; i++){var himg = data.data[i].champion_icon;var hname = data.data[i].champion_name;// 组成$lidiv += '<li><a><img onclick="test(\''+hname+'\')" src="'+himg+'"/></a><a class="heronamea as">'+hname+'</a><a class="dela as">删除</a></li>';}$('.herotxul').html($lidiv);$('.dela').hide();}}})}

功能三：AJAX案列，英雄分类和查询指定英雄

说明：ajax请求php传入参数，根据分类显示不同类型的英雄，和输入英雄名查找指定英雄。

效果图：

根据“刺客”分类

查找有“亚”字的英雄

实现Jquery代码：

主要jquery代码与功能二相同，那个函数封装了.

// 切换选择不同英雄类型 start-------------------$(".selitem").click(function(){$(this).addClass("selcuritem").siblings().removeClass("selcuritem");// 根据下标，不同，访问不同类型英雄var idx = $(this).index();switch(idx){case 0:getHeroList(0, '', 0);break;case 1:getHeroList(1, '', 0);break;case 2:getHeroList(2, '', 0);break;case 3:getHeroList(3, '', 0);break;case 4:getHeroList(4, '', 0);break;case 5:getHeroList(5, '', 0);break;case 6:getHeroList(6, '', 0);break;}});// 切换选择不同英雄类型  end-------------------// 监听输入的英雄名，后台查找出来$('#findinput').keyup(function(){var val = $(this).val();getHeroList(curtype, val, 0);});

*功能四：AJAX***案列

说明：根据点击不同英雄头像展示相应英雄的背景故事、英雄属性、英雄皮肤。

效果图：

实现jquery代码：

这个没有jquery代码，是用php直接获取数据的

功能五：AJAX案列，删除英雄

说明：ajax请求php删除英雄，php实则对文件内容进行删除

效果图：

实施删除

删除完成

实现PHP代码：

这是用php实现的

<?php// 设置返回的是 jsonheader('content-type:application/json;charset=utf-8');$filedir = "../phpdata/data_lol_list.php";//1.获取到传入的name$name = $_GET['name'];//2.获取文件字符串$st = file_get_contents($filedir);//3.进行截取// 得到前半部分$qst = substr($st, 0, strpos($st, $name));// 得到后半部分$hst = substr($st, strpos($st, $name));// 前半部分找最后一个array位置$qst = substr($qst, 0, strrpos($qst, 'array'));// 后半部分找第一个array位置// 最后一个没有arrayif(strpos($hst, 'array')){$hst = substr($hst, strpos($hst, 'array'));}else{$hst = substr($hst, strrpos($hst, ',') + 1);}// 组成新string 加上前缀$qianzhui = '<?php$heroListArr =';$newst = $qst.$hst;//4.输入到回文件中$fp = fopen($filedir, "w+");fwrite($fp, $newst);//5.关闭fclose($fp);sleep(1);//6.结束 返回echo json_encode(array('status'=>'success','info'=>'success'));?>

功能六：AJAX案列，添加英雄

说明：ajax请求php，根据选择的英雄图片和英雄名称，进行添加英雄功能

效果图：

实现php代码：

<?php$name = $_POST['heroname'];$upfile = $_FILES['heroimg'];$imgdir = 'upimg/'.iconv("UTF-8","GBK",$upfile['name']);// 保存至临时文件move_uploaded_file($upfile['tmp_name'], '../'.$imgdir);// 字符串需要保存到list php文件中$fp = fopen("../phpdata/data_lol_list.php", "r+");$flag = fseek($fp, -5, SEEK_END);$flag = fwrite($fp,'array("champion_icon"=> "'.$imgdir.'","champion_name"=>"'.$name.'","type"=>"0"),)?>');fclose($fp);if ($flag) {header("Location: ../hero_list.html");} else {echo "添加失败";}?>

功能七：AJAX案列+图片提示案例，装备\*召唤师技能***

说明：装备和召唤师技能也都是通过ajax访问php返回相应数据

装备：

召唤师技能：

大致实现代码与上面功能二，功能三大致相同。

Div跟踪鼠标jquery代码：

// 鼠标放在图片上 显示详细$('.herotxul').on("mouseenter", "li", function(e){// 显示$('#hint').show();// 给定位$('#hint').css({"top" : (e.pageY + 10)+"px","left": (e.pageX + 10)+"px"});//获取值getEquipOne($(this).find(".as").text());});$('.herotxul').on("mouseleave", "li", function(e){$('#hint').hide();});// 默认隐藏$('#hint').hide();

项目的整体显示截图

项目结构：

项目运行：