【html】王者荣耀资料站

最新推荐文章于 2024-06-22 15:23:28 发布
最新推荐文章于 2024-06-22 15:23:28 发布
阅读量1.7k 收藏 18
点赞数 7
文章标签： html jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42010290/article/details/112134198
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-1.11.3.js"></script>
    <link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container">
    <ul class="list">
        <li><a href="javascript:;" data-page="page1.html">英雄</a></li>
        <li><a href="javascript:;" data-page="page2.html">局内道具</a></li>
        <li><a href="javascript:;" data-page="page3.html">召唤师技能</a></li>
    </ul>
    <div class="content">

    </div>
</div>
<script>
    $(function () {
        $(".list li").click(function(){
            $(".list li").removeClass("selected");
            $(this).addClass("selected");
        });

        $('.list li a').on('click',function () {
            let url = $(this).data('page');
            $('.content').load(url);
        })
    })
</script>

</body>
</html>

英雄页：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="index.css">
    <script src="../js/jquery-1.11.3.js"></script>
</head>
<body>
<div class="content">
    <div class="btn-group">
        <input type="radio" name="hero" id="hero_all">全部
        <input type="radio" name="hero" id="hero_tk" value="3">坦克
        <input type="radio" name="hero" id="hero_zs" value="1">战士
        <input type="radio" name="hero" id="hero_ck" value="4">刺客
        <input type="radio" name="hero" id="hero_fs" value="2">法师
        <input type="radio" name="hero" id="hero_ss" value="5">射手
        <input type="radio" name="hero" id="hero_fz" value="6">辅助
        <div class="search">
            <input type="search" id="search_text" placeholder="请输入你想搜索的英雄名">
            <label class="search-icon"></label>
        </div>
    </div>
    <ul class="herolist">

    </ul>
</div>
</body>
<script>

    $(function () {

        $('.search-icon').on('click',function () {
            $.getJSON("../data/herolist.json", function (data) {
                let html = '';
                var txt = $('#search_text').val();console.log(txt);
                $(data).each(function (i, e) {
                    if(e.cname === txt){
                        html += `<li>
                            <img src="https://game.gtimg.cn/images/yxzj/img201606/heroimg/${e.ename}/${e.ename}.jpg">
                            <span>${e.cname}</span>
                            </li>`
                    }
                });
                $('.herolist').html(html);
            })
        })

        $('#hero_all').click(function () {
            $.getJSON("../data/herolist.json", function (data) {
                readData(data);
            })
        })

        $('#hero_tk').click(function () {
            $.getJSON("../data/herolist.json", function (data) {
                herocheck(data,3);
            })
        })
        $('#hero_zs').click(function () {
            $.getJSON("../data/herolist.json", function (data) {
                herocheck(data,1);
            })
        })
        $('#hero_ck').click(function () {
            $.getJSON("../data/herolist.json", function (data) {
                herocheck(data,4);
            })
        })
        $('#hero_fs').click(function () {
            $.getJSON("../data/herolist.json", function (data) {
                herocheck(data,2);
            })
        })
        $('#hero_ss').click(function () {
            $.getJSON("../data/herolist.json", function (data) {
                herocheck(data,5);
            })
        })
        $('#hero_fz').click(function () {
            $.getJSON("../data/herolist.json", function (data) {
                herocheck(data,6);
            })
        })
        function readData(data) {
            let html = '';
            $(data).each(function (i, e) {
                html += `<li>
                            <img src="https://game.gtimg.cn/images/yxzj/img201606/heroimg/${e.ename}/${e.ename}.jpg">
                            <span>${e.cname}</span>
                            </li>`
            });
            $('.herolist').html(html);
        }


        function herocheck(data,index) {
            let html = '';
            $(data).each(function (i, e) {
                if(e.hero_type === index || e.hero_type2 === index){
                    html += `<li>
                            <img src="https://game.gtimg.cn/images/yxzj/img201606/heroimg/${e.ename}/${e.ename}.jpg">
                            <span>${e.cname}</span>
                            </li>`
                }
            });
            $('.herolist').html(html);
        }

    })

