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(){

        // 皮肤层的ul

        var $ul = $('.heroskinul');

        var w = 1240;

        // 1.获取到这个li的下标

        var idx = $(this).index();

        var left = -idx * w

        if(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

   // 设置返回的是 json

   header('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位置

   // 最后一个没有array

   if(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();

• 项目的整体显示截图

项目结构：

项目运行：