克鲁赛德战记总结

其他 2020-09-07 13:34:43 阅读次数: 0

效果：
在这里插入图片描述

一、项目介绍

点击不同职业加载不同的英雄，点击英雄头像，以动画的方式显示其技能

<!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" />
</head>

<body>
  <img src="./img/header.png" alt="" class="header" />
  <div class="cq-wrap">
    <!-- 导航 -->
    <div class="nav">
      <ul>
        <li><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>
        <tr>
          <td>
            <img class="icon" src="http://p6.qhimg.com/dr/72__/t01b8063ea608652431.png" alt="" />
            <span>
              涅斯军长官尤莉娅
            </span>
          </td>
          <td>
            <img class="skill" src="http://p9.qhimg.com/dr/52__/t01087d8e61575ab25d.png" alt="" />
            注射!
          </td>
          <td>
            <img class="weapon" src="http://p6.qhimg.com/dr/45__/t0178ac936dcb72650f.png" alt="" />
            疫苗-G
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <!-- 遮罩层 -->
  <div class="cover" style="display: none">
    <img class="loading" src="./img/loading01.gif" alt="" />
  </div>
</body>

</html>

二、技术分析

  • HTML+CSS布局
  • jquery的使用（tab栏切换）
  • ajax的使用
  • jquery 动画、动画序列（淡入淡出）
  • setInterval 定时器
  • 委托事件
  • art-template模板引擎

三、布局分析

  • body:背景大图
    • 顶部广告栏：img
    • 中间版本盒子 cq-wrap
      • 上面tab栏 .nav>ul>li>img+span
      • 下面英雄列表栏 table
    • 遮罩层 .cover>img
      • 与body一样大小，半透明效果，中间有个img。默认隐藏，点击英雄头像的时候显示
      • img中是一个gif动图（一般网页加载特效都是gif动图实现）
  • 需求分析
    • 1.随机背景图
      • 每隔一段时间，自动刷新背景图
    • 2.顶部tab栏切换
    • 3.点击头像查看酷炫动图效果
    • 4.点击遮罩层隐藏动图

四、接口文档

  • 随机背景图接口
 	请求地址:https://autumnfish.cn/api/cover/random
	请求方法：get
    请求参数：无
  • 英雄信息接口
 	  请求地址：https://autumnfish.cn/api/cq/category
      请求方法：get
      请求参数：type
      参数名	参数说明	备注
      type	英雄类型	不能为空，可选值有:剑士，骑士，弓手，猎人，法师，祭司
  • 英雄技能动态图接口
	  请求地址：https://autumnfish.cn/api/cq/gif
      请求方法：get
      请求参数：name
      参数名	参数说明	备注
      name	英雄名

五、具体步骤：

（1）导包

	<script src="./js/jquery-1.12.4.min.js"></script>
	<!-- 模板引擎 -->
	<script src="./js/template-web.js"></script>

（2）随机背景图切换,6s换一次

  • ajax请求数据
  • 通过css属性设置背景图
  • 注意：$(‘body’).css(‘backgroundImage’,'url(' + backData.url + ')'); 图片地址要拼接字符串
// 背景图在一定时间随机切换(6s)
  setInterval(function () {
    $.ajax({
      url:'https://autumnfish.cn/api/cover/random',
      type:'get',
      dataType:'json',
      success:function(backData){
        console.log(backData);
        $('body').css('backgroundImage','url(' + backData.url + ')');
      }
    });
  }, 6000);

（3）tab栏切换加载英雄数据

  • 通过类名改变tab栏样式

  • 模板引擎渲染页面

  • css文件

.nav ul li.active:nth-child(1) {
  background-color: #e26161;
}
.nav ul li.active:nth-child(2) {
  background-color: #69b7ce;
}
.nav ul li.active:nth-child(3) {
  background-color: #7fb545;
}
.nav ul li.active:nth-child(4) {
  background-color: #deae26;
}
.nav ul li.active:nth-child(5) {
  background-color: #a45bca;
}
.nav ul li.active:nth-child(6) {
  background-color: #e84daa;
}
  • js文件
// tab栏切换 加载相应的英雄数据
  $('.nav ul li').click(function () {
    // 排他思想
    $(this).addClass('active').siblings().removeClass('active');
    // 获得type 英雄类型
    let type = $(this).children('span').text();
    console.log(type);
    //  ajax请求数据
    $.ajax({
      url: 'https://autumnfish.cn/api/cq/category',
      type: 'get',
      dataType: 'json',
      data: {
        type: type
      },
      success: function (backData) {
        console.log(backData);
        // 渲染到页面
        $('.cq-list tbody').html(template('hero_list', backData));
      }
    });
  });
  // 默认加载第一个
  $('.nav>ul>li:eq(0)').trigger('click');
  • 模板