</script>
</html>

道具页：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="index.css">
    <script src="../js/jquery-1.11.3.js"></script>
</head>
<body>
<div class="content">
    <div class="btn-group">
        <input type="radio" name="model" id="normal">常规模式
        <input type="radio" name="model" id="bjtw">边界突围模式
    </div>
    <div class="btn-group">
        <input type="radio" name="prop" id="item_all">全部
        <input type="radio" name="prop" id="item_atk" value="1">攻击
        <input type="radio" name="prop" id="item_magic" value="2">法术
        <input type="radio" name="prop" id="item_def" value="3">防御
        <input type="radio" name="prop" id="item_mov" value="4">移动
        <input type="radio" name="prop" id="item_farm" value="5">打野
        <input type="radio" name="prop" id="item_walk" value="7">游走
        <div class="search">
            <input type="search" placeholder="请输入你想搜索的道具名">
            <label class="search-icon"></label>
        </div>
    </div>
    <ul class="herolist">

    </ul>
</div>
<script>
    $(function () {
        $('#normal').click(function () {
            $('.search-icon').on('click',function () {
                $.getJSON("../data/item.json", function (data) {
                    let html = '';
                    var txt = $('#search_text').val();
                    $(data).each(function (i, e) {
                        if(e.cname === txt){
                            html += `<li>
                            <img src="//game.gtimg.cn/images/yxzj/img201606/itemimg/${e.item_id}.jpg">
                            <span>${e.item_name}</span>
                            </li>`
                        }
                    });
                    $('.herolist').html(html);
                })
            })

            function readData(data) {
                let html = '';
                $(data).each(function (i, e) {
                    html += `<li>
                            <img src="//game.gtimg.cn/images/yxzj/img201606/itemimg/${e.item_id}.jpg">
                            <span>${e.item_name}</span>
                            </li>`
                });
                $('.herolist').html(html);
            }

            $('#item_all').click(function () {
                $.getJSON("../data/item.json", function (data) {
                    readData(data);
                })
            })

            $('#item_atk').click(function () {
                $.getJSON("../data/item.json", function (data) {
                    itemcheck(data,1);
                })
            })

            $('#item_magic').click(function () {
                $.getJSON("../data/item.json", function (data) {
                    itemcheck(data,2);
                })
            })

            $('#item_def').click(function () {
                $.getJSON("../data/item.json", function (data) {
                    itemcheck(data,3);
                })
            })

            $('#item_mov').click(function () {
                $.getJSON("../data/item.json", function (data) {
                    itemcheck(data,4);
                })
            })
            $('#item_farm').click(function () {
                $.getJSON("../data/item.json", function (data) {
                    itemcheck(data,5);
                })
            })
            $('#item_walk').click(function () {
                $.getJSON("../data/item.json", function (data) {
                    itemcheck(data,7);
                })
            })

            function itemcheck(data,index) {
                let html = '';
                $(data).each(function (i, e) {
                    if(e.item_type === index){
                        html += `<li>
                            <img src="//game.gtimg.cn/images/yxzj/img201606/itemimg/${e.item_id}.jpg">
                            <span>${e.item_name}</span>
                            </li>`
                    }
                });
                $('.herolist').html(html);
            }
        })


    })
</script>
</body>
</html>

技能页：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="index.css">

    <style>
        .left {
            float: left;
            width: 43%;
            padding-left: 16px;
            margin-right: 0;
            border-right: 1px solid #F0F0F0;
        }

        .right {
            float: left;
            width: 50%;
            padding-top: 30px;
            padding-left: 40px;
        }

        .defail {
            float: left;
            width: 100%;
            padding-top: 30px;
            padding-left: 40px;
        }

        .spell-desc {
            float: left;
            padding: 20px 0;
            line-height: 18px;
            color: #333;
            font-size: 14px;
            text-indent:3em;
            margin-top: 10px;
        }
        h4{
            padding: 10px 0;
        }


    </style>
    <script src="../js/jquery-1.11.3.js"></script>
