基于Ajax的小案例（克鲁赛德战记英雄展示）

最新推荐文章于 2024-06-03 09:20:03 发布

我，小李！

最新推荐文章于 2024-06-03 09:20:03 发布

阅读量280

点赞数 2

文章标签： javascript vscode html5 jquery ajax

本文链接：https://blog.csdn.net/zhixuejia/article/details/119462255

版权

我们想实现如下功能

首先点击上方列表可以做到局部刷新

点击英雄头像出现遮罩层并播放该英雄技能视频，双击退出

casf

1.给每个小li添加点击事件，当被点击时给当前小li添加一个类使其变色表示被点击，创建一个Ajax，代码中详解

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
  <link rel="stylesheet" href="./css/index.css" />
  <style>
    /* body {
        background-image: url('http://img.badapple.top/东方Project/十六夜咲夜/img (7).jpg')
      } */
  </style>
</head>

<body>
  <img src="./img/header.png" alt="" class="header" />
  <div class="cq-wrap">
    <!-- 导航 -->
    <div class="nav">
      <ul>
        <li class="active"><img src="./img/sword.png" alt="" /><span>剑士</span></li>
        <li><img src="./img/knight.png" alt="" /> <span>骑士</span></li>
        <li><img src="./img/Archer.png" alt="" /> <span>弓手</span></li>
        <li><img src="./img/hunter.png" alt="" /> <span>猎人</span></li>
        <li><img src="./img/magic.png" alt="" /> <span>法师</span></li>
        <li><img src="./img/flamen.png" alt="" /> <span>祭司</span></li>
      </ul>
    </div>
    <!-- table -->
    <table class="cq-list">
      <thead>
        <th>勇士</th>
        <th>技能</th>
        <th>武器</th>
      </thead>
      <tbody>
      </tbody>
    </table>
  </div>
  <!-- 遮罩层 -->
  <div class="cover" style="display: none">
    <img class="loading" src="./img/loading01.gif" alt="" />
  </div>
  <script id="tmp" type="text/html">
    {{each heros}}
      <tr>
        <td>
          <img class="icon" src="{{$value.heroIcon}}" alt="" >
          <span>{{$value.heroName}}</span>
        </td>
        <td><img class="icon" src="{{$value.skillIcon}}" alt="" ><span>{{$value.skillName}}</span></td>
        
        <td><img class="icon" src="{{$value.weaponIcon}}" alt="" >{{$value.weaponName}}</td>
        
      </tr>
    {{/each}}
  </script>
</body>

</html>
<script src="./js/jquery-1.12.4.min.js"></script>
<!-- 导入模板引擎 -->
<script src="./js/template-web.js"></script>
<!-- 准备模板 -->
<script type="text/html" id="hero">

</script>
<script>
  $(function () {
    $('.nav li').click(function () {
      $(this).addClass('active').siblings().removeClass('active');
      var type = $(this).find('span').text()
      $.ajax({
        url: 'https://autumnfish.cn/api/cq/category',//接口地址
        type: 'get',//请求方式
        dataType: 'json',//期望返回值
        data: {
          type: type//当前英雄类别
        },
        success: function (data) {//成功后的回调函数
          console.log(data);
          var heros = data.data.heros;//将接口中返回的英雄名复制给返回值data命名为heros
          console.log(heros);
          // console.log(heros[0].heroIcon);
          var html = template('tmp', { heros: heros });//利用模板引擎 替换上方遍历显示的所有英雄
          $('.cq-list tbody').html(html);//将html页面显示在tbody中
        }
      })
    }).eq(0).trigger('click');//给第一个小li模拟一次点击，这样当用户访问时就会直接显示第一个li的返回内容

    $('tbody').on('click', '.icon', function () {//给tbody添加点击事件
      var name = $(this).next('span').text().trim()//获取当前英雄的名字并去掉两边的空格
      $('.cover').fadeIn()//遮罩层淡出
      $.ajax({
        url: 'https://autumnfish.cn/api/cq/gif',
        type: "get",
        dataType: 'json',
        data: {
          name: name
        },
        success: function (response) {
          console.log(response);
          $('.cover .loading').attr('src', response.data.skillGif);//将loading动画替换成返回的gif
        }
      })
    })
    $('.cover').on('dblclick', function () {//当用户双击遮罩层时，遮罩层消失并把动画替换回loading不然用户下次点击加载时会先除上一次点击英雄的gif
      $(this).fadeOut(function () {
        $('.cover .loading').attr('src', './img/loading01.gif')
      })
    })
  })

我，小李！

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
基于Ajax的小案例（克鲁赛德战记英雄展示）

我们想实现如下功能首先点击上方列表可以做到局部刷新点击英雄头像出现遮罩层并播放该英雄技能视频，双击退出casf1.给每个小li添加点击事件，当被点击时给当前小li添加一个类使其变色表示被点击，创建一个Ajax，代码中详解<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width.
复制链接

扫一扫