<!-- 英雄列表模板 -->
<script id="hero_list" type="text/html">
  {{each  data.heros v}}
  <tr>
    <td>
      <img class="icon" src="{{v.heroIcon}}" alt="" />
      <span>
        {{v.heroName}}
      </span>
    </td>
    <td>
      <img class="skill" src=" {{v.skillIcon}} " alt="" />
      {{v.skillName}}
    </td>
    <td>
      <img class="weapon" src=" {{v.weaponName}} " alt="" />
      {{v.weaponName}}
    </td>
  </tr>
  {{/each}}

（4） 技能及动画

  • 获取当前头像对应的name
  • 加载loading动画
  • ajax发送请求
  • 服务器响应之后 渲染页面
  • 隐藏 loading动画
  • 注意：数据是动加载的所以需要注册委托事件，trim()方法 去除字符两边的空格
// 技能及动画
  $('body').on('click', '.icon', function () {
    // 获取name
    let name = $(this).next().text().trim();
    console.log(name);
    // 加载动画
    $('.cover').fadeIn();
    // ajax加载数据
    $.ajax({
      url: 'https://autumnfish.cn/api/cq/gif',
      type: 'get',
      dataType: 'json',
      data: {
        name: name
      },
      success: function (backData) {
        console.log(backData);
        $('.loading').attr('src', backData.data.skillGif);

      }
    });

  });
  // 点击隐藏loading 动画序列
  $('.cover').click(function () {
    $(this).fadeOut(500, function () {
      $('.cover .loading').attr('src','./img/loading01.gif')
    })
  });

六、完整代码

  • css