</head>
<body>
<div class="content">
    <div class="left">
        <ul class="herolist"></ul>
    </div>
    <div class="right">

    </div>
</div>
<script>
    $(function () {

        $.getJSON("../data/summoner.json", function (data) {
            let html = '';
            $(data).each(function (i, e) {
                html += `<li>
                            <img src="//game.gtimg.cn/images/yxzj/img201606/summoner/${e.summoner_id}.jpg">
                            <span>${e.summoner_name}</span>
                         </li>`

            });
            $('.herolist').html(html);
    })     

        $(".herolist").on('click','li',function () {

            let index = $(this).index();
                console.log(index);
                $.getJSON("../data/summoner.json", function (data) {
                    let html = '';
                    html = `<div class="defail">
                                <img src="//game.gtimg.cn/images/yxzj/img201606/summoner/${data[index].summoner_id}-big.jpg">
                                <h4>${data[index].summoner_name}</h4>
                                <p>${data[index].summoner_rank}</p>
                            </div>
                            <div class="spell-desc">${data[index].summoner_description}</div>`;
                    $('.right').html(html);
                })
        })
    })
</script>
</body>
</html>

CSS样式：

*{
    margin: 0;
    padding: 0;
}
.container{
    width: 1200px;
    margin: 0 auto;
}
.list{
    width: 100%;
    height: 30px;
    list-style: none;

}
.list li{
    width: 400px;
    height: 30px;
    border-bottom: #eeeeee 2px solid;
    float: left;
    line-height: 30px;
    text-align: center;

}
.list li a{
    text-decoration: none;
    color: black;
}

li.selected{
    color: deepskyblue;
    font-weight: 600;
    border-bottom: cornflowerblue 2px solid;
}
.list li:hover{
     border-bottom: cornflowerblue 2px solid;
 }


.btn-group{
    width: 100%;
    float: left;
    font-size: 18px;
    margin-left: 30px;
    height: 30px;
    margin-top: 20px;
}
.btn-group input{
    margin-left: 50px;
}

.search{
    float: right;
    margin-right: 80px;
    border: 1px solid #D2D2D2;
    padding: 6px 6px 8px 6px;
    width: 220px;
}
.search input{
    margin: 0 auto;
    width: 180px;
    height: 25px;
}
.search-icon {
    float: right;
    padding-left: 10px;
    width: 22px;
    height: 22px;
    border-left: 1px solid #D5D5D5;
    margin-top: 3px;
    background: url(vl_search_icon.png) no-repeat 12px center;
    cursor: pointer;
}

