近期接的一个小任务，模仿WTO关于疫情数据展示图例，利用echarts完成各项需求，其中也有踩坑记录,首先展示一下阶段性图示如下：
基本实现的效果利用：
1.datazoom动态展示多数据量图表
2.x轴需要展示时间的同时绑定每天官方发布的措施和政策
3.点击坐标的措施和政策需要出现展示框，显示具体内容政策
就以上需求有一些小的心得记录一下。
首先附上一些参考的博文，都是综合各篇博文写出来的，最后代码附在最后
Echarts 的grid各个参数的含义，按需实现坐标轴宽度
一、坐标轴绑定自定义图标icon
解决代码如下：主要利用axislabel中的rich可自定义图标绑定，我的data类型为1Jan20-p-a(时间-措施标识-疾病标识),所以在x轴展示时还需判断返回数据应该正确显示的内容为怎样的
axisLabel:{
formatter: function (value) {
//判断是否要显示预警
if (value.indexOf("-p") != -1 && value.indexOf("-a") != -1) {
var index=value.split("\-");
return index[0] + '\n{measuresIcon|}{policyIcon|}';
} else if (value.indexOf("-p") != -1) {
return value.substring(0,value.lastIndexOf("\-")) + '\n{measuresIcon|}';
// return value.substring(0,value.indexOf("-p")) + '\n{measuresIcon|}';
} else if (value.indexOf("-a") != -1) {
return value.substring(0,value.lastIndexOf("\-")) + '\n{policyIcon|}';
// return value.substring(0,value.indexOf("-a")) + '\n{measuresIcon|}';
} else {
return value;
}
},
// margin: 10,
padding:5,
// rich 这里的用法特殊说明一下 rich 富文本样式 其中upIcon ， downIcon，zeroIcon 对应的是formatter中的变量 formatter 中使用特殊标签{upicon|} 定义变量 而在rich 中使用键值对 设置改变量对应的样式 上面通过自己的设置 stallsObj[value].icon 得到 upIcon 或者 downIcon 或者 zeroIcon
rich: {
// 配置底部x轴内容
measuresIcon: {
height: 15,
align: 'center',
backgroundColor: {
image: measuresIcon
},
},
policyIcon: {
height: 20,
align: 'center',
backgroundColor: {
image: policyIcon
}
}
},
// x轴字体颜色
textStyle: {
color: '#696B6E',
lineHeight: 20,
fontSize: 12,
interval:0
},
interval:0,
// rotate:40
},二、坐标轴绑定点击事件
解决如下：主要是绑定了x轴的点击事件可通过xAxis获取到x轴的所以内容，即可通过这个做后续展示框操作
myChart.on('click', function (params) {
console.log("点击参数",params)
if(params.componentType == "xAxis"){
if (params.value.indexOf("-p") != -1 && params.value.indexOf("-a") != -1) {
tips.date =params.value.substring(0,params.value.lastIndexOf("\-"));
// tips.date = params.value.substring(0,params.value.indexOf("measures") );
tips.title = ["措施","措施","疾病"];
tips.main = ["WHO launched its ‘Science in 5’ video and podcast series, featuring WHO experts giving explanations of the science on specific issues related to COVID-19, to help audiences protect themselves and...",
"Speaking at a Member State Briefing, the Director-General announced his plan to establish a Review Committee on the functioning of the IHR during...",
"WHO, in collaboration with UNICEF, published guidance on the use of masks for children in the community in the context of COVID-19."];
modalOpen(tips);
} else if (params.value.indexOf("-p") != -1) {
tips.date =params.value.substring(0,params.value.lastIndexOf("\-"));
// tips.date = params.value.substring(0,params.value.indexOf("measures"));
tips.title = ["措施"];
tips.main = ["措施11111WHO marked World Hepatitis Day, highlighting results from a modelling study conducted in collaboration with Imperial College London. " +
"The study looked at potential disruptions to the hepatitis B (HBV) vaccination programme due to the..."];
modalOpen(tips);
} else if (params.value.indexOf("-a") != -1) {
tips.date =params.value.substring(0,params.value.lastIndexOf("\-"));
// tips.date = params.value.substring(0,params.value.indexOf("policy"));
tips.title = ["疾病","疾病","疾病"];
tips.main = ["疾病11111WHO marked World Hepatitis Day, highlighting results from a modelling study conducted in collaboration with Imperial College London. " +
"The study looked at potential disruptions to the hepatitis B (HBV) vaccination programme due to the...",
"疾病22222WHO marked World Hepatitis Day, highlighting results from a modelling study conducted in collaboration with Imperial College London. " +
"The study looked at potential disruptions to the hepatitis B (HBV) vaccination programme due to the...",
"疾病33333WHO marked World Hepatitis Day, highlighting results from a modelling study conducted in collaboration with Imperial College London. " +
"The study looked at potential disruptions to the hepatitis B (HBV) vaccination programme due to the..."];
modalOpen(tips);
}
// alert("单击了"+params.value+"x轴标签");
// modalOpen();
}else{
alert("单击了"+params.name+"柱状图");
}
});原需求点击措施和疾病需要点击分别出现不同，但有一个问题至今未解决，就是同时出现时无法判断点击的到底是那个图标，如有好的思路欢迎讨论分享
三、datazoom，在坐标轴位置空间摆放，固定宽度展示条数，不允许扩展宽度，拉动不显示x轴内容
解决方法：主要按照需求设置参数即可
// 显示固定显示条数
function computedPosition(length,xArraylength) {
if(xArraylength>=10){
return length <= 10 ? this.end = 35 : this.end = (100 - Math.floor(35 / length * 100));
}else{
return 100;//小于十条数据显示全部
}
}
dataZoom: [
{
show: true,
textStyle:false, // 隐藏拖动两边显示的x轴内容
zoomOnMouseWheel: false, // 禁止拖拽扩展
moveOnMouseMove: false, // 禁止鼠标滑轮扩展
moveOnMouseWheel:false, // 禁止鼠标滑轮扩展
bottom: 0,
height:45,
minSpan:8,
start: 0,
// end: 20,
zoomLock:true, // 固定两边不允许拖动扩张
end: computedPosition(10,xArraylength)//xArraylength是x轴返回的数据的个数
},
{
type: 'inside',
zoomOnMouseWheel: false,
moveOnMouseMove: false,
moveOnMouseWheel:false,
start: 94,
end: 100
},
],
grid :{
y2:100, // 加长x轴宽度，让datazoom可以放在下方
},四、点击图标弹出模态框展示相应内容，多条数据利用轮播模式切换展示
解决如下：html设计，jq动态更改css样式，html动态赋值，js动态追加li内容，关闭弹框删除追加内容 等解决代码都有
<!-- 模态框-->
<div>
<!--添加模态框-->
<div class="modal-box">
<!--顶部-->
<div class="modal-box-top">
<div class="modal-box-title">
<span id="title"></span>
</div>
<!--关闭按钮 ×会被转义成乘号（×）看上去就是关闭符号-->
<!--关闭逻辑-->
<button onclick="modalClose()" class="modal-close" style="border: 0px white ">X
</button>
<!-- <button onclick="modalClose()" class="modal-close">×-->
<!-- </button>-->
</div>
<!--主体-->
<div class="modal-box-content">
<div class="banner" >
<div class="img-wrap">
<ul id="J_List">
</ul>
</div>
<div class="lr-tab">
<img src="images/left.png" class="zuo-btn">
<img src="images/right.png" class="you-btn">
</div>
</div>
</div>
<!--底部-->
<!-- <div class="modal-box-bottom">-->
<!-- <div class="col-xs-6">-->
<!-- <button class="btn btn-primary" id="addConfirm" onclick="modalClose()">确定</button>-->
<!-- </div>-->
<!-- <div class="col-xs-3">-->
<!-- <button class="btn btn-primary" data-dismiss="modal"-->
<!-- aria-hidden="true" onclick="modalClose()">取消</button>-->
<!-- </div>-->
<!-- </div>-->
</div>
</div>相应的js
// 模态框
var maxContents = 0;
var index2 = 0;/*初始化一个变量 指向下彪*/
//创建li标签，包含显示姓名，邮箱，电话号码及删除按钮
function addLi(contents,date){
var li_1=document.createElement("li");
li_1.setAttribute("class","item");
addSpan(li_1,date);
li_1.appendChild(document.createElement("br"));
addSpan(li_1,contents);
document.getElementById("J_List").appendChild(li_1);
}
//为姓名或邮箱等添加span标签，好设置样式
function addSpan(li,text){
var span_1=document.createElement("span");
span_1.innerHTML=text;
li.appendChild(span_1);
}
//显示模态框
function modalOpen(parmes) {
console.log("点击参数",parmes)
//获取模态框对象 getElementsByClassName获取到的是一个数组对象
let modal = document.getElementsByClassName("modal-box")[0];
//获取浏览器当前宽高
let documentWidth = window.innerWidth;
let documentHeight = window.innerHeight;
//获取模态框宽度
let modalWidth = modal.offsetWidth;
//模态框距离浏览器右侧的距离就是（浏览器宽度-模态框宽）/ 2.0
//注意，需要把结果转为字符串类型
modal.style.left = ((documentWidth - modalWidth) / 2.0).toString();
//设置为可见
$('#title').html(parmes.title[index2])
if (parmes.title[index2] == "疾病") {
$(".modal-box-top").css("background","peachpuff");
$(".modal-close").css("background","peachpuff");
} else {
$(".modal-box-top").css("background","cornflowerblue");
$(".modal-close").css("background","cornflowerblue");
}
// 轮播页数
maxContents = parmes.main.length - 1 ;
let pageBtn = document.getElementsByClassName("lr-tab")[0];
if (maxContents != 0) {
pageBtn.style.visibility = "visible";
}
// 循环追加轮播内容
for (var i = 0; i < parmes.main.length; i++) {
console.log("打印li",parmes.main[i])
addLi(parmes.main[i],parmes.date);
}
modal.style.visibility = "visible";
$(".item").eq(index2).fadeIn().siblings().fadeOut();
}
//模态框关闭
function modalClose() {
//获取模态框
let modal = document.getElementsByClassName("modal-box")[0];
let pageBtn = document.getElementsByClassName("lr-tab")[0];
pageBtn.style.visibility = "hidden";
index2 = 0;
// 删除追加子元素
var elements = document.getElementsByClassName('item');
for(var i = elements.length - 1; i >= 0; i--) {
elements[i].parentNode.removeChild(elements[i]);
}
//设置为不可见
modal.style.visibility = "hidden";
}
//点击切换效果
$(".lr-tab .you-btn").click(function () {
console.log("右轮播",tips.title[index2])
index2 ++;
if (index2 > maxContents){ index2 = 0;}
if (tips.title[index2] == "疾病") {
$(".modal-box-top").css("background","peachpuff");
$(".modal-close").css("background","peachpuff");
} else {
$(".modal-box-top").css("background","cornflowerblue");
$(".modal-close").css("background","cornflowerblue");
}
$('#title').html(tips.title[index2])
$(".item").eq(index2).fadeIn().siblings().fadeOut();
});
$(".lr-tab .zuo-btn").click(function () {
console.log("左轮播",tips.title[index2])
index2 --;
if(index2 < 0){index2 = maxContents;}
if (tips.title[index2] == "疾病") {
$(".modal-box-top").css("background","peachpuff");
$(".modal-close").css("background","peachpuff");
} else {
$(".modal-box-top").css("background","cornflowerblue");
$(".modal-close").css("background","cornflowerblue");
}
$('#title').html(tips.title[index2])
$(".item").eq(index2).fadeIn().siblings().fadeOut();
});
// var time2 = setInterval(function () {
// index2 ++;
// if (index2 > 3){ index2 = 0;}
// $(".item").eq(index2).fadeIn().siblings().fadeOut();
// $(".tab-btn .btn").eq(index2).addClass("active").siblings().removeClass("active");
//
// },4000); //定时器 重复
全部代码展示：
html
<body>
<div id="main">
<div id="legend">
<ul>
<li>
<div class="legend-box">
<img src="images/measures.png">
</div>
<span>措施</span>
</li>
<li>
<div class="legend-box">
<img src="images/policy.png">
</div>
<span>疾病</span>
</li>
</ul>
</div>
<div id="jiangsu" class="col-md-6 wow bounceIn" data-wow-delay="0.5s"
style="height:60vh;width: 100vw;left: -6vw">
</div>
<!-- 模态框-->
<div>
<!--添加模态框-->
<div class="modal-box">
<!--顶部-->
<div class="modal-box-top">
<div class="modal-box-title">
<span id="title"></span>
</div>
<!--关闭按钮 ×会被转义成乘号（×）看上去就是关闭符号-->
<!--关闭逻辑-->
<button onclick="modalClose()" class="modal-close" style="border: 0px white ">X
</button>
<!-- <button onclick="modalClose()" class="modal-close">×-->
<!-- </button>-->
</div>
<!--主体-->
<div class="modal-box-content">
<div class="banner" >
<div class="img-wrap">
<ul id="J_List">
</ul>
</div>
<div class="lr-tab">
<img src="images/left.png" class="zuo-btn">
<img src="images/right.png" class="you-btn">
</div>
</div>
</div>
<!--底部-->
<!-- <div class="modal-box-bottom">-->
<!-- <div class="col-xs-6">-->
<!-- <button class="btn btn-primary" id="addConfirm" onclick="modalClose()">确定</button>-->
<!-- </div>-->
<!-- <div class="col-xs-3">-->
<!-- <button class="btn btn-primary" data-dismiss="modal"-->
<!-- aria-hidden="true" onclick="modalClose()">取消</button>-->
<!-- </div>-->
<!-- </div>-->
</div>
</div>
</div>
</body>js代码：
<script>
var jiangsudata;
var time = ['2020-03-01','2020-03-02','2020-03-03','2020-03-04','2020-03-05','2020-03-06','2020-03-07'];
var measuresIcon = 'images/measures.png';
var policyIcon = 'images/policy.png';
var tips = {
date: "",
title: [],
main: [],
};
function computedPosition(length,xArraylength) {
if(xArraylength>=10){
return length <= 10 ? this.end = 35 : this.end = (100 - Math.floor(35 / length * 100));
}else{
return 100;//小于十条数据显示全部
}
}
function getjiangsudata() {
$.ajax({
type: 'POST',
url: 'api/data_entry/list',
success: function (rm) {
if (rm.code == 1) {
jiangsudata = rm.result.data;
var dom = document.getElementById("jiangsu");
var myChart = echarts.init(dom);
var xArraylength = jiangsudata.length;//获取返回数据的个数
option = {
color: ['#2F83E4', '#23CBFF', '#00E5C1', '#7DE0E6'],
legend: {
data: ['上海', '江苏', '浙江', '安徽'],
left: '40%'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
formatter: function (params, ticket, callback) {
var htmlStr = '';
for(var i=0;i<params.length;i++){
var param = params[i];
var xName = param.name;//x轴的名称
var seriesName = param.seriesName;//图例名称
var value = param.value;//y轴值
var color = param.color;//图例颜色
if(i===0){
// 截取时间返回
var index=xName.split("\-");
xName=index[0];
htmlStr += xName + '<br/>';//x轴的名称
}
htmlStr +='<div>';
//为了保证和原来的效果一样，这里自己实现了一个点的效果
htmlStr += '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:'+color+';"></span>';
// 文本颜色设置--2020-07-23(需要设置,请解注释下面一行)
//htmlStr += '<span style="color:'+color+'">';
//圆点后面显示的文本
htmlStr += seriesName + '：' + value + '人';
// 文本颜色设置--2020-07-23(需要设置,请解注释下面一行)
//htmlStr += '</span>';
htmlStr += '</div>';
}
return htmlStr;
}
},
dataZoom: [
{
show: true,
textStyle:false, // 隐藏拖动两边显示的x轴内容
zoomOnMouseWheel: false,
moveOnMouseMove: false,
moveOnMouseWheel:false,
bottom: 0,
height:45,
minSpan:8,
start: 0,
// end: 20,
zoomLock:true, // 固定两边不允许拖动扩张
end: computedPosition(10,xArraylength)//xArraylength是x轴返回的数据的个数
},
{
type: 'inside',
zoomOnMouseWheel: false,
moveOnMouseMove: false,
moveOnMouseWheel:false,
start: 94,
end: 100
},
],
grid :{
y2:100,
},
xAxis: {
type: 'category',
triggerEvent: true,
data: ['1Jan20-p-a','2Jan20','3Jan20-p','4Jan20','5Jan20-p-a','6Jan20','7Jan20','8Jan20-a','9Jan20','10Jan20-a','11Jan20','12Jan20-p-a','13Jan20','14Jan20','15Jan20-p',
'16Jan20','17Jan20-a','18Jan20','18Jan20-p-a','19Jan20','20Jan20','21Jan20-p','22Jan20','23Jan20-a','24Jan20','25Jan20-p-a','26Jan20','1Jan20-p-a','2Jan20','3Jan20-p','4Jan20','5Jan20-p-a','6Jan20','7Jan20','8Jan20-a','9Jan20','10Jan20-a','11Jan20','12Jan20-p-a','13Jan20','14Jan20','15Jan20-p',
'16Jan20','17Jan20-a','18Jan20','18Jan20-p-a','19Jan20','20Jan20','21Jan20-p','22Jan20','23Jan20-a','24Jan20','25Jan20-p-a','26Jan20'],
// data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisLabel:{
formatter: function (value) {
console.log("显示",value) // 这里的value 可以得到data写的变量名， 这样配置之前设置好的变量就可以根据具体情况设置名称
//判断是否要显示预警
if (value.indexOf("-p") != -1 && value.indexOf("-a") != -1) {
var index=value.split("\-");
return index[0] + '\n{measuresIcon|}{policyIcon|}';
} else if (value.indexOf("-p") != -1) {
return value.substring(0,value.lastIndexOf("\-")) + '\n{measuresIcon|}';
// return value.substring(0,value.indexOf("-p")) + '\n{measuresIcon|}';
} else if (value.indexOf("-a") != -1) {
return value.substring(0,value.lastIndexOf("\-")) + '\n{policyIcon|}';
// return value.substring(0,value.indexOf("-a")) + '\n{measuresIcon|}';
} else {
return value;
}
},
// margin: 10,
padding:5,
// rich 这里的用法特殊说明一下 rich 富文本样式 其中upIcon ， downIcon，zeroIcon 对应的是formatter中的变量 formatter 中使用特殊标签{upicon|} 定义变量 而在rich 中使用键值对 设置改变量对应的样式 上面通过自己的设置 stallsObj[value].icon 得到 upIcon 或者 downIcon 或者 zeroIcon
rich: {
// 配置底部x轴内容
measuresIcon: {
height: 15,
align: 'center',
backgroundColor: {
image: measuresIcon
},
},
policyIcon: {
height: 20,
align: 'center',
backgroundColor: {
image: policyIcon
}
}
},
// x轴字体颜色
textStyle: {
color: '#696B6E',
lineHeight: 20,
fontSize: 12,
interval:0
},
interval:0, // 强制显示每条x轴内容
// rotate:40
},
axisTick: false, // 坐标轴刻度隐藏
// x轴颜色
axisLine: {
lineStyle: {
color: '#CED1D6'
}
}
},
yAxis: {
type: 'value'
},
series: [
{
name: '上海',
stack: '确诊数量',
data: [120, 200, 150, 80, 70, 110, 130,120, 200, 150, 80, 70, 110, 130,120, 200, 150,
80, 70, 110, 130,120, 200, 150, 80, 70, 110, 130,120, 200, 150, 80, 70, 110, 130,120,
200, 150, 80, 70, 110, 130,120, 200, 150,
80, 70, 110, 130,120, 200, 150, 80, 70, 110, 130],
// data: this.number,
type: 'bar',
barWidth: 30, // 柱图宽度
barMaxWidth: 30, // 最大宽度
}, {
name: '江苏',
stack: '确诊数量',
data: [120, 200, 150, 80, 70, 110, 130,120, 200, 150, 80, 70, 110, 130,120, 200, 150,
80, 70, 110, 130,120, 200, 150, 80, 70, 110, 130,120, 200, 150, 80, 70, 110, 130,120,
200, 150, 80, 70, 110, 130,120, 200, 150,
80, 70, 110, 130,120, 200, 150, 80, 70, 110, 130],
// data: this.number,
type: 'bar',
barWidth: 30, // 柱图宽度
barMaxWidth: 30, // 最大宽度
},{
name: '浙江',
stack: '确诊数量',
data: [120, 200, 150, 80, 70, 110, 130,120, 200, 150, 80, 70, 110, 130,120, 200, 150,
80, 70, 110, 130,120, 200, 150, 80, 70, 110, 130,120, 200, 150, 80, 70, 110, 130,120,
200, 150, 80, 70, 110, 130,120, 200, 150,
80, 70, 110, 130,120, 200, 150, 80, 70, 110, 130],
// data: this.number,
type: 'bar',
barWidth: 30, // 柱图宽度
barMaxWidth: 30, // 最大宽度
},{
name: '安徽',
stack: '确诊数量',
data: [120, 200, 150, 80, 70, 110, 130,120, 200, 150, 80, 70, 110, 130,120, 200, 150,
80, 70, 110, 130,120, 200, 150, 80, 70, 110, 130,120, 200, 150, 80, 70, 110, 130,120,
200, 150, 80, 70, 110, 130,120, 200, 150,
80, 70, 110, 130,120, 200, 150, 80, 70, 110, 130],
// data: this.number,
type: 'bar',
barWidth: 30, // 柱图宽度
barMaxWidth: 30, // 最大宽度
}
]
}
if (option && typeof option === "object") {
myChart.setOption(option, true);
myChart.on('click', function (params) {
console.log("点击参数",params)
if(params.componentType == "xAxis"){
if (params.value.indexOf("-p") != -1 && params.value.indexOf("-a") != -1) {
tips.date =params.value.substring(0,params.value.lastIndexOf("\-"));
// tips.date = params.value.substring(0,params.value.indexOf("measures") );
tips.title = ["措施","措施","疾病"];
tips.main = ["WHO launched its ‘Science in 5’ video and podcast series, featuring WHO experts giving explanations of the science on specific issues related to COVID-19, to help audiences protect themselves and...",
"Speaking at a Member State Briefing, the Director-General announced his plan to establish a Review Committee on the functioning of the IHR during...",
"WHO, in collaboration with UNICEF, published guidance on the use of masks for children in the community in the context of COVID-19."];
modalOpen(tips);
} else if (params.value.indexOf("-p") != -1) {
tips.date =params.value.substring(0,params.value.lastIndexOf("\-"));
// tips.date = params.value.substring(0,params.value.indexOf("measures"));
tips.title = ["措施"];
tips.main = ["措施11111WHO marked World Hepatitis Day, highlighting results from a modelling study conducted in collaboration with Imperial College London. " +
"The study looked at potential disruptions to the hepatitis B (HBV) vaccination programme due to the..."];
modalOpen(tips);
} else if (params.value.indexOf("-a") != -1) {
tips.date =params.value.substring(0,params.value.lastIndexOf("\-"));
// tips.date = params.value.substring(0,params.value.indexOf("policy"));
tips.title = ["疾病","疾病","疾病"];
tips.main = ["疾病11111WHO marked World Hepatitis Day, highlighting results from a modelling study conducted in collaboration with Imperial College London. " +
"The study looked at potential disruptions to the hepatitis B (HBV) vaccination programme due to the...",
"疾病22222WHO marked World Hepatitis Day, highlighting results from a modelling study conducted in collaboration with Imperial College London. " +
"The study looked at potential disruptions to the hepatitis B (HBV) vaccination programme due to the...",
"疾病33333WHO marked World Hepatitis Day, highlighting results from a modelling study conducted in collaboration with Imperial College London. " +
"The study looked at potential disruptions to the hepatitis B (HBV) vaccination programme due to the..."];
modalOpen(tips);
}
// alert("单击了"+params.value+"x轴标签");
// modalOpen();
}else{
alert("单击了"+params.name+"柱状图");
}
});
}
}
}
});
}
$(document).ready(function () {
getjiangsudata()
});
// 模态框
var maxContents = 0;
var index2 = 0;/*初始化一个变量 指向下彪*/
//创建li标签，包含显示姓名，邮箱，电话号码及删除按钮
function addLi(contents,date){
var li_1=document.createElement("li");
li_1.setAttribute("class","item");
addSpan(li_1,date);
li_1.appendChild(document.createElement("br"));
addSpan(li_1,contents);
document.getElementById("J_List").appendChild(li_1);
}
//为姓名或邮箱等添加span标签，好设置样式
function addSpan(li,text){
var span_1=document.createElement("span");
span_1.innerHTML=text;
li.appendChild(span_1);
}
//显示模态框
function modalOpen(parmes) {
console.log("点击参数",parmes)
//获取模态框对象 getElementsByClassName获取到的是一个数组对象
let modal = document.getElementsByClassName("modal-box")[0];
//获取浏览器当前宽高
let documentWidth = window.innerWidth;
let documentHeight = window.innerHeight;
//获取模态框宽度
let modalWidth = modal.offsetWidth;
//模态框距离浏览器右侧的距离就是（浏览器宽度-模态框宽）/ 2.0
//注意，需要把结果转为字符串类型
modal.style.left = ((documentWidth - modalWidth) / 2.0).toString();
//设置为可见
$('#title').html(parmes.title[index2])
if (parmes.title[index2] == "疾病") {
$(".modal-box-top").css("background","peachpuff");
$(".modal-close").css("background","peachpuff");
} else {
$(".modal-box-top").css("background","cornflowerblue");
$(".modal-close").css("background","cornflowerblue");
}
// 轮播页数
maxContents = parmes.main.length - 1 ;
let pageBtn = document.getElementsByClassName("lr-tab")[0];
if (maxContents != 0) {
pageBtn.style.visibility = "visible";
}
// 循环追加轮播内容
for (var i = 0; i < parmes.main.length; i++) {
console.log("打印li",parmes.main[i])
addLi(parmes.main[i],parmes.date);
}
modal.style.visibility = "visible";
$(".item").eq(index2).fadeIn().siblings().fadeOut();
}
//模态框关闭
function modalClose() {
//获取模态框
let modal = document.getElementsByClassName("modal-box")[0];
let pageBtn = document.getElementsByClassName("lr-tab")[0];
pageBtn.style.visibility = "hidden";
index2 = 0;
// 删除追加子元素
var elements = document.getElementsByClassName('item');
for(var i = elements.length - 1; i >= 0; i--) {
elements[i].parentNode.removeChild(elements[i]);
}
//设置为不可见
modal.style.visibility = "hidden";
}
//点击切换效果
$(".lr-tab .you-btn").click(function () {
console.log("右轮播",tips.title[index2])
index2 ++;
if (index2 > maxContents){ index2 = 0;}
if (tips.title[index2] == "疾病") {
$(".modal-box-top").css("background","peachpuff");
$(".modal-close").css("background","peachpuff");
} else {
$(".modal-box-top").css("background","cornflowerblue");
$(".modal-close").css("background","cornflowerblue");
}
$('#title').html(tips.title[index2])
$(".item").eq(index2).fadeIn().siblings().fadeOut();
});
$(".lr-tab .zuo-btn").click(function () {
console.log("左轮播",tips.title[index2])
index2 --;
if(index2 < 0){index2 = maxContents;}
if (tips.title[index2] == "疾病") {
$(".modal-box-top").css("background","peachpuff");
$(".modal-close").css("background","peachpuff");
} else {
$(".modal-box-top").css("background","cornflowerblue");
$(".modal-close").css("background","cornflowerblue");
}
$('#title').html(tips.title[index2])
$(".item").eq(index2).fadeIn().siblings().fadeOut();
});
// var time2 = setInterval(function () {
// index2 ++;
// if (index2 > 3){ index2 = 0;}
// $(".item").eq(index2).fadeIn().siblings().fadeOut();
// $(".tab-btn .btn").eq(index2).addClass("active").siblings().removeClass("active");
//
// },4000); //定时器 重复
</script>css代码
/*模态框标题*/
.modal-box-title {
/*使用浮动此属性可写可不写 浮动元素都会变成块元素*/
display: block;
text-align: center;
font-size: 1.6rem;
/*右浮动*/
float: left;
}
/*关闭按钮*/
.modal-close {
/*绝对定位，相对于 static 定位以外的第一个父元素进行定位*/
position: absolute;
/*定位在顶部的右侧*/
top: 0;
right: 0;
height: 100%;
width: 2.5rem;
font-size: 1.5rem;
background-color: white;
color: #a5a5a5;
/*outline: none;*/
}
/*模态框*/
.modal-box {
/*绝顶定位 相对于当前浏览器*/
position: fixed;
width: 48rem;
/*设置为白色背景 前期可以设置为其他颜色 方便观看*/
background-color: white;
border: 1px black solid;
/*top: 0;*/
left: 54rem;
margin-top: 8rem;
border-radius: 7px;
/*解决高度塌陷的问题*/
overflow: hidden;
/*z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面*/
/*比如在fixed定位中，z-index100大小的会覆盖在50大小的上面*/
z-index: 111;
/*用display的话没有物理宽高 便于js控制*/
/*visibility: hidden;先不要加 否则浏览器不会显示出来，*/
visibility: hidden;
}
/*小的模态框*/
.modal-min {
width: 15rem;
}
/*大的模态框*/
.modal-max {
width: 40rem;
}
/*模态框顶部*/
.modal-box-top {
/*相对于之前自己的位置定位，这个设置不会影响元素的位置，会影响子元素使用absolute定位 先不管*/
position: relative;
/*宽度随父div*/
width: 100%;
height: 3rem;
/*边框线放在下面*/
border-bottom: 1px solid #cccccc;
padding: 0.5rem;
/*使用此属性后 元素宽高固定，边距大小会从原大小中减去，也就是设置边距后元素宽高不表*/
box-sizing: border-box;
overflow: hidden;
}
/*模态框主体*/
.modal-box-content {
width: 100%;
height: 30rem;
padding: 0.5rem;
box-sizing: border-box;
overflow: hidden;
}
/*模态框底部*/
.modal-box-bottom {
width: 100%;
height: 6rem;
border-top: 1px solid #cccccc;
padding: 0.5rem;
overflow: hidden;
box-sizing: border-box;
}
#legend{
position: relative;
width: 100%;
float: left;
margin-left: 102rem;
margin-top: 1rem;
margin-bottom: -3rem;
}
#legend ul{
list-style-type: none;/*清除默认列表样式 ....*/
margin: 0;
padding: 0;/*内外编剧清除*/
}
#legend ul li{
float: left;
margin: 2px 10px 2px 10px;
/*position: absolute;!* 绝对定位*!*/
top: 0;
left: 0;
}
#legend ul li span{
margin-left: 5px;
}
.legend-box{
width:2rem;
height:2rem;
cursor: pointer;
border-radius: 17%;
float: left;
}
.banner{
position: relative;/*相对定位 给绝对定位位置参考*/
width: 100%;
height: 300px;
float: left;
}
.banner .item{
display: none;/*隐藏元素*/
position: absolute;/* 绝对定位*/
width: 100%;
height: 300px;
top: 0;
left: 0;
}
ul{
list-style-type: none;/*清除默认列表样式 ....*/
margin: 0;
padding: 0;/*内外编剧清除*/
}
.lunbo{
width: 100%;
height: 300px;
}
/*左右按钮的属性设置*/
.lr-tab{
display: block;
}
.lr-tab .zuo-btn{
left: 0;
width: 30px;
height: 50px;
}
.lr-tab img{
position: absolute;
top: 120px;
opacity: 0.5;
cursor: pointer;
}
.lr-tab .you-btn{
right: 0;
width: 30px;
height: 50px;
}
/*圆形按钮属性设定*/
.tab-btn{
position: absolute;
right: 40px;
bottom: 20px;
width: 120px;
height: 30px;
top: 270px;
}
.tab-btn .btn{
float: left;
width: 6px;
height: 6px;
background: #868686;
border: 2px solid #c3c3c3;/*边框*/
margin-left: 10px;
border-radius: 50%;
}
/*圆形按钮触碰事件*/
.tab-btn .btn:hover{
background: #e4e4e4;
border-color:#7f7f7f;
}
.tab-btn .active{
background: #e4e4e4;
border-color:#7f7f7f;
}
扫一扫
3233
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