* {
  margin: 0;
  padding: 0;
}
.header {
  display: block;
  width: 100%;
  opacity: .9;
}
html,
body {
  height: 100%;
  overflow: hidden;
}
body {
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cq-wrap {
  width: 720px;
  padding-top: 20px;
  margin: 0px auto;
  background-color:rgba(255, 238, 222, 0.9);
  /* height: 100%; */
  flex:1;
  overflow: auto;
}
.nav{
  height: 60px;
}
.nav ul {
  display: flex;
  list-style: none;
  justify-content: center;
}
.nav ul li {
  height: 60px;
  width: 110px;
  background-color: #af9279;
  border-radius: 6px;
  margin-right: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  cursor: pointer;
}
.nav ul li.active:nth-child(1) {
  background-color: #e26161;
}
.nav ul li.active:nth-child(2) {
  background-color: #69b7ce;
}
.nav ul li.active:nth-child(3) {
  background-color: #7fb545;
}
.nav ul li.active:nth-child(4) {
  background-color: #deae26;
}
.nav ul li.active:nth-child(5) {
  background-color: #a45bca;
}
.nav ul li.active:nth-child(6) {
  background-color: #e84daa;
}
.cq-list {
  border-collapse: collapse;
  margin-top: 20px;
}
.cq-list th {
  height: 50px;
  width: 200px;
  background-color: #614c3a;
  border: 1px solid #948b54;
  color: white;
}
.cq-list th:nth-child(1) {
  width: 320px;
}
.cq-list th:nth-child(2) {
  width: 300px;
}
.cq-list td {
  border: 1px solid #948b54;
  padding: 5px;
  height: 90px;
  box-sizing: border-box;
  /* font-size: 20px; */
}
.cq-list img {
  vertical-align: middle;
}
.cq-list img.icon {
  width: 80px;
  height: 80px;
  cursor: pointer;
}

/* 遮罩层 */
.cover{
  height: 100%;
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  background-color: #222222;
  opacity: .9;

}
.cover img{
  position: absolute;
  left: 50%;
  top: 50%;
  transform:translate(-50%,-50%)
}
  • index+js
<!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" />
</head>

<body>
  <img src="./img/header.png" alt="" class="header" />
  <div class="cq-wrap">
    <!-- 导航 -->
    <div class="nav">
      <ul>
        <li><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>
        <tr>
          <td>
            <img class="icon" src="http://p6.qhimg.com/dr/72__/t01b8063ea608652431.png" alt="" />
            <span>
              涅斯军长官尤莉娅
            </span>
          </td>
          <td>
            <img class="skill" src="http://p9.qhimg.com/dr/52__/t01087d8e61575ab25d.png" alt="" />
            注射!
          </td>
          <td>
            <img class="weapon" src="http://p6.qhimg.com/dr/45__/t0178ac936dcb72650f.png" alt="" />
            疫苗-G
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <!-- 遮罩层 -->
  <div class="cover" style="display: none">
    <img class="loading" src="./img/loading01.gif" alt="" />
  </div>
</body>

</html>

<script src="./js/jquery-1.12.4.min.js"></script>
<!-- 模板引擎 -->
<script src="./js/template-web.js"></script>

<!-- 英雄列表模板 -->
<script id="hero_list" type="text/html">
  {{each  data.heros v}}
  <tr>
    <td>
      <img class="icon" src="{{v.heroIcon}}" alt="" />
      <span>
        {{v.heroName}}
      </span>
    </td>
    <td>
      <img class="skill" src=" {{v.skillIcon}} " alt="" />
      {{v.skillName}}
    </td>
    <td>
      <img class="weapon" src=" {{v.weaponName}} " alt="" />
      {{v.weaponName}}
    </td>
  </tr>
  {{/each}}
</script>

<script>
  /*接口文档 
      请求地址:https://autumnfish.cn/api/cover/random
      请求方法：get
      请求参数：无

      请求地址：https://autumnfish.cn/api/cq/category
      请求方法：get
      请求参数：type
      参数名	参数说明	备注
      type	英雄类型	不能为空，可选值有:剑士，骑士，弓手，猎人，法师，祭司

      请求地址：https://autumnfish.cn/api/cq/gif
      请求方法：get
      请求参数：name
      参数名	参数说明	备注
      name	英雄名

     */


  /*思路分析 
    1. 每隔6s,更新随机背景图片

    2. 点击每一个tab栏：tab栏切换
     2.1 排他思想修改样式
     2.2 获取当前点击的type类型
     2.3 ajax发送请求
     2.4 服务器响应之后  模板引擎渲染页面

    3. 点击头像icon
     3.1 获取当前头像对应的name
     3.2 加载loading动画
     3.3 ajax发送请求
     2.4 服务器响应之后  渲染页面

    4. 点击cover ： 隐藏cover
   */

  // 背景图在一定时间随机切换(6s)
  // setInterval(function () {
  //   $.ajax({
  //     url:'https://autumnfish.cn/api/cover/random',
  //     type:'get',
  //     dataType:'json',
  //     success:function(backData){
  //       console.log(backData);
  //       $('body').css('backgroundImage','url(' + backData.url + ')');
  //     }
  //   });
  // }, 6000);

  // tab栏切换 加载相应的英雄数据
  $('.nav ul li').click(function () {
    // 排他思想
    $(this).addClass('active').siblings().removeClass('active');
    // 获得type 英雄类型
    let type = $(this).children('span').text();
    // console.log(type);
    //  ajax请求数据
    $.ajax({
      url: 'https://autumnfish.cn/api/cq/category',
      type: 'get',
      dataType: 'json',
      data: {
        type: type
      },
      success: function (backData) {
        // console.log(backData);
        // 渲染到页面
        $('.cq-list tbody').html(template('hero_list', backData));
      }
    });
  });
  // 默认加载第一个
  $('.nav>ul>li:eq(0)').trigger('click');

  // 技能及动画
  $('body').on('click', '.icon', function () {
    // 获取name
    let name = $(this).next().text().trim();
    console.log(name);
    // 加载动画
    $('.cover').fadeIn();
    // ajax加载数据
    $.ajax({
      url: 'https://autumnfish.cn/api/cq/gif',
      type: 'get',
      dataType: 'json',
      data: {
        name: name
      },
      success: function (backData) {
        console.log(backData);
        $('.loading').attr('src', backData.data.skillGif);

      }
    });

  });
  // 点击隐藏loading 动画序列
  $('.cover').click(function () {
    $(this).fadeOut(500, function () {
      $('.cover .loading').attr('src','./img/loading01.gif')
    })
  });
</script>

七、总结

  • 1.如果背景图中有无法解析的部分（例如空格），则可以将路径使用引号包裹
  • 2.jq动态添加的元素，无法直接绑定事件,需要使用事件委托（ajax中非常常见）
  • 3.loading动图一般使用gif图片来实现（例如京东的小狗狗）
  • 4.trim()去除字符串两边的空格

猜你喜欢

转载自blog.csdn.net/weixin_44757417/article/details/108189670
今日推荐
周排行
解析ReentrantLock实现原理
面试之非技术
第三周助教点评
《阅读-拖延心理学》
第二章 使用 kind 一分钟搭建 k8s 集群
2018福大软工实践第五次作业
Day2.基本条件语句
抢占物联网入口，“腾讯云小微”将和AliGenie互怼
IO流的输入输出
vSphere 7.0初体验
每日归档
更多
2024-06-12(0)
2024-06-11(0)
2024-06-10(0)
2024-06-09(0)
2024-06-08(0)
2024-06-07(0)
2024-06-06(0)
2024-06-05(0)
2024-06-04(10)
2024-06-03(52)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022