.content{
    width: 100%;
    overflow: hidden;
}
.herolist{
    float: left;
    margin-top: 50px;
    list-style: none;
    margin-left: 20px;
    text-align: center;

}
.herolist li{
    float: left;
    width: 87px;
    margin-bottom: 34px;
    margin-right: 30px;
}
.herolist li img{
    width: 83px;
    height: 83px;
    border: 2px solid #258DF2;
    border-radius: 10px 0 10px 0;
}
拾光御行
关注
  • 7
    点赞
  • 踩
  • 18
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
html网页设计项目实战--高仿版王者荣耀官网源码
weixin_56334307的博客
04-04 528
在设计过程中，我深入研究了王者荣耀官网的布局、色彩搭配以及交互元素，力求在模仿的同时保留其精髓。同时，我也加入了一些自己的创新元素，如动态背景、交互式的导航栏等，使得整个网站更加生动和有趣。未来，我计划进一步优化这个模仿官网的性能和用户体验，添加更多的交互功能和动态效果。同时，我也希望能够借此机会不断提升自己的前端开发技能，为更多的用户提供更加优质的网络体验。随着王者荣耀这款游戏在全球范围内的迅速流行，其精美的官网设计也受到了广大玩家的喜爱。这个源码里面包含了CSS样式表！废话不多说，直接上源码！
王者荣耀英雄分析.html
04-05
主要是统计分析和关联性分析，查看王者荣耀69个英雄的各方面性能
用html制作王者荣耀的界面,《王者荣耀》操作设置详解
weixin_34034295的博客
06-07 2255
《王者荣耀》操作设置详解近期手游平台有一款名为《王者荣耀》，其优质的MOBA体验让无数玩家爱不释手，而其中的操作模式更值得玩家去深究。究竟这款游戏的操作设置有何作用，玩家又该如何利用好操作模式，就一起来看看吧。操作模式设置在游戏界面，点击右上可以进入角齿轮按钮，就能进入操作模式设置。在操作设置中主要分为四大部分，分别是施法方式选择、攻击方式选择、左摇杆跟随移动以及普通攻击模式选择。还能通过右边的辅...
jQuery实现王者荣耀英雄列表
M_emory_的博客
10-18 1426
jQuery实现王者荣耀英雄列表 实现本地存储
大学生HTML期末大作业——HTML+CSS+JavaScript旅游网站
最新发布
...
06-22 1688
HTML+CSS+JS【旅游网站】网页设计期末课程大作业 web前端开发技术 web课程设计 网页规划与设计
html 做王者荣耀
weixin_67782151的博客
05-23 2782
相信大家都玩过王者荣耀吧，那么王者荣耀在html中要怎么实现呢？ 话不多说，上代码 <!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-C...
web前端-html网页案例-王者荣耀
互联网知识分享
04-02 300
代码文件比较多，这里不好粘贴。需要的话可以在下放评论或私信我，会发给你的。
web前端-王者荣耀官网
m0_61214373的博客
08-12 5452
王者荣耀官网
王者荣耀官方网站静态页面css+html
07-26
王者荣耀官方网站静态页面css+html
HTML5期末考核大作业 简单的学生网页作业源码 基于html css javascript仿王者荣耀首页 游戏网站开发 游戏官网设计与实现
HTML网页设计 专注大学生网页设计
09-06 1881
🎮游戏官网、⛹️游戏网站、🕹️电竞游戏、🎴游戏介绍、等网站的设计与制作。⭐ 网页中包含：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频音频元素，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。 🎁更多干货 1.如果我的博客对你有帮助、如果你喜欢我的博客内容，一键三连哦！2.带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端...
HTML+CSS王者荣耀静态网页.zip
04-07
一个模仿王者荣耀官网的静态网页，下载完直接浏览器运行即可，无需修改。
王者荣耀官网web端代码
10-23
网站是pc版本的，web官网，前端代码
王者荣耀静态网站
05-31
自己做的一个王者荣耀网站
仿王者荣耀官网(HTML+CSS).rar
02-03
实训的项目,用了HTML+CSS做的,适合学校要求
王者荣耀模型提取工具Unity.Studio.x64.v0.7.0
10-07
王者荣耀模型提取工具王者荣耀模型提取工具王者荣耀模型提取工具王者荣耀模型提取工具王者荣耀模型提取工具王者荣耀模型提取工具王者荣耀模型提取工具王者荣耀模型提取工具王者荣耀模型提取工具王者荣耀模型提取工具王者荣耀模型提取工具王者荣耀模型提取工具王者荣耀模型提取工具王者荣耀模型提取工具王者荣耀模型提取工具王者荣耀模型提取工具王者荣耀模型提取工具王者荣耀模型提取工具王者荣耀模型提取工具王者荣耀模型提取工具
王者荣耀官网页面源码.zip
01-21
王者荣耀官网页面源码
王者荣耀网站源码111
06-06
（html+css）静态网页
web前端期末大作业——HTML+CSS+JavaScript仿王者荣耀游戏网站设计与制作
weixin__BJ050106的博客
01-05 787
🎮游戏官网、⛹️游戏网站、🕹️电竞游戏、🎴游戏介绍、等网站的设计与制作。⭐ 网页中包含：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频音频元素，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。🏅 一套A+的网页应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保
王者荣耀前端模仿
weixin_44047927的博客
10-21 4376
作品初衷 因为想着要写答辩，网页这东西展现的会更直观一点，刚好也复习一下自己基础我牢固的前端知识，也想着提升一下自己前端网页排版能力和逻辑能力 作品简介 编辑器：sublime 语言：html+css+js 代码量：6000行 编辑时长：30天 基本结构 主页面 主页面应该是框架结构最完善的，因为这个页面是最开始写的，也因为布局的原因修改过很多次。因为页面元素多，比较复杂，所以到后边就难免会造成布...
html版王者荣耀下载
06-28
### 回答1： 王者荣耀是一款备受欢迎的团队竞技手机游戏，许多玩家都非常热爱这个游戏。针对一些特殊情况，比如无法在手机上下载游戏等情况，一些玩家可能会想要在电脑上下载html版的王者荣耀。 首先，需要注意的是，目前并没有官方推出的html版王者荣耀，因此如果你在网上看到某个网站声称可以直接下载html版的王者荣耀，应该保持警惕。 但是，如果你非常想在电脑上玩王者荣耀，其实也有一些替代方式可以尝试。比如，可以通过安装安卓模拟器来在电脑上玩安卓版的王者荣耀。目前市场上较为流行的安卓模拟器有很多，比如夜神模拟器、雷电模拟器、BlueStacks等等，这些软件都可以在电脑上模拟安卓系统，并且可以通过谷歌商店或者其他下载渠道下载安卓版的王者荣耀。 此外，也有一些热心的玩家或者非官方网站制作了一些类似html版的玩法，比如可以在网页上模拟王者荣耀的游戏界面，并且通过鼠标和键盘来操作英雄移动、释放技能等操作。这些方式虽然不是真正的html版，但是在一定程度上可以满足玩家在电脑上的游戏需求。 总之，想要在电脑上玩王者荣耀，最好的方式还是通过安装安卓模拟器来实现。不过一定要选择正规渠道下载模拟器软件，并且注意安装过程中不要安装一些危险的软件，保证电脑的安全。 ### 回答2： 王者荣耀是一款非常火爆的手机游戏，无论是在国内还是在海外，它都具有极高的人气。现在很多人想在电脑上玩王者荣耀，但是很多人不知道怎样实现。下面介绍一种通过HTML方式下载王者荣耀的方法。 首先，需要在电脑上找一个安卓模拟器，比如蓝叠模拟器。然后，在浏览器中输入“王者荣耀HTML下载”，会出现多个下载链接。选择比较稳定的一个下载链接，点击下载按钮即可。因为是HTML下载，所以下载速度要比其他方式慢一些，需要耐心等待。 下载完成之后，通过安卓模拟器进行安装即可。需要注意的是，建议使用官方下载的版本，因为安全性较高，并且升级也比较便捷。 安装完成后，就可以在电脑上尽情玩王者荣耀了。需要注意的是，运行王者荣耀可能会比手机略卡一些，但是只要电脑配置够高，应该不会影响游戏体验。 总而言之，通过HTML方式下载王者荣耀需要一定的耐心和时间，但是只要按照方法操作，就可以在电脑上畅玩这款游戏了。同时，也需要注意游戏的合法性，避免下载盗版游戏。 ### 回答3： html版王者荣耀是指王者荣耀的网页版，可以通过网页直接进行游戏，不需要安装客户端。目前，国内许多大型网络游戏都推出了网页版，html版王者荣耀也不例外。 首先，玩家需要在浏览器中输入html版王者荣耀的游戏地址。在页面上进行游戏之前需要进行账号注册和登录。游戏页面与王者荣耀移动端版本类似，具有相似的玩法和游戏模式。玩家可以选择一对一对抗、五人排位赛、三人组队或其他游戏模式。 然而，与客户端版本相比，html版王者荣耀在画质、音效等方面略显逊色。玩家的游戏体验也易受到浏览器的影响而受到一定的限制。相应的，由于对玩家的电脑要求较低，html版王者荣耀在弱网络条件下游戏表现更优。 总之，html版王者荣耀是一种值得一试的玩法，它不需要额外下载、安装客户端，同时可以在弱网络环境下玩耍。但是同时也需要注意，html版的画质和音效等方面需要做出妥协，且容易受到浏览器的限制。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值