<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
transition:0.5s;
}
.tabe{
width:1200px;
height:250px;
position: relative;
overflow: hidden;
}
.tabe>li>p{
color: white;
font-size: 20px;
writing-mode:tb-rl;
text-align: center;
line-height: 100px;
letter-spacing:5px;
}
.ren{
width: 1000px;
height: 100%;
position: absolute;
z-index: 1;
}
.ren>p{
width: 100px;
height: 100%;
background-color:#3B8BED;
position:relative;
}
.ren_ul{
width:888px;
height: 100%;
position: absolute;
top:0;
left: 100px;
overflow: hidden;
}
.ren_ul>li{
width:84px;
height: 100%;
/*border: 1px solid white;*/
float: right;
}
.ren_ul>li:nth-child(6){
width: 468px;
}
.mo{
width:888px;
height: 100%;
position: absolute;
z-index: 2;
left: 1000px;
}
.mo>p{
width: 100px;
height: 100%;
position:relative;
background-color:#347EDE;
}
.mo_ul{
width:888px;
height: 100%;
position: absolute;
top:0;
left: 100px;
overflow: hidden;
}
.mo_ul>li{
width:84px;
height: 100%;
/*border: 1px solid white;*/
float: right;
}
.mo_ul>li:nth-child(6){
width: 468px;
}
.xian{
width: 900px;
height: 100%;
position: absolute;
z-index: 3;
left: 1100px;
}
.xian>p{
width: 100px;
height: 100%;
position:relative;
background-color:#3B8BED;
}
.xian>ul{
width:888px;
height: 100%;
position: absolute;
left: 100px;
top:0;
}
.xian_ul{
width: 900px;
height: 100%;
position: absolute;
top:0;
left: 100px;
overflow: hidden;
}
.xian_ul>li{
width:84px;
height: 100%;
/*border: 1px solid white;*/
float: right;
}
.xian_ul>li:nth-child(6){
width: 468px;
z-index: 1;
}
.tabe .red{
transition: 0s;
background-color:#F24854;
}
.box1{
width:468px;
height: 100%;
float: right;
overflow: hidden;
}
.img_left{
height: 100%;
}
.img_right{
height: 120px;
filter: grayscale(90%);
}
.box1_1{
width: 213px;
height: 100%;
background-color:white;
position: absolute;
z-index:-1;
float:right;
}
.box1_2{
width: 84px;
height: 100%;
background-color:white;
float: right;
}
.top_p{
writing-mode:tb-rl;
font-size:17px;
font-weight: 500;
margin: 22px 30px;
letter-spacing:5px;
}
.zhomg{
width: 172px;
height: 100%;
float: right;
background-color:white;
}
.jianxiak{
width: 100%;
height: 60px;
line-height: 100px;
border-right: 1px solid rgba(0,0,0,0.3);
margin-top: 20px;
}
.zhomg>p{
font-size: 13px;
font-weight: 500;
}
.ren_ul .img_left:nth-child(6){
filter: grayscale(50%);
}
</style>
</head>
<body>
<ul class="tabe">
<li class="ren">
<p class="red">人族</p>
<ul class="ren_ul">
</ul>
</li>
<li class="mo">
<p>魔族</p>
<ul class="mo_ul">
</ul>
</li>
<li class="xian">
<p>仙族</p>
<ul class="xian_ul">
</ul>
</li>
</ul>
<script>
function ajax(method, url, data) {
var xhr = null;
if (XMLHttpRequest) {
xhr = new XMLHttpRequest()
} else {
xhr = new ActiveXObject("Microsoft.XMLHTTP")
}
if (method == "get") {
xhr.open(method, url + "?" + data, true);
xhr.send();
} else {
xhr.open(method, url, true);
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
xhr.send(data);
}
return new Promise((sucee, fail)=> {
xhr.onreadystatechange = ()=> {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
sucee(xhr.responseText)
} else {
fail(xhr.status)
}
}
}
})
}
</script>
<script>
var detilData = ajax('post', 'josn/json4.js', '');
var Ren = document.getElementsByClassName("ren_ul")[0];
var Mo = document.getElementsByClassName("mo_ul")[0]
var Xian = document.getElementsByClassName("xian_ul")[0]
detilData.then(function (data) {
var Data = JSON.parse(data.split("=")[1])
for (i in Data[0].renzhu) {
var oLi1 = document.createElement("li");
oLi1.className="ren_li"
oLi1.innerHTML = ` <ul class="box1">
<li class="box1_2" align="center" >
<p class="top_p">${Data[0].renzhu[i].name}</p>
<img src="img/aimg/${Data[0].renzhu[i].imgxiao}" alt="" class="img_right">
</li>
<li class="zhomg">
<h4 class="jianxiak">
${Data[0].renzhu[i].name2}
</h4>
<br>
<h4>可入门派 </h4>
<p> ${Data[0].renzhu[i].school} </p>
</li>
<li class="box1_1">
<div class="bordy_b"></div>
<img src="img/aimg/${Data[0].renzhu[i].imgda}" alt="" class="img_left">
<div class=""></div>
</li>
</ul>`
Ren.insertBefore(oLi1,Ren.firstChild)
}
for (i in Data[0].mozhu) {
var oLi2 = document.createElement("li");
oLi2.className="mo_li"
oLi2.innerHTML = ` <ul class="box1">
<li class="box1_2" align="center" >
<p class="top_p">${Data[0].mozhu[i].name}</p>
<img src="img/aimg/${Data[0].mozhu[i].imgxiao}" alt="" class="img_right">
</li>
<li class="zhomg">
<h4 class="jianxiak">
${Data[0].mozhu[i].name2}
</h4>
<br>
<h4>可入门派 </h4>
<p> ${Data[0].mozhu[i].school} </p>
</li>
<li class="box1_1">
<div class="bordy_b"></div>
<img src="img/aimg/${Data[0].mozhu[i].imgda}" alt="" class="img_left">
<div class=""></div>
</li>
</ul>`
Mo.insertBefore(oLi2,Mo.firstChild)
}
for (i in Data[0].xianzhu) {
var oLi3 = document.createElement("li");
oLi3.className="xian_li"
oLi3.innerHTML = ` <ul class="box1">
<li class="box1_2" align="center" >
<p class="top_p">${Data[0].xianzhu[i].name}</p>
<img src="img/aimg/${Data[0].xianzhu[i].imgxiao}" alt="" class="img_right">
</li>
<li class="zhomg">
<h4 class="jianxiak">
${Data[0].xianzhu[i].name2}
</h4>
<br>
<h4>可入门派 </h4>
<p> ${Data[0].xianzhu[i].school} </p>
</li>
<li class="box1_1">
<div class="bordy_b"></div>
<img src="img/aimg/${Data[0].xianzhu[i].imgda}" alt="" class="img_left">
<div class=""></div>
</li>
</ul>`
Xian.insertBefore(oLi3,Xian.firstChild)
}
})
</script>
<script>
$(function () {
$(".ren_ul").stop().on("mouseover",".ren_li",function () {
$(this).stop().animate({
width: "468px",
},50)
$(this).siblings().stop().animate({
width: "84px",
},50)
$(this).find(".img_right").css("filter","grayscale(0)")
$(this).siblings().find(".img_right").css("filter","grayscale(100%)")
})
$(".mo_ul").stop().on("mouseover",".mo_li",function () {
$(this).stop().animate({
width: "468px",
},50)
$(this).siblings().stop().animate({
width: "84px",
},50)
$(this).find(".img_right").css("filter","grayscale(0)")
$(this).siblings().find(".img_right").css("filter","grayscale(100%)")
})
$(".xian_ul").stop().on("mouseover",".xian_li",function () {
$(this).stop().animate({
width: "468px",
},50)
$(this).siblings().stop().animate({
width: "84px",
},50)
$(this).find(".img_right").css("filter","grayscale(0)")
$(this).siblings().find(".img_right").css("filter","grayscale(100%)")
})
})
</script>
<script>
var tabe = document.getElementsByClassName("tabe")[0]
var tabeli = document.getElementsByClassName("tabe")[0].getElementsByTagName("li")
var ren = document.getElementsByClassName("ren")[0]
var renp = document.getElementsByClassName("ren")[0].getElementsByTagName("p")[0]
var mo =document.getElementsByClassName("mo")[0]
var mop =document.getElementsByClassName("mo")[0].getElementsByTagName("p")[0]
var xian = document.getElementsByClassName("xian")[0]
var xianp = document.getElementsByClassName("xian")[0].getElementsByTagName("p")[0]
renp.οnclick=function(){
mo.style.left = 1000+"px"
xian.style.left = 1100+"px"
renp.className ="red"
mop.className =""
xianp.className =""
}
mop.onclick = function () {
if (parseInt(mo.style.left)==100){
xian.style.left = 1100+"px"
}else {
mo.style.left = 100+"px"
}
renp.className =""
mop.className ="red"
xianp.className =""
}
xianp.onclick = function () {
if (parseInt(xian.style.left)==200){
xian.style.left = 1100+"px"
}else {
xian.style.left = 200+"px"
mo.style.left = 100+"px"
}
renp.className =""
mop.className =""
xianp.className ="red"
}
</script>
</body>
</html>
var josn = [{
"renzhu": [
{
"name":"剑侠客",
"name2":"剑侠客 · 人族",
"school":"大唐官府、方寸山、化生寺、神木林、天机城 ",
"imgxiao":"r1.png",
"imgda":"role_01.png",
"id":1
},
{
"name":"逍遥生",
"name2":"逍遥生 · 人族",
"school":"大唐官府、方寸山、化生寺、神木林、天机城",
"imgxiao":"r2.png",
"imgda":"role_02.png",
"id":2
},
{
"name":"飞燕女",
"name2":"飞燕女 · 人族",
"school":"大唐官府、方寸山、化生寺、神木林、天机城 ",
"imgxiao":"r3.png",
"imgda":"role_03.png",
"id":3
},
{
"name":"英女侠",
"name2":"英女侠 · 人族",
"school":"大唐官府、方寸山、化生寺、神木林、天机城 ",
"imgxiao":"r4.png",
"imgda":"role_04.png",
"id":4
},
{
"name":"巫蛮儿",
"name2":"巫蛮儿 · 人族",
"school":"大唐官府、方寸山、化生寺、神木林、天机城 ",
"imgxiao":"r5.png",
"imgda":"role_05.png",
"id":5
},
{
"name":"偃无师",
"name2":"偃无师 · 人族",
"school":"大唐官府、方寸山、化生寺、神木林、天机城 ",
"imgxiao":"r6.png",
"imgda":"role_06.png",
"id":6
}
],
"mozhu":[{
"name":"骨精灵",
"name2":"骨精灵 · 魔族",
"school":"魔王寨、阴曹地府、盘丝洞、无底洞、女魃墓",
"imgxiao":"mo_01.png",
"imgda":"role_001.png",
"id":7
},{
"name":"虎头怪",
"name2":"虎头怪 · 魔族",
"school":"魔王寨、阴曹地府、狮驼岭、无底洞、女魃墓 ",
"imgxiao":"mo_02.png",
"imgda":"role_002.png",
"id":8
},{
"name":"狐美人",
"name2":"狐美人 · 魔族",
"school":"魔王寨、阴曹地府、盘丝洞、无底洞、女魃墓 ",
"imgxiao":"mo_03.png",
"imgda":"role_003.png",
"id":9
},{
"name":"巨魔王",
"name2":"巨魔王 · 魔族",
"school":"魔王寨、阴曹地府、狮驼岭、无底洞、女魃墓 ",
"imgxiao":"mo_04.png",
"imgda":"role_004.png",
"id":10
},{
"name":"杀破狼",
"name2":"杀破狼 · 魔族",
"school":"魔王寨、阴曹地府、盘丝洞、无底洞、女魃墓 ",
"imgxiao":"mo_05.png",
"imgda":"role_005.png",
"id":11
},{
"name":"鬼潇潇",
"name2":"鬼潇潇 · 魔族",
"school":"魔王寨、阴曹地府、盘丝洞、无底洞、女魃墓 ",
"imgxiao":"mo_06.png",
"imgda":"role_006.png",
"id":12
}],
"xianzhu":[{
"name":"龙太子",
"name2":"龙太子 · 仙族",
"school":"龙宫、五庄观、天宫、凌波城 ",
"imgxiao":"xian_01.png",
"imgda":"role_0001.png",
"id":13
},{
"name":"玄彩娥",
"name2":"玄彩娥 · 仙族",
"school":"龙宫、五庄观、天宫、凌波城 ",
"imgxiao":"xian_02.png",
"imgda":"role_0002.png",
"id":14
},{
"name":"神天兵",
"name2":"神天兵 · 仙族",
"school":"龙宫、五庄观、天宫、凌波城 ",
"imgxiao":"xian_03.png",
"imgda":"role_0003.png",
"id":15
},{
"name":"舞天姬",
"name2":"舞天姬 · 仙族",
"school":"龙宫、五庄观、天宫、凌波城 ",
"imgxiao":"xian_04.png",
"imgda":"role_0004.png",
"id":16
},{
"name":"羽灵神",
"name2":"羽灵神 · 仙族",
"school":"龙宫、五庄观、天宫、凌波城 ",
"imgxiao":"xian_05.png",
"imgda":"role_0005.png",
"id":17
},{
"name":"桃夭夭",
"name2":"桃夭夭 · 仙族",
"school":"龙宫、五庄观、天宫、凌波城 ",
"imgxiao":"xian_06.png",
"imgda":"role_0006.png",
"id":18
}]
}]
1797
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
