Browse Source

世界遗产

master
Email 3 years ago
commit
aaa94c8d13
98 changed files with 7836 additions and 0 deletions
  1. 447
      areaList.html
  2. 253
      css/areaList.css
  3. 18
      css/base.css
  4. 0
      css/common.css
  5. 47
      css/index.css
  6. 98
      css/save.css
  7. 260
      css/share.css
  8. BIN
      img/areaBgm.png
  9. BIN
      img/begin.png
  10. BIN
      img/bwg/55处世界遗产尺寸已处理(104X42)-@2x.zip
  11. BIN
      img/bwg/anhui_1_1.png
  12. BIN
      img/bwg/anhui_2_1.png
  13. BIN
      img/bwg/aomen_1_1.png
  14. BIN
      img/bwg/beijing_1_1.png
  15. BIN
      img/bwg/beijing_2_1.png
  16. BIN
      img/bwg/beijing_3_1.png
  17. BIN
      img/bwg/beijing_4_1.png
  18. BIN
      img/bwg/beijing_5_1.png
  19. BIN
      img/bwg/beijing_6_1.png
  20. BIN
      img/bwg/chongqing_1_1.png
  21. BIN
      img/bwg/fujian_1_1.png
  22. BIN
      img/bwg/fujian_2_1.png
  23. BIN
      img/bwg/fujian_3_1.png
  24. BIN
      img/bwg/gansu_1_1.png
  25. BIN
      img/bwg/gansu_2_1.png
  26. BIN
      img/bwg/guangdong_1_1.png
  27. BIN
      img/bwg/guangxi_1_1.png
  28. BIN
      img/bwg/guizhou_1_1.png
  29. BIN
      img/bwg/hebei_1_1.png
  30. BIN
      img/bwg/henan_1_1.png
  31. BIN
      img/bwg/henan_2_1.png
  32. BIN
      img/bwg/henan_3_1.png
  33. BIN
      img/bwg/hubei_1_1.png
  34. BIN
      img/bwg/hubei_2_1.png
  35. BIN
      img/bwg/hunan_1_1.png
  36. BIN
      img/bwg/hunan_2_1.png
  37. BIN
      img/bwg/jiangsu_1_1.png
  38. BIN
      img/bwg/jiangsu_2_1.png
  39. BIN
      img/bwg/jiangxi_1_1.png
  40. BIN
      img/bwg/jiangxi_2_1.png
  41. BIN
      img/bwg/liaoning_1_1.png
  42. BIN
      img/bwg/neimenggu_1_1.png
  43. BIN
      img/bwg/qinghai_1_1.png
  44. BIN
      img/bwg/shandong_1_1.png
  45. BIN
      img/bwg/shandong_2_1.png
  46. BIN
      img/bwg/shanshanxi_1_1.png
  47. BIN
      img/bwg/shanshanxi_2_1.png
  48. BIN
      img/bwg/shanxi_1_1.png
  49. BIN
      img/bwg/shanxi_2_1.png
  50. BIN
      img/bwg/shanxi_3_1.png
  51. BIN
      img/bwg/sichuan_1_1.png
  52. BIN
      img/bwg/sichuan_2_1.png
  53. BIN
      img/bwg/sichuan_3_1.png
  54. BIN
      img/bwg/sichuan_4_1.png
  55. BIN
      img/bwg/sichuan_5_1.png
  56. BIN
      img/bwg/xinjiang_1_1.png
  57. BIN
      img/bwg/xizang_1_1.png
  58. BIN
      img/bwg/yunnan_1_1.png
  59. BIN
      img/bwg/yunnan_2_1.png
  60. BIN
      img/bwg/yunnan_3_1.png
  61. BIN
      img/bwg/yunnan_4_1.png
  62. BIN
      img/bwg/yunnan_5_1.png
  63. BIN
      img/bwg/zhejiang_1_1.png
  64. BIN
      img/bwg/zhejiang_2_1.png
  65. BIN
      img/bwg/zhejiang_3_1.png
  66. BIN
      img/close.png
  67. BIN
      img/icon1.png
  68. BIN
      img/indexBgm4.png
  69. BIN
      img/map.png
  70. BIN
      img/map1.png
  71. BIN
      img/saveBgm.png
  72. BIN
      img/select.png
  73. BIN
      img/share/avatar.png
  74. BIN
      img/share/bgm.png
  75. BIN
      img/share/bgm1.png
  76. BIN
      img/share/btnIcon.png
  77. BIN
      img/share/close.png
  78. BIN
      img/share/imgs.png
  79. BIN
      img/share/positionIcon.png
  80. BIN
      img/share/pyq.png
  81. BIN
      img/share/saveImg.png
  82. BIN
      img/share/shareImg3.png
  83. BIN
      img/share/shuax.png
  84. BIN
      img/share/titleIcon.png
  85. BIN
      img/share/weixin.png
  86. BIN
      img/unselected.png
  87. 46
      index.html
  88. 46
      js/common.js
  89. 4
      js/jquery-3.2.1.min.js
  90. 2
      js/jquery-3.4.1.min.js
  91. 2631
      js/jsMap-1.1.0.min - 副本.js
  92. 2636
      js/jsMap-1.1.0.min.js
  93. 408
      js/saveSvgAsPng.js
  94. 42
      js/share.js
  95. 496
      json/jibenxinxi.json
  96. 76
      save.html
  97. 142
      test.html
  98. 184
      worldShare.html

447
areaList.html

@ -0,0 +1,447 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>朱熹学堂—博物馆之旅</title>
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0">
<script src="js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/common.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="css/base.css" />
<link rel="stylesheet" type="text/css" href="css/areaList.css" />
<script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js" type="text/javascript" charset="utf-8"></script>
<script src="http://h5.qishichuangke.cn/html5/resources/js/zxxt/wx-config.js?vs=1.1.14" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="wrap">
<div class="box_cont">
<div class="leftList">
<ul>
</ul>
</div>
<div class="rightCont">
<div class="title">
<img src="img/icon1.png" />博物馆
</div>
<div class="imgList">
<ul class="museumImg">
</ul>
</div>
<div class="chooseList">
<p><img src="img/unselected.png" />已选</p>
<ul class="chooseName">
</ul>
</div>
</div>
</div>
<div class="deepBtn">提交</div>
</div>
<div class="tips">
请选择博物馆
</div>
</body>
</html>
<script src="json/jibenxinxi.json"></script>
<script type="text/javascript">
$('.wrap').css('height', $(window).height());
$(function() {
list();
})
getJssdk();
wx.ready(function() {
getReady(); //执行接口
})
var cseArr = [];
var chooseArr = [];
function list() {
var datalist = [];
var areaList = '';
var selectArr = [];
let idList = [];
$.getJSON("json/jibenxinxi.json", function(data) {
var ulList = '';
//左侧
datalist = data;
$.each(data, function(i, item) {
if(i == 0) {
areaList += '<li class="active" leftid=' + item.id + ' data-name=' + item.pinyin + ' data-cityname=' + item.name + '><span class="name">' + item.name + '</span><span class="num">(0)</span></li>'
} else {
areaList += '<li class="" leftId=' + item.id + ' data-name=' + item.pinyin + '><span class="name">' + item.name + '</span><span class="num">(0)</span></li>'
}
ulList += '<ul class="museumImg">'
$.each(item.bowuguan, function(index, val) {
ulList += '<li class="" rightid=' + val.id + '></li>'
})
ulList += '</ul>'
$('.imgList').html(ulList);
})
var bList = data[0].bowuguan;
var rightCont = '';
$.each(bList, function(i, item) {
if(idList.indexOf(item.id) == -1) {
rightCont += '<li class="" rightid=' + item.id + '><div class="item "><p class="contImg"><img src="' + item.photo + '" /></p><p class="icon"><img src="img/select.png" /></p></div><p class="name">' + item.name + '</p></li>'
} else {
rightCont += '<li class="active" rightid=' + item.id + '><div class="item "><p class="contImg"><img src="' + item.photo + '" /></p><p class="icon"><img src="img/select.png" /></p></div><p class="name">' + item.name + '</p></li>'
}
})
$('.museumImg').eq(0).html(rightCont);
$('.museumImg').eq(0).css('display', 'flex');
$('.leftList ul').html(areaList);
//左侧点击事件
$('.leftList ul').on('click', 'li', function(e) {
var rightCont = '';
console.log(e)
console.log(data[$(this).index()].bowuguan)
var bList = data[$(this).index()].bowuguan;
$.each(bList, function(i, item) {
if(idList.indexOf(item.id) == -1) {
rightCont += '<li class="" rightid=' + item.id + '><div class="item "><p class="contImg"><img src="' + item.photo + '" /></p><p class="icon"><img src="img/select.png" /></p></div><p class="name">' + item.name + '</p></li>'
} else {
rightCont += '<li class="active" rightid=' + item.id + '><div class="item "><p class="contImg"><img src="' + item.photo + '" /></p><p class="icon"><img src="img/select.png" /></p></div><p class="name">' + item.name + '</p></li>'
}
})
$('.museumImg').eq($(this).index()).html(rightCont);
$(this).addClass('active').siblings().removeClass('active')
$('.imgList ul').eq($(this).index()).css('display', 'flex').siblings().css('display', 'none')
})
//右侧点击事件
$('.imgList').on('click', 'li', function(e) {
if($(this).hasClass('active')) {
$(this).removeClass('active');
let index = idList.indexOf($(this).attr('rightid'))
delet(idList[index], index)
// idList.splice(index, 1);
} else {
let q = $(this).parent().index();
$(this).addClass('active');
idList.push($(this).attr('rightid'))
hot(idList)
}
let ons = $(this).parent().find('.active').length;
if(ons > 0) {
$('.leftList li').eq($(this).parent().index()).find('.num').show();
$('.leftList li').eq($(this).parent().index()).find('.num').html('(' + ons + ')');
} else {
$('.leftList li').eq($(this).parent().index()).find('.num').hide();
$('.leftList li').eq($(this).parent().index()).removeClass('select');
}
})
function hot(id) {
chooseArr = [];
var m = null;
var num = null;
var choseCont = '';
$.each(id, function(a, s) {
$.each($('.imgList li'), function(i, v) {
if(s == $(v).attr('rightid')) {
$(v).addClass('active');
m = $('.imgList>ul').index($(v).parent());
$('.leftList li').eq(m).addClass('select');
num = $(v).parent().find('.active').length;
$('.leftList li').eq(m).find('.num').show();
$('.leftList li').eq(m).find('.num').html('(' + $(v).parent().find('.active').length + ')');
}
});
});
$.each(id, function(index, val) {
var split = val.split("_");
$.each(datalist, function(index_1, val_1) {
// console.log(index_1)
if(split[0] == val_1.id) {
console.log(val_1)
if(chooseArr.length > 0) {
var ifOf = true;
for(var i = 0; i < chooseArr.length; i++) {
for(var s = 0; s <= chooseArr[i].list; s++) {
choseCont += '<li><span class="text">' + chooseArr[i].list[s] + '</span><span rightid=' + val.id + ' class="closeIcon"><img src="img/close.png"/></span></li>'
}
if(chooseArr[i].id == split[0]) {
ifOf = false;
chooseArr[i].list.push(val);
$.each(val_1.bowuguan, function(b, name) {
if(val == name.id) {
chooseArr[i].bName.push(name.name);
}
})
$.each(val_1.bowuguan, function(b, name) {
if(val == name.id) {
chooseArr[i].bUrl.push(name.url);
}
})
chooseArr[i].num++;
break;
}
}
if(ifOf) {
var info = {
'id': '',
'name': '',
'cityName': '',
'num': '',
'bName': [],
'bUrl': [],
'list': [],
'bNum': idList.length,
}
info.id = val_1.id;
info.name = val_1.pinyin;
info.cityName = val_1.name
info.num = 1;
info.list = [];
info.list.push(val);
$.each(val_1.bowuguan, function(b, name) {
if(val == name.id) {
info.bName.push(name.name);
}
})
$.each(val_1.bowuguan, function(b, name) {
if(val == name.id) {
info.bUrl.push(name.url);
}
})
chooseArr.push(info);
xuanzhong()
}
} else {
var info = {
'id': '',
'name': '',
'cityName': '',
'num': '',
'bName': [],
'bUrl': [],
'list': [],
'bNum': idList.length,
}
info.id = val_1.id;
info.name = val_1.pinyin;
info.cityName = val_1.name
info.num = 1;
info.list = [];
info.list.push(val);
$.each(val_1.bowuguan, function(b, name) {
if(val == name.id) {
info.bName.push(name.name);
}
})
$.each(val_1.bowuguan, function(b, name) {
if(val == name.id) {
info.bUrl.push(name.url);
}
})
chooseArr.push(info);
xuanzhong();
}
}
})
});
console.log(chooseArr)
xuanzhong()
}
function delet(deletId, index) {
idList.splice(index, 1);
var idList2 = idList.length;
Array.prototype.remove = function(val) {
var index = this.indexOf(val);
if(index > -1) {
this.splice(index, 1);
}
};
$.each($('.imgList li'), function(i, v) {
if($(v).attr('rightid') == deletId) {
$(v).removeClass('active');
let a = $('.imgList>ul').index($(v).parent());
if($(v).parent().find('.active').length <= 0) {
$('.leftList li').eq(a).find('.num').hide();
$('.leftList li').eq(a).removeClass('select')
} else {
$('.leftList li').eq(a).find('.num').html('(' + $(v).parent().find('.active').length + ')');
}
}
})
var split = deletId.split("_");
$.each(datalist, function(index_1, val_1) {
if(split[0] == val_1.id) {
if(chooseArr.length > 0) {
var ifOf = true;
for(var i = 0; i < chooseArr.length; i++) {
if(chooseArr[i].id == split[0]) {
ifOf = false;
chooseArr[i].list.remove(deletId);
$.each(val_1.bowuguan, function(b, name) {
if(deletId == name.id) {
chooseArr[i].bName.remove(name.name);
}
})
if(chooseArr[i].list.length == 0) {
chooseArr.remove(chooseArr[i])
} else {
chooseArr[i].num--;
}
break;
}
}
for(var i = 0; i < chooseArr.length; i++) {
chooseArr[i].bNum = idList2;
for(var j = 0; j <= chooseArr[i].bName; j++) {
cseArr += '<li><span class="text">' + chooseArr[i].bName[j] + '</span><span class="closeIcon"><img src="img/close.png"/></span></li>'
}
}
$('.chooseName').html(cseArr)
// chooseName
if(ifOf) {
var info = {
'id': '',
'name': '',
'cityName': '',
'num': '',
'bName': [],
'bUrl': [],
'list': [],
'bNum': '',
}
info.id = val_1.id;
info.name = val_1.pinyin;
info.cityName = val_1.name
info.num = 1;
info.bNum = 1;
info.list = [];
info.list.remove(deletId);
$.each(val_1.bowuguan, function(b, name) {
if(deletId == name.id) {
info.bName.remove(name.name);
}
})
$.each(val_1.bowuguan, function(b, name) {
if(deletId == name.id) {
info.bUrl.remove(name.url);
}
})
chooseArr.push(info);
}
} else {
var info = {
'id': '',
'name': '',
'cityName': '',
'num': '',
'bName': [],
'bUrl': [],
'list': [],
'bNum': '',
}
info.id = val_1.id;
info.name = val_1.pinyin;
info.cityName = val_1.name
info.num = 1;
info.list = [];
info.list.remove(deletId);
$.each(val_1.bowuguan, function(b, name) {
if(deletId == name.id) {
info.bName.remove(name.name);
}
})
$.each(val_1.bowuguan, function(b, name) {
if(deletId == name.id) {
info.bUrl.remove(name.url);
}
})
info.bNum = 1;
chooseArr.push(info);
console.log(info)
console.log(chooseArr)
}
}
})
console.log(chooseArr)
xuanzhong()
}
function xuanzhong() {
$('.tips').fadeOut(0);
cseArr = '';
$.each(chooseArr, function(ind, vals) {
var dist = vals.bName.length;
for(var j = 0; j < dist; j++) {
console.log(j)
cseArr += '<li><span class="text">' + vals.bName[j] + '</span><span rightid=' + vals.list[j] + ' class="closeIcon"><img src="img/close.png"/></span></li>'
}
});
$('.chooseName').html(cseArr)
}
$('.chooseName').on('click', '.closeIcon', function() {
console.log('111')
$(this).removeClass('active');
let index = idList.indexOf($(this).attr('rightid'))
delet(idList[index], index)
})
})
}
var clickState = true;
$('.deepBtn').click(function() {
// console.log(chooseArr)
if(chooseArr.length == 0) {
$('.tips').fadeIn(500);
setTimeout(function() {
$('.tips').fadeOut(1000);
}, 1000)
} else {
localStorage.setItem("chooseArr", JSON.stringify(chooseArr));
console.log(chooseArr)
// location.replace("http://h5.qishichuangke.cn/html5/zxxt/index");
window.location.href = "worldShare.html"
}
})
</script>

253
css/areaList.css

@ -0,0 +1,253 @@
.wrap {
width: 100%;
height: auto;
position: relative;
background: url(../img/areaBgm.png) no-repeat;
background-size: 100% 100%;
overflow: hidden;
}
.box_cont {
display: flex;
margin-top: .14rem;
margin-left: .1rem;
height: 88%;
overflow: hidden;
}
/*地区*/
.leftList {
/*flex: 1;*/
height: 96%;
/*overflow-y: auto;*/
}
.leftList ul{
height: 100%;
overflow-y: auto;
}
::-webkit-scrollbar {
/*隐藏滚轮*/
display: none;
}
.leftList li {
width: .8rem;
height: .32rem;
display: flex;
justify-content: center;
align-items: center;
background: #fff;
border-radius: .05rem;
margin-bottom: .12rem;
}
.leftList li span {
display: block;
box-sizing: border-box;
color: #333;
font-size: .14rem;
line-height: .32rem;
text-align: center;
}
.leftList li span.name {
text-align: center;
}
.leftList li span.num {
display: none;
}
.leftList li.active {
background: #F09C22;
}
.leftList li.active span {
color: #FFFFFF;
}
.leftList li.select{
background: #F09C22;
}
.leftList li.select span {
color: #FFFFFF !important;
}
/*博物馆图片*/
.rightCont {
/*flex: 2;*/
margin-left: 0.15rem;
margin-top: .05rem;
position: relative;
height: 96%;
}
.rightCont .title {
font-size: .12rem;
color: #fff;
/*position: fixed;*/
z-index: 999;
padding-bottom: .1rem;
}
.rightCont .title img {
width: .14rem;
height: .14rem;
margin-right: .05rem;
}
.imgList{
height: 80%;
overflow-y: auto;
}
.museumImg {
display: flex;
flex-wrap: wrap;
margin-left: .1rem;
margin-right: .24rem;
margin-top: .12rem;
display: none;
}
.museumImg li {
/*width: 50%;*/
height: auto;
width: 1.04rem;
}
.museumImg li:nth-child(2n){
margin-left: .28rem;
}
.museumImg div.item {
width: 1.04rem;
/*height: .42rem;*/
position: relative;
border-radius: .05rem;
}
.museumImg li .contImg {
width: 1.04rem;
height: .42rem;
}
.museumImg p.contImg img {
width: 100%;
height: 100%;
}
.museumImg p.icon {
width: .24rem;
height: .24rem;
position: absolute;
right: 0;
top: 0;
font-size: 0;
transform: translate(50%,-50%);
display: none;
}
.museumImg p.icon img {
width: 100%;
height: 100%;
}
.museumImg p.name{
color: #fff;
font-size: .13rem;
width: 1.04rem;
text-align: center;
margin-top: .08rem;
margin-bottom:.18rem ;
}
.museumImg li.active div.item{
background: #F09C22;
}
.museumImg li.active p.icon{
display: block;
}
/*选中名称*/
.chooseList {
height: 16%;
margin-top: .15rem;
width: 100%;
/*overflow: hidden;*/
}
.chooseList p{
font-size: .12rem;
color: #fff;
display: flex;
align-items: center;
}
.chooseList p img{
width: .13rem;
height: .13rem;
}
.chooseName {
width: 2.7rem;
display: flex;
margin-top: .12rem;
overflow-x: auto;
}
.chooseName li{
width: .75rem;
height: .3rem;
border: 1px solid #F09C22;
border-radius: .05rem;
display: flex;
justify-content: center;
align-items: center;
margin-right: .04rem;
}
.chooseName li span.text{
width: .42rem;
overflow: auto;
white-space: nowrap;
font-size: .14rem;
margin-left: .07rem;
color: #fff;
box-sizing: border-box;
}
span.closeIcon img{
width: .14rem;
height: .14rem;
margin-left: .06rem;
padding-right: .02rem;
}
/*底部按钮*/
.deepBtn {
/*height: 12%;*/
position: fixed;
left: 50%;
bottom: .16rem;
transform: translateX(-50%);
display: flex;
width: 2.91rem;
height: .46rem;
background: #3B7BFF;
justify-content: center;
border-radius: .04rem;
line-height: .46rem;
text-align: center;
color: #fff;
font-size: .18rem;
}
/*弹出框*/
.tips{
width: 1.5rem;
height: .5rem;
border-radius: .1rem;
line-height: .5rem;
background: rgba(0,0,0,0.7);
text-align: center;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
font-size: .18rem;
color: #fff;
display: none;
}

18
css/base.css

@ -0,0 +1,18 @@
*{margin: 0;padding: 0;}/*将所有的HTML元素的默认边距清零*/
html body{font-size:12px; font-family: "宋体";color:#000;}/*对HTML的元素中的字体,颜色,背景色进行初始设置*/
ul li,ol li{list-style: none;}/*将列表的默认样式清除*/
a{text-decoration: none;outline: none; blr:expression(this.onFocus=this.blur());}/*将超链接的下划线去掉以及在IE6中点击出现的虚线框去掉*/
img{border:none;}/*图片的默认边框去掉 */
table{border-collapse:collapse;border-spacing:0;}
caption,th,td{font-weight:normal;text-align:left;}
input,textarea,select,button{font-size:100%;font-family:inherit;margin:0;padding:0;}
label,button{cursor:pointer}
textarea{white-space:pre;resize:none;border:1px solid #ececec;}
article,aside,figcaption,figure,footer,header,hgroup,nav,section,summary{ display: block;}
/*清除浮动*/
.clearfix:after{content:""; display:block; clear:both; height:0; line-height:0; visibility:hidden;}
.clearfix{zoom:1;}/*解决ie6的兼容性问题*/
.fl{float: left;}
.fr{float: right;}
a:hover{-webkit-tap-highlight-color: transparent;}
wrapper{width:1000px; margin:0 auto;}

0
css/common.css

47
css/index.css

@ -0,0 +1,47 @@
*{
margin: 0;
padding: 0;
}
.box {
width: 100%;
height: 100%;
position: relative;
background:url('../img/indexBgm4.png') no-repeat;
background-size: 100% 100%;
}
.box img {
width: 100%;
height: 100%;
object-fit:cover;
}
.btn {
position: absolute;
left: 50%;
bottom: .46rem;
transform: translateX(-50%);
display: flex;
width: 2.91rem;
height: .46rem;
background: #3B7BFF;
justify-content: center;
border-radius: .04rem;
}
.btn span {
font-size: .18rem;
color: #fff;
line-height: .46rem;
}
.btn p {
display: flex;
align-items: center;
}
.btn img {
width: .23rem;
height: .22rem;
margin-right: .1rem;
}

98
css/save.css

@ -0,0 +1,98 @@
.wrap{
position: relative;
}
.box_cont {
background: url(../img/saveBgm.png) no-repeat;
background-size: 100% 100%;
overflow: hidden;
height: 100%;
width: 100%;
}
.tip{
width: 3rem;
height: .5rem;
margin: 0.24rem auto 0;
}
.tip img{
width: 100%;
height: 100%;
}
.info{
margin-left:.1rem ;
display: flex;
align-items: center;
margin-top: .13rem;
}
.info p.name{
color: #FFBF63;
text-align: center;
font-size: .32rem;
margin-left: .21rem;
width: 100%;
padding-top: .23rem;
}
.numInfo{
text-align: center;
}
.numInfo p{
font-size: .16rem;
color: #fff;
margin-bottom:.18rem ;
}
.numInfo p span{
font-size: .3rem;
color: #FFBF63;
padding: 0 .1rem;
}
#container {
margin-top: -.2rem;
}
section {
margin: 0 auto;
}
#container svg {
width: 100%;
height: 100%;
background: url(../img/map1.png) no-repeat;
background-size: 100% 99%;
background-position-y: .03rem;
background-position-x: -5px;
}
.nameList{
margin-left: .1rem;
margin-right: .1rem;
height: 2rem;
overflow-y: auto;
}
.nameList p{
font-size: .12rem;
}
.nameList p.title{
color: #FFBF63;
line-height: .2rem;
}
.nameList p.itemList{
color: #fff;
}
/*二维码*/
.qrCode{
position: absolute;
right: .18rem;
bottom: .99rem;
width: .66rem;
height: .66rem;
}
.qrCode img{
width: 100%;
height: 100%;
}

260
css/share.css

@ -0,0 +1,260 @@
ul,
li {
list-style: none;
}
.wrap {
background: url(../img/share/bgm1.png) no-repeat;
background-size: 100% 100%;
height: 7.5rem;
}
.box_cont {
overflow: hidden;
height: 70%;
}
.tip {
width: 3rem;
height: .5rem;
margin: 0.24rem auto 0;
}
.tip img {
width: 100%;
height: 100%;
}
.tipText{
text-align: center;
color: #fff;
font-size: .12rem;
}
.info {
margin-left: .1rem;
display: flex;
align-items: center;
margin-top: .13rem;
}
.info p.avater {
width: .4rem;
height: .4rem;
background: #083EA6;
border-radius: 50%;
}
.info p.avater img {
width: .39rem;
height: .39rem;
margin: 0 auto;
}
.info p.name {
color: #fff;
font-size: .14rem;
margin-left: .21rem;
}
.numInfo {
margin-left: .1rem;
}
.numInfo p {
font-size: .16rem;
color: #fff;
margin-bottom: .1rem;
}
.numInfo p span {
font-size: .3rem;
color: #FFBF63;
padding: 0 .1rem;
}
#container {
margin-top: -.8rem;
}
section {
margin: 0 auto;
}
#container svg {
/*width: 3.55rem;*/
background: url(../img/map1.png) no-repeat;
background-size: 100% 73%;
background-position-y: .6rem;
background-position-x: -4px;
}
.nameList {
margin-left: .1rem;
margin-right: .1rem;
height: 20%;
overflow-y: auto;
/*margin-top: -.5rem;*/
padding-bottom: .25rem;
}
.nameList p {
font-size: .12rem;
}
.nameList p.title {
color: #FFBF63;
line-height: .2rem;
}
.nameList p.itemList {
color: #fff;
}
.deepIcon {
display: none;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background: #fff;
}
.deepIcon ul {
display: flex;
justify-content: center;
align-items: center;
}
.deepIcon ul li {
flex: 1;
}
.deepIcon li p.icon {
width: .4rem;
height: .4rem;
margin: .02rem auto;
}
.deepIcon p.icon img {
width: 100%;
height: 100%;
}
.deepIcon p.text {
text-align: center;
padding-bottom: .05rem;
font-size: .12rem;
letter-spacing: .02rem;
}
/*博物馆弹出框*/
.bulletBox .leftBwg,
.bulletBox .rightBwg {
/*width: 1.5rem;*/
/*height: 100%;*/
border-radius: .05rem;
background: rgba(0, 0, 0, 0.6);
position: absolute;
display: none;
padding: 0 .1rem;
max-height: 1rem;
overflow-y: auto;
}
.leftBwg {
left: 5%;
top: 50%;
}
.rightBwg {
right: 5%;
top: 50%;
}
.bulletBox ul {
margin: 0 .1rem;
padding: .1rem 0;
box-sizing: border-box;
}
.bulletBox ul li {
margin-bottom: .05rem;
color: #fff;
font-size: .14rem;
font-family: "微软雅黑";
}
.bulletBox ul a {
color: #fff;
font-size: .14rem;
font-family: "微软雅黑";
}
/*弹出框*/
/*遮罩*/
.maskBox{
position: fixed;
left:0%;
top: 0%;
width: 100%;
height: 100%;
background: rgba(0,0,0,.5);
z-index: 999;
display: none;
}
.mask{
position: fixed;
left:50%;
top: 50%;
transform: translate(-50%,-50%);
width: 3rem;
height: 3.77rem;
border-radius: .1rem;
background: #fff;
z-index: 99999;
display: none;
}
.mask .topImg img{
width: 100%;
}
.mask .btn {
width: 2.72rem;
margin: .03rem auto 0;
}
.mask .btn img{
width: 100%;
}
.mask .close{
position: absolute;
right:2%;
top: 2%;
/*transform: translate(50%,-50%);*/
width: .26rem;
height: .26rem;
}
.mask .close img{
width: 100%;
height: 100%;
}
/*提示框*/
.tipBox{
position: absolute;
left: 50%;
top: 50%;
width: 1rem;
height: .35rem;
transform: translate(-50%,-50%);
text-align: center;
line-height: .35rem;
color: #fff;
font-size: .14rem;
background: rgba(0,0,0,.8);
border-radius: .1rem;
display: none;
}

BIN
img/areaBgm.png

Before After
Width: 750  |  Height: 1380  |  Size: 242 KiB

BIN
img/begin.png

Before After
Width: 46  |  Height: 44  |  Size: 664 B

BIN
img/bwg/55处世界遗产尺寸已处理(104X42)-@2x.zip

BIN
img/bwg/anhui_1_1.png

Before After
Width: 208  |  Height: 84  |  Size: 36 KiB

BIN
img/bwg/anhui_2_1.png

Before After
Width: 208  |  Height: 84  |  Size: 36 KiB

BIN
img/bwg/aomen_1_1.png

Before After
Width: 208  |  Height: 84  |  Size: 44 KiB

BIN
img/bwg/beijing_1_1.png

Before After
Width: 208  |  Height: 84  |  Size: 39 KiB

BIN
img/bwg/beijing_2_1.png

Before After
Width: 208  |  Height: 84  |  Size: 37 KiB

BIN
img/bwg/beijing_3_1.png

Before After
Width: 208  |  Height: 84  |  Size: 42 KiB

BIN
img/bwg/beijing_4_1.png

Before After
Width: 208  |  Height: 84  |  Size: 34 KiB

BIN
img/bwg/beijing_5_1.png

Before After
Width: 208  |  Height: 84  |  Size: 34 KiB

BIN
img/bwg/beijing_6_1.png

Before After
Width: 208  |  Height: 84  |  Size: 47 KiB

BIN
img/bwg/chongqing_1_1.png

Before After
Width: 208  |  Height: 84  |  Size: 44 KiB

BIN
img/bwg/fujian_1_1.png

Before After
Width: 208  |  Height: 84  |  Size: 36 KiB

BIN
img/bwg/fujian_2_1.png

Before After
Width: 208  |  Height: 84  |  Size: 46 KiB

BIN
img/bwg/fujian_3_1.png

Before After
Width: 208  |  Height: 84  |  Size: 41 KiB

BIN
img/bwg/gansu_1_1.png

Before After
Width: 208  |  Height: 84  |  Size: 46 KiB

BIN
img/bwg/gansu_2_1.png

Before After
Width: 208  |  Height: 84  |  Size: 43 KiB

BIN
img/bwg/guangdong_1_1.png

Before After
Width: 208  |  Height: 84  |  Size: 42 KiB

BIN
img/bwg/guangxi_1_1.png

Before After
Width: 208  |  Height: 84  |  Size: 46 KiB

BIN
img/bwg/guizhou_1_1.png

Before After
Width: 208  |  Height: 84  |  Size: 39 KiB

BIN
img/bwg/hebei_1_1.png

Before After
Width: 208  |  Height: 84  |  Size: 42 KiB

BIN
img/bwg/henan_1_1.png

Before After
Width: 208  |  Height: 84  |  Size: 43 KiB

BIN
img/bwg/henan_2_1.png

Before After
Width: 208  |  Height: 84  |  Size: 40 KiB

BIN
img/bwg/henan_3_1.png

Before After
Width: 208  |  Height: 84  |  Size: 46 KiB

BIN
img/bwg/hubei_1_1.png

Before After
Width: 208  |  Height: 84  |  Size: 43 KiB

BIN
img/bwg/hubei_2_1.png

Before After
Width: 208  |  Height: 84  |  Size: 48 KiB

BIN
img/bwg/hunan_1_1.png

Before After
Width: 208  |  Height: 84  |  Size: 43 KiB

BIN
img/bwg/hunan_2_1.png

Before After
Width: 208  |  Height: 84  |  Size: 38 KiB

BIN
img/bwg/jiangsu_1_1.png

Before After
Width: 208  |  Height: 84  |  Size: 47 KiB

BIN
img/bwg/jiangsu_2_1.png

Before After
Width: 208  |  Height: 84  |  Size: 47 KiB

BIN
img/bwg/jiangxi_1_1.png

Before After
Width: 208  |  Height: 84  |  Size: 37 KiB

BIN
img/bwg/jiangxi_2_1.png

Before After
Width: 208  |  Height: 84  |  Size: 40 KiB

BIN
img/bwg/liaoning_1_1.png

Before After
Width: 208  |  Height: 84  |  Size: 36 KiB

BIN
img/bwg/neimenggu_1_1.png

Before After
Width: 208  |  Height: 84  |  Size: 38 KiB

BIN
img/bwg/qinghai_1_1.png

Before After
Width: 208  |  Height: 84  |  Size: 38 KiB

BIN
img/bwg/shandong_1_1.png

Before After
Width: 208  |  Height: 84  |  Size: 40 KiB

BIN
img/bwg/shandong_2_1.png

Before After
Width: 208  |  Height: 84  |  Size: 46 KiB

BIN
img/bwg/shanshanxi_1_1.png

Before After
Width: 208  |  Height: 84  |  Size: 45 KiB

BIN
img/bwg/shanshanxi_2_1.png

Before After
Width: 208  |  Height: 84  |  Size: 36 KiB

BIN
img/bwg/shanxi_1_1.png

Before After
Width: 208  |  Height: 84  |  Size: 45 KiB

BIN
img/bwg/shanxi_2_1.png

Before After
Width: 208  |  Height: 84  |  Size: 41 KiB

BIN
img/bwg/shanxi_3_1.png

Before After
Width: 208  |  Height: 84  |  Size: 42 KiB

BIN
img/bwg/sichuan_1_1.png

Before After
Width: 208  |  Height: 84  |  Size: 43 KiB

BIN
img/bwg/sichuan_2_1.png

Before After
Width: 208  |  Height: 84  |  Size: 40 KiB

BIN
img/bwg/sichuan_3_1.png

Before After
Width: 208  |  Height: 84  |  Size: 47 KiB

BIN
img/bwg/sichuan_4_1.png

Before After
Width: 208  |  Height: 84  |  Size: 46 KiB

BIN
img/bwg/sichuan_5_1.png

Before After
Width: 208  |  Height: 84  |  Size: 38 KiB

BIN
img/bwg/xinjiang_1_1.png

Before After
Width: 208  |  Height: 84  |  Size: 36 KiB

BIN
img/bwg/xizang_1_1.png

Before After
Width: 208  |  Height: 84  |  Size: 34 KiB

BIN
img/bwg/yunnan_1_1.png

Before After
Width: 208  |  Height: 84  |  Size: 50 KiB

BIN
img/bwg/yunnan_2_1.png

Before After
Width: 208  |  Height: 84  |  Size: 43 KiB

BIN
img/bwg/yunnan_3_1.png

Before After
Width: 208  |  Height: 84  |  Size: 42 KiB

BIN
img/bwg/yunnan_4_1.png

Before After
Width: 208  |  Height: 84  |  Size: 41 KiB

BIN
img/bwg/yunnan_5_1.png

Before After
Width: 208  |  Height: 84  |  Size: 39 KiB

BIN
img/bwg/zhejiang_1_1.png

Before After
Width: 208  |  Height: 84  |  Size: 42 KiB

BIN
img/bwg/zhejiang_2_1.png

Before After
Width: 208  |  Height: 84  |  Size: 38 KiB

BIN
img/bwg/zhejiang_3_1.png

Before After
Width: 208  |  Height: 84  |  Size: 39 KiB

BIN
img/close.png

Before After
Width: 28  |  Height: 28  |  Size: 481 B

BIN
img/icon1.png

Before After
Width: 28  |  Height: 28  |  Size: 417 B

BIN
img/indexBgm4.png

Before After
Width: 750  |  Height: 1380  |  Size: 1.2 MiB

BIN
img/map.png

Before After
Width: 710  |  Height: 521  |  Size: 17 KiB

BIN
img/map1.png

Before After
Width: 950  |  Height: 799  |  Size: 30 KiB

BIN
img/saveBgm.png

Before After
Width: 750  |  Height: 1380  |  Size: 311 KiB

BIN
img/select.png

Before After
Width: 28  |  Height: 28  |  Size: 927 B

BIN
img/share/avatar.png

Before After
Width: 78  |  Height: 78  |  Size: 11 KiB

BIN
img/share/bgm.png

Before After
Width: 750  |  Height: 1216  |  Size: 219 KiB

BIN
img/share/bgm1.png

Before After
Width: 375  |  Height: 690  |  Size: 202 KiB

BIN
img/share/btnIcon.png

Before After
Width: 544  |  Height: 112  |  Size: 28 KiB

BIN
img/share/close.png

Before After
Width: 52  |  Height: 52  |  Size: 1.3 KiB

BIN
img/share/imgs.png

Before After
Width: 600  |  Height: 622  |  Size: 196 KiB

BIN
img/share/positionIcon.png

Before After
Width: 38  |  Height: 56  |  Size: 1.2 KiB

BIN
img/share/pyq.png

Before After
Width: 82  |  Height: 82  |  Size: 3.0 KiB

BIN
img/share/saveImg.png

Before After
Width: 82  |  Height: 82  |  Size: 2.4 KiB

BIN
img/share/shareImg3.png

Before After
Width: 1000  |  Height: 1000  |  Size: 963 KiB

BIN
img/share/shuax.png

Before After
Width: 82  |  Height: 82  |  Size: 2.6 KiB

BIN
img/share/titleIcon.png

Before After
Width: 604  |  Height: 104  |  Size: 25 KiB

BIN
img/share/weixin.png

Before After
Width: 82  |  Height: 82  |  Size: 2.7 KiB

BIN
img/unselected.png

Before After
Width: 26  |  Height: 26  |  Size: 409 B

46
index.html

@ -0,0 +1,46 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>朱熹学堂—博物馆之旅</title>
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0">
<script src="js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/common.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="css/base.css" />
<link rel="stylesheet" type="text/css" href="css/index.css?vs=1.1.1" />
<script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js" type="text/javascript" charset="utf-8"></script>
<!--<script src="http://h5.qishichuangke.cn/html5/resources/js/zxxt/wx-config.js?vs=1.1.14" type="text/javascript" charset="utf-8"></script>-->
</head>
<body>
<div class="wrap">
<div class="box">
<img src="img/indexBgm4.png" />
<div class="btn">
<p>
<img src="img/begin.png" />
<span>开始</span>
</p>
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
$('.wrap').css('height', $(window).height())
$('.btn').click(function() {
window.location.href = "areaList.html"
})
getJssdk();
wx.ready(function() {
getReady(); //执行接口
})
</script>

46
js/common.js

@ -0,0 +1,46 @@
(function(designWidth, maxWidth) {
var doc = document,
win = window,
docEl = doc.documentElement,
remStyle = document.createElement("style"),
tid;
function refreshRem() {
var width = docEl.getBoundingClientRect().width;
maxWidth = maxWidth || 540;
width > maxWidth && (width = maxWidth);
var rem = width * 100 / designWidth;
remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
}
if(docEl.firstElementChild) {
docEl.firstElementChild.appendChild(remStyle);
} else {
var wrap = doc.createElement("div");
wrap.appendChild(remStyle);
doc.write(wrap.innerHTML);
wrap = null;
}
//要等 wiewport 设置好后才能执行 refreshRem,不然 refreshRem 会执行2次;
refreshRem();
win.addEventListener("resize", function() {
clearTimeout(tid); //防止执行两次
tid = setTimeout(refreshRem, 300);
}, false);
win.addEventListener("pageshow", function(e) {
if(e.persisted) { // 浏览器后退的时候重新计算
clearTimeout(tid);
tid = setTimeout(refreshRem, 300);
}
}, false);
if(doc.readyState === "complete") {
doc.body.style.fontSize = "16px";
} else {
doc.addEventListener("DOMContentLoaded", function(e) {
doc.body.style.fontSize = "16px";
}, false);
}
})(375, 750);

4
js/jquery-3.2.1.min.js
File diff suppressed because it is too large
View File

2
js/jquery-3.4.1.min.js
File diff suppressed because it is too large
View File

2631
js/jsMap-1.1.0.min - 副本.js
File diff suppressed because it is too large
View File

2636
js/jsMap-1.1.0.min.js
File diff suppressed because it is too large
View File

408
js/saveSvgAsPng.js

@ -0,0 +1,408 @@
(function() {
const out$ = typeof exports != 'undefined' && exports || typeof define != 'undefined' && {} || this || window;
if (typeof define !== 'undefined') define('save-svg-as-png', [], () => out$);
out$.default = out$;
const xmlNs = 'http://www.w3.org/2000/xmlns/';
const xhtmlNs = 'http://www.w3.org/1999/xhtml';
const svgNs = 'http://www.w3.org/2000/svg';
const doctype = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [<!ENTITY nbsp "&#160;">]>';
const urlRegex = /url\(["']?(.+?)["']?\)/;
const fontFormats = {
woff2: 'font/woff2',
woff: 'font/woff',
otf: 'application/x-font-opentype',
ttf: 'application/x-font-ttf',
eot: 'application/vnd.ms-fontobject',
sfnt: 'application/font-sfnt',
svg: 'image/svg+xml'
};
const isElement = obj => obj instanceof HTMLElement || obj instanceof SVGElement;
const requireDomNode = el => {
if (!isElement(el)) throw new Error(`an HTMLElement or SVGElement is required; got ${el}`);
};
const requireDomNodePromise = el =>
new Promise((resolve, reject) => {
if (isElement(el)) resolve(el)
else reject(new Error(`an HTMLElement or SVGElement is required; got ${el}`));
})
const isExternal = url => url && url.lastIndexOf('http',0) === 0 && url.lastIndexOf(window.location.host) === -1;
const getFontMimeTypeFromUrl = fontUrl => {
const formats = Object.keys(fontFormats)
.filter(extension => fontUrl.indexOf(`.${extension}`) > 0)
.map(extension => fontFormats[extension]);
if (formats) return formats[0];
console.error(`Unknown font format for ${fontUrl}. Fonts may not be working correctly.`);
return 'application/octet-stream';
};
const arrayBufferToBase64 = buffer => {
let binary = '';
const bytes = new Uint8Array(buffer);
for (let i = 0; i < bytes.byteLength; i++) binary += String.fromCharCode(bytes[i]);
return window.btoa(binary);
}
const getDimension = (el, clone, dim) => {
const v =
(el.viewBox && el.viewBox.baseVal && el.viewBox.baseVal[dim]) ||
(clone.getAttribute(dim) !== null && !clone.getAttribute(dim).match(/%$/) && parseInt(clone.getAttribute(dim))) ||
el.getBoundingClientRect()[dim] ||
parseInt(clone.style[dim]) ||
parseInt(window.getComputedStyle(el).getPropertyValue(dim));
return typeof v === 'undefined' || v === null || isNaN(parseFloat(v)) ? 0 : v;
};
const getDimensions = (el, clone, width, height) => {
if (el.tagName === 'svg') return {
width: width || getDimension(el, clone, 'width'),
height: height || getDimension(el, clone, 'height')
};
else if (el.getBBox) {
const {x, y, width, height} = el.getBBox();
return {
width: x + width,
height: y + height
};
}
};
const reEncode = data =>
decodeURIComponent(
encodeURIComponent(data)
.replace(/%([0-9A-F]{2})/g, (match, p1) => {
const c = String.fromCharCode(`0x${p1}`);
return c === '%' ? '%25' : c;
})
);
const uriToBlob = uri => {
const byteString = window.atob(uri.split(',')[1]);
const mimeString = uri.split(',')[0].split(':')[1].split(';')[0]
const buffer = new ArrayBuffer(byteString.length);
const intArray = new Uint8Array(buffer);
for (let i = 0; i < byteString.length; i++) {
intArray[i] = byteString.charCodeAt(i);
}
return new Blob([buffer], {type: mimeString});
};
const query = (el, selector) => {
if (!selector) return;
try {
return el.querySelector(selector) || el.parentNode && el.parentNode.querySelector(selector);
} catch(err) {
console.warn(`Invalid CSS selector "${selector}"`, err);
}
};
const detectCssFont = (rule, href) => {
// Match CSS font-face rules to external links.
// @font-face {
// src: local('Abel'), url(https://fonts.gstatic.com/s/abel/v6/UzN-iejR1VoXU2Oc-7LsbvesZW2xOQ-xsNqO47m55DA.woff2);
// }
const match = rule.cssText.match(urlRegex);
const url = (match && match[1]) || '';
if (!url || url.match(/^data:/) || url === 'about:blank') return;
const fullUrl =
url.startsWith('../') ? `${href}/../${url}`
: url.startsWith('./') ? `${href}/.${url}`
: url;
return {
text: rule.cssText,
format: getFontMimeTypeFromUrl(fullUrl),
url: fullUrl
};
};
const inlineImages = el => Promise.all(
Array.from(el.querySelectorAll('image')).map(image => {
let href = image.getAttributeNS('http://www.w3.org/1999/xlink', 'href') || image.getAttribute('href');
if (!href) return Promise.resolve(null);
if (isExternal(href)) {
href += (href.indexOf('?') === -1 ? '?' : '&') + 't=' + new Date().valueOf();
}
return new Promise((resolve, reject) => {
const canvas = document.createElement('canvas');
const img = new Image();
img.crossOrigin = 'anonymous';
img.src = href;
img.onerror = () => reject(new Error(`Could not load ${href}`));
img.onload = () => {
canvas.width = img.width;
canvas.height = img.height;
canvas.getContext('2d').drawImage(img, 0, 0);
image.setAttributeNS('http://www.w3.org/1999/xlink', 'href', canvas.toDataURL('image/png'));
resolve(true);
};
});
})
);
const cachedFonts = {};
const inlineFonts = fonts => Promise.all(
fonts.map(font =>
new Promise((resolve, reject) => {
if (cachedFonts[font.url]) return resolve(cachedFonts[font.url]);
const req = new XMLHttpRequest();
req.addEventListener('load', () => {
// TODO: it may also be worth it to wait until fonts are fully loaded before
// attempting to rasterize them. (e.g. use https://developer.mozilla.org/en-US/docs/Web/API/FontFaceSet)
const fontInBase64 = arrayBufferToBase64(req.response);
const fontUri = font.text.replace(urlRegex, `url("data:${font.format};base64,${fontInBase64}")`)+'\n';
cachedFonts[font.url] = fontUri;
resolve(fontUri);
});
req.addEventListener('error', e => {
console.warn(`Failed to load font from: ${font.url}`, e);
cachedFonts[font.url] = null;
resolve(null);
});
req.addEventListener('abort', e => {
console.warn(`Aborted loading font from: ${font.url}`, e);
resolve(null);
});
req.open('GET', font.url);
req.responseType = 'arraybuffer';
req.send();
})
)
).then(fontCss => fontCss.filter(x => x).join(''));
let cachedRules = null;
const styleSheetRules = () => {
if (cachedRules) return cachedRules;
return cachedRules = Array.from(document.styleSheets).map(sheet => {
try {
return {rules: sheet.cssRules, href: sheet.href};
} catch (e) {
console.warn(`Stylesheet could not be loaded: ${sheet.href}`, e);
return {};
}
});
};
const inlineCss = (el, options) => {
const {
selectorRemap,
modifyStyle,
modifyCss,
fonts,
excludeUnusedCss
} = options || {};
const generateCss = modifyCss || ((selector, properties) => {
const sel = selectorRemap ? selectorRemap(selector) : selector;
const props = modifyStyle ? modifyStyle(properties) : properties;
return `${sel}{${props}}\n`;
});
const css = [];
const detectFonts = typeof fonts === 'undefined';
const fontList = fonts || [];
styleSheetRules().forEach(({rules, href}) => {
if (!rules) return;
Array.from(rules).forEach(rule => {
if (typeof rule.style != 'undefined') {
if (query(el, rule.selectorText)) css.push(generateCss(rule.selectorText, rule.style.cssText));
else if (detectFonts && rule.cssText.match(/^@font-face/)) {
const font = detectCssFont(rule, href);
if (font) fontList.push(font);
} else if (!excludeUnusedCss) {
css.push(rule.cssText);
}
}
});
});
return inlineFonts(fontList).then(fontCss => css.join('\n') + fontCss);
};
const downloadOptions = () => {
if (!navigator.msSaveOrOpenBlob && !('download' in document.createElement('a'))) {
return {popup: window.open()};
}
};
out$.prepareSvg = (el, options, done) => {
requireDomNode(el);
const {
left = 0,
top = 0,
width: w,
height: h,
scale = 1,
responsive = false,
excludeCss = false,
} = options || {};
return inlineImages(el).then(() => {
let clone = el.cloneNode(true);
clone.style.backgroundColor = (options || {}).backgroundColor || el.style.backgroundColor;
const {width, height} = getDimensions(el, clone, w, h);
if (el.tagName !== 'svg') {
if (el.getBBox) {
if (clone.getAttribute('transform') != null) {
clone.setAttribute('transform', clone.getAttribute('transform').replace(/translate\(.*?\)/, ''));
}
const svg = document.createElementNS('http://www.w3.org/2000/svg','svg');
svg.appendChild(clone);
clone = svg;
} else {
console.error('Attempted to render non-SVG element', el);
return;
}
}
clone.setAttribute('version', '1.1');
clone.setAttribute('viewBox', [left, top, width, height].join(' '));
if (!clone.getAttribute('xmlns')) clone.setAttributeNS(xmlNs, 'xmlns', svgNs);
if (!clone.getAttribute('xmlns:xlink')) clone.setAttributeNS(xmlNs, 'xmlns:xlink', 'http://www.w3.org/1999/xlink');
if (responsive) {
clone.removeAttribute('width');
clone.removeAttribute('height');
clone.setAttribute('preserveAspectRatio', 'xMinYMin meet');
} else {
clone.setAttribute('width', width * scale);
clone.setAttribute('height', height * scale);
}
Array.from(clone.querySelectorAll('foreignObject > *')).forEach(foreignObject => {
foreignObject.setAttributeNS(xmlNs, 'xmlns', foreignObject.tagName === 'svg' ? svgNs : xhtmlNs);
});
if (excludeCss) {
const outer = document.createElement('div');
outer.appendChild(clone);
const src = outer.innerHTML;
if (typeof done === 'function') done(src, width, height);
else return {src, width, height};
} else {
return inlineCss(el, options).then(css => {
const style = document.createElement('style');
style.setAttribute('type', 'text/css');
style.innerHTML = `<![CDATA[\n${css}\n]]>`;
const defs = document.createElement('defs');
defs.appendChild(style);
clone.insertBefore(defs, clone.firstChild);
const outer = document.createElement('div');
outer.appendChild(clone);
const src = outer.innerHTML.replace(/NS\d+:href/gi, 'xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href');
if (typeof done === 'function') done(src, width, height);
else return {src, width, height};
});
}
});
};
out$.svgAsDataUri = (el, options, done) => {
requireDomNode(el);
return out$.prepareSvg(el, options)
.then(({src, width, height}) => {
const svgXml = `data:image/svg+xml;base64,${window.btoa(reEncode(doctype+src))}`;
if (typeof done === 'function') {
done(svgXml, width, height);
}
return svgXml;
});
};
out$.svgAsPngUri = (el, options, done) => {
requireDomNode(el);
const {
encoderType = 'image/png',
encoderOptions = 0.8,
canvg
} = options || {};
const convertToPng = ({src, width, height}) => {
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
const pixelRatio = window.devicePixelRatio || 1;
canvas.width = width * pixelRatio;
canvas.height = height * pixelRatio;
canvas.style.width = `${canvas.width}px`;
canvas.style.height = `${canvas.height}px`;
context.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
if (canvg) canvg(canvas, src);
else context.drawImage(src, 0, 0);
let png;
try {
png = canvas.toDataURL(encoderType, encoderOptions);
} catch (e) {
if ((typeof SecurityError !== 'undefined' && e instanceof SecurityError) || e.name === 'SecurityError') {
console.error('Rendered SVG images cannot be downloaded in this browser.');
return;
} else throw e;
}
if (typeof done === 'function') done(png, canvas.width, canvas.height);
return Promise.resolve(png);
}
if (canvg) return out$.prepareSvg(el, options).then(convertToPng);
else return out$.svgAsDataUri(el, options).then(uri => {
return new Promise((resolve, reject) => {
const image = new Image();
image.onload = () => resolve(convertToPng({
src: image,
width: image.width,
height: image.height
}));
image.onerror = () => {
reject(`There was an error loading the data URI as an image on the following SVG\n${window.atob(uri.slice(26))}Open the following link to see browser's diagnosis\n${uri}`);
}
image.src = uri;
})
});
};
out$.download = (name, uri, options) => {
if (navigator.msSaveOrOpenBlob) navigator.msSaveOrOpenBlob(uriToBlob(uri), name);
else {
const saveLink = document.createElement('a');
if ('download' in saveLink) {
saveLink.download = name;
saveLink.style.display = 'none';
document.body.appendChild(saveLink);
try {
const blob = uriToBlob(uri);
const url = URL.createObjectURL(blob);
saveLink.href = url;
saveLink.onclick = () => requestAnimationFrame(() => URL.revokeObjectURL(url));
} catch (e) {
console.error(e);
console.warn('Error while getting object URL. Falling back to string URL.');
saveLink.href = uri;
}
saveLink.click();
document.body.removeChild(saveLink);
} else if (options && options.popup) {
options.popup.document.title = name;
options.popup.location.replace(uri);
}
}
};
out$.saveSvg = (el, name, options) => {
const downloadOpts = downloadOptions(); // don't inline, can't be async
return requireDomNodePromise(el)
.then(el => out$.svgAsDataUri(el, options || {}))
.then(uri => out$.download(name, uri, downloadOpts));
};
out$.saveSvgAsPng = (el, name, options) => {
const downloadOpts = downloadOptions(); // don't inline, can't be async
return requireDomNodePromise(el)
.then(el => out$.svgAsPngUri(el, options || {}))
.then(uri => out$.download(name, uri, downloadOpts));
};
})();

42
js/share.js

@ -0,0 +1,42 @@
/******************
* 分享js
* @since 1.0
*/
$(function() {
function svgToImg() {
//获取svg内容
//var svg = document.getElementById('jsmap-container-id').innerHTML;
//var svg = $(".jsmap-container").html();
let svghtml = document.querySelector('svg');
let svg = new XMLSerializer().serializeToString(svghtml);
var canvas = document.getElementById('canvas');
var c = canvas.getContext('2d');
//新建Image对象
var img = new Image();
img.src = `data:image/svg+xml;base64,${window.btoa(unescape(encodeURIComponent(svg)))}`;
//图片初始化完成后调用
img.onload = function() {
//将canvas的宽高设置为图像的宽高
canvas.width = img.width;
canvas.height = img.height;
//canvas画图片
c.drawImage(img, 0, 0);
console.log(img)
//将图片添加到body中
document.body.appendChild(img)
//$('.svgImg').attr('src',img);
}
};
//svgToImg();
})
//document.HTML.demo 事件

496
json/jibenxinxi.json

@ -0,0 +1,496 @@
[
{
"id": "0",
"name": "热门",
"pinyin": "remen",
"bowuguan": [
{
"id": "1_1",
"name": "天坛",
"photo": "img/bwg/beijing_1_1.png",
"url": "https://mp.weixin.qq.com/s/RFJpJ9OsD6Fg9TCcmHtgrA"
}, {
"id": "2_1",
"name": "秦始皇及兵马俑坑",
"photo": "img/bwg/shanshanxi_1_1.png",
"url": "https://mp.weixin.qq.com/s/r_TQFPQzyuIQnKv_BTN5zA"
}, {
"id": "2_1",
"name": "陕西历史博物馆",
"photo": "img/bwg/shanshanxi_1_1.png",
"url": "https://mp.weixin.qq.com/s/QOuCGw40f36RqMTScWMjzg"
}, {
"id": "6_1",
"name": "泰山",
"photo": "img/bwg/shandong_1_1.png",
"url": "https://mp.weixin.qq.com/s/IYmwtLSVWOzMyc-0TRrQgA"
},{
"id": "13_1",
"name": "神农架",
"photo": "img/bwg/hubei_1_1.png",
"url": "https://mp.weixin.qq.com/s/nEroFP3_84RcirEKBEAPAg"
}, {
"id": "20_1",
"name": "莫高窟",
"photo": "img/bwg/gansu_1_1.png",
"url": "https://mp.weixin.qq.com/s/AnoSTN3hQep5Ayq4uZDUxA"
}
]
}, {
"id": "1",
"name": "北京",
"pinyin": "beijing",
"bowuguan": [
{
"id": "1_1",
"name": "天坛",
"photo": "img/bwg/beijing_1_1.png",
"url": "https://mp.weixin.qq.com/s/RFJpJ9OsD6Fg9TCcmHtgrA"
}, {
"id": "1_2",
"name": "颐和园",
"photo": "img/bwg/beijing_2_1.png",
"url": "https://mp.weixin.qq.com/s/m2EMlgWYpZhecwMKfimeFQ"
}, {
"id": "1_3",
"name": "周口店“北京人”遗址",
"photo": "img/bwg/beijing_3_1.png",
"url": "https://mp.weixin.qq.com/s/umr_plzUEGmpDKD45dbKZQ"
}, {
"id": "1_4",
"name": "长城",
"photo": "img/bwg/beijing_4_1.png",
"url": "https://mp.weixin.qq.com/s/EM-UmeXRPl7WW0d3j1obqg"
}, {
"id": "1_5",
"name": "明清故宫(北京故宫、沈阳故宫)",
"photo": "img/bwg/beijing_5_1.png",
"url": "https://mp.weixin.qq.com/s/pZBiu6TzIMVlX5rAsjX0zw"
}, {
"id": "1_6",
"name": "明清皇家陵寝",
"photo": "img/bwg/beijing_6_1.png",
"url": "https://mp.weixin.qq.com/s/aqcUHinlJ9vnB1cs3l3faw "
}
]
}, {
"id": "2",
"name": "陕西",
"pinyin": "shanshanxi",
"bowuguan": [
{
"id": "2_1",
"name": "秦始皇及兵马俑坑",
"photo": "img/bwg/shanshanxi_1_1.png",
"url": "https://mp.weixin.qq.com/s/r_TQFPQzyuIQnKv_BTN5zA"
}, {
"id": "2_2",
"name": "丝绸之路“长安至天山廊道路网”",
"photo": "img/bwg/shanshanxi_2_1.png",
"url": "https://mp.weixin.qq.com/s/LT0v5fr6Ich3k4YchT-Jcg "
}
]
}, {
"id": "3",
"name": "四川",
"pinyin": "sichuan",
"bowuguan": [
{
"id": "3_1",
"name": "峨眉山乐山大佛",
"photo": "img/bwg/sichuan_1_1.png",
"url": " https://mp.weixin.qq.com/s/M1Xv77hnnFwR-CX8cijulw"
}, {
"id": "3_2",
"name": "四川大熊猫栖息地",
"photo": "img/bwg/sichuan_2_1.png",
"url": "https://mp.weixin.qq.com/s/4_hPU7L1ejeYDSmh32GQcw"
}, {
"id": "3_3",
"name": "黄龙风景名胜区",
"photo": "img/bwg/sichuan_3_1.png",
"url": "https://mp.weixin.qq.com/s/hMQGfqLVy4znv9nZN8EvAQ"
}, {
"id": "3_4",
"name": "九寨沟风景名胜区",
"photo": "img/bwg/sichuan_4_1.png",
"url": "https://mp.weixin.qq.com/s/JcJnHbUvv55_8O0d0ktGFQ"
}, {
"id": "3_5",
"name": "青城山和都江堰",
"photo": "img/bwg/sichuan_5_1.png",
"url": "https://mp.weixin.qq.com/s/ReKim9beD_3I8eolSoVVHA"
}
]
}, {
"id": "4",
"name": "江苏",
"pinyin": "jiangsu",
"bowuguan": [
{
"id": "4_1",
"name": "苏州古典园林",
"photo": "img/bwg/jiangsu_1_1.png",
"url": "https://mp.weixin.qq.com/s/b4Qf9Zg6vVYj9KFJRxQZvw"
}, {
"id": "4_2",
"name": "黄(渤)海候鸟栖息地",
"photo": "img/bwg/jiangsu_2_1.png",
"url": "https://mp.weixin.qq.com/s/c6Oj8HjSjBVhKWTzXIqofQ"
}
]
}, {
"id": "5",
"name": "浙江",
"pinyin": "zhejiang",
"bowuguan": [
{
"id": "5_1",
"name": "杭州西湖文化景观",
"photo": "img/bwg/zhejiang_1_1.png",
"url": "https://mp.weixin.qq.com/s/oj69ix34pFtNXlj1dX5-AA"
}, {
"id": "5_2",
"name": "良渚古城遗址",
"photo": "img/bwg/zhejiang_2_1.png",
"url": "https://mp.weixin.qq.com/s/VEn54ElI6RsVlbtDEdmhrA"
}, {
"id": "5_3",
"name": "大运河",
"photo": "img/bwg/zhejiang_3_1.png",
"url": "https://mp.weixin.qq.com/s/NquS9RTV9cj9QGHSThPOaw"
}
]
}, {
"id": "6",
"name": "山东",
"pinyin": "shandong",
"bowuguan": [
{
"id": "6_1",
"name": "泰山",
"photo": "img/bwg/shandong_1_1.png",
"url": "https://mp.weixin.qq.com/s/IYmwtLSVWOzMyc-0TRrQgA"
}, {
"id": "6_2",
"name": "曲阜孔庙、孔府、孔林",
"photo": "img/bwg/shandong_2_1.png",
"url": "https://mp.weixin.qq.com/s/ILa-qbld5gbGWup3OY5n5g"
}
]
}, {
"id": "7",
"name": "河南",
"pinyin": "henan",
"bowuguan": [
{
"id": "7_1",
"name": "龙门石窟",
"photo": "img/bwg/henan_1_1.png",
"url": "https://mp.weixin.qq.com/s/vsAlSXD96k22wwpItleNjg"
}, {
"id": "7_2",
"name": "殷墟",
"photo": "img/bwg/henan_2_1.png",
"url": "https://mp.weixin.qq.com/s/wPDl0_8TjiX9io-JXQw57g"
}, {
"id": "7_3",
"name": "“天地之中”历史古迹",
"photo": "img/bwg/henan_3_1.png",
"url": "https://mp.weixin.qq.com/s/-DTXH8_quad4fv2DY4tOTA"
}
]
}, {
"id": "8",
"name": "广东",
"pinyin": "guangdong",
"bowuguan": [
{
"id": "8_1",
"name": "开平碉楼与古村落",
"photo": "img/bwg/guangdong_1_1.png",
"url": "https://mp.weixin.qq.com/s/xtuMOuf1aruNgUXZxnwbdg"
}
]
}, {
"id": "9",
"name": "辽宁",
"pinyin": "liaoning",
"bowuguan": [
{
"id": "9_1",
"name": "高句丽王城、王陵及贵族墓葬",
"photo": "img/bwg/liaoning_1_1.png",
"url": "https://mp.weixin.qq.com/s/DmmB_t6v7fVA9bd2cCidiA"
}
]
}, {
"id": "11",
"name": "福建",
"pinyin": "fujian",
"bowuguan": [
{
"id": "11_1",
"name": "武夷山",
"photo": "img/bwg/fujian_1_1.png",
"url": "https://mp.weixin.qq.com/s/SW1brzFSEB1InlVcKWC7PA"
}, {
"id": "11_2",
"name": "福建土楼",
"photo": "img/bwg/fujian_2_1.png",
"url": "https://mp.weixin.qq.com/s/aEMQw-OrgYgY02iuKBEzWg"
}, {
"id": "11_3",
"name": "鼓浪屿",
"photo": "img/bwg/fujian_3_1.png",
"url": "https://mp.weixin.qq.com/s/em7h5HWurO24A5wW7WI9Fg"
}
]
}, {
"id": "12",
"name": "江西",
"pinyin": "jiangxi",
"bowuguan": [
{
"id": "12_1",
"name": "庐山国家公园",
"photo": "img/bwg/jiangxi_1_1.png",
"url": "https://mp.weixin.qq.com/s/rQYBjk7YORtMSlgFAwOIww"
}, {
"id": "12_2",
"name": "三清山国家公园",
"photo": "img/bwg/jiangxi_2_1.png",
"url": "https://mp.weixin.qq.com/s/POHg84nRy4zjC8QAXW-3iA"
}
]
}, {
"id": "13",
"name": "湖北",
"pinyin": "hubei",
"bowuguan": [
{
"id": "13_1",
"name": "神农架",
"photo": "img/bwg/hubei_1_1.png",
"url": "https://mp.weixin.qq.com/s/nEroFP3_84RcirEKBEAPAg"
}, {
"id": "13_2",
"name": "武当山古建筑群",
"photo": "img/bwg/hubei_2_1.png",
"url": "https://mp.weixin.qq.com/s/oGtfS_OFe3JJKfrNkFJt3g"
}
]
}, {
"id": "15",
"name": "湖南",
"pinyin": "hunan",
"bowuguan": [
{
"id": "15_1",
"name": "武陵源风景名胜区",
"photo": "img/bwg/hunan_1_1.png",
"url": "https://mp.weixin.qq.com/s/HON-5hNpJqSHHU-wo3dryA"
}, {
"id": "15_2",
"name": "土司遗址",
"photo": "img/bwg/hunan_2_1.png",
"url": "https://mp.weixin.qq.com/s/rz4nNCPbg0i__8rwCo8mSw"
}
]
},{
"id": "17",
"name": "河北",
"pinyin": "hebei",
"bowuguan": [
{
"id": "17_1",
"name": "承德避暑山庄及周围寺庙",
"photo": "img/bwg/hebei_1_1.png",
"url": "https://mp.weixin.qq.com/s/QVl8aFC4g8y4_O0M8Efiaw"
}
]
}, {
"id": "18",
"name": "山西",
"pinyin": "shanxi",
"bowuguan": [
{
"id": "18_1",
"name": "五台山",
"photo": "img/bwg/shanxi_1_1.png",
"url": "https://mp.weixin.qq.com/s/XjtkhzHI6UY004t7iD-j0w"
}, {
"id": "18_2",
"name": "平遥古城",
"photo": "img/bwg/shanxi_2_1.png",
"url": "https://mp.weixin.qq.com/s/Q7H6rMloK97fnNjZmA_e-g"
}, {
"id": "18_3",
"name": "云冈石窟",
"photo": "img/bwg/shanxi_3_1.png",
"url": "https://mp.weixin.qq.com/s/UD1HPzHbfe3pbLrNakBwtQ"
}
]
}, {
"id": "20",
"name": "甘肃",
"pinyin": "gansu",
"bowuguan": [
{
"id": "20_1",
"name": "莫高窟",
"photo": "img/bwg/gansu_1_1.png",
"url": "https://mp.weixin.qq.com/s/AnoSTN3hQep5Ayq4uZDUxA"
}, {
"id": "20_2",
"name": "中国丹霞",
"photo": "img/bwg/gansu_2_1.png",
"url": "https://mp.weixin.qq.com/s/HON-5hNpJqSHHU-wo3dryA"
}
]
}, {
"id": "21",
"name": "重庆",
"pinyin": "chongqing",
"bowuguan": [
{
"id": "21_1",
"name": "大足石刻",
"photo": "img/bwg/chongqing_1_1.png",
"url": "https://mp.weixin.qq.com/s/wvDPsFPVjcRo90O77me2jw"
}
]
}, {
"id": "22",
"name": "内蒙古",
"pinyin": "neimenggu",
"bowuguan": [
{
"id": "22_1",
"name": "元上都遗址",
"photo": "img/bwg/neimenggu_1_1.png",
"url": "https://mp.weixin.qq.com/s/UiuCsSnrwAzEtevMHCvtjQ"
}
]
}, {
"id": "23",
"name": "安徽",
"pinyin": "anhui",
"bowuguan": [
{
"id": "23_1",
"name": "黄山",
"photo": "img/bwg/anhui_1_1.png",
"url": "https://mp.weixin.qq.com/s/wgG-K7LNscAGTqHu4Rxetw "
}, {
"id": "23_2",
"name": "皖南古村落(西递和宏村)",
"photo": "img/bwg/anhui_2_1.png",
"url": "https://mp.weixin.qq.com/s/ha6bhv4YDiZWiClHHGu4uw"
}
]
}, {
"id": "24",
"name": "广西",
"pinyin": "guangxi",
"bowuguan": [
{
"id": "24_1",
"name": "广西左江花山岩画",
"photo": "img/bwg/guangxi_1_1.png",
"url": "https://mp.weixin.qq.com/s/_KBIRDV9ejWTA64mb42VcQ"
}
]
}, {
"id": "25",
"name": "云南",
"pinyin": "yunnan",
"bowuguan": [
{
"id": "25_1",
"name": "丽江古城",
"photo": "img/bwg/yunnan_1_1.png",
"url": "https://mp.weixin.qq.com/s/LN38dp7ZHtMgomhM5l_5aA"
}, {
"id": "25_2",
"name": "红河哈尼梯田文化景观",
"photo": "img/bwg/yunnan_2_1.png",
"url": "https://mp.weixin.qq.com/s/6j7uJeIpW5rqlyvwMa4Xgg"
}, {
"id": "25_3",
"name": "澄江化石遗址",
"photo": "img/bwg/yunnan_3_1.png",
"url": "https://mp.weixin.qq.com/s/sVHEnYUQ0ds5i3DB9gnzLA"
}, {
"id": "25_4",
"name": "中国南方喀斯特",
"photo": "img/bwg/yunnan_4_1.png",
"url": "https://mp.weixin.qq.com/s/mfRz4IVSo0_EkEU0FoZkIw"
}, {
"id": "25_5",
"name": "云南三江并流保护区",
"photo": "img/bwg/yunnan_5_1.png",
"url": "https://mp.weixin.qq.com/s/6DOUqoxEZv-vIUjNTISHjA"
}
]
}, {
"id": "27",
"name": "新疆",
"pinyin": "xinjiang",
"bowuguan": [
{
"id": "27_1",
"name": "新疆天山",
"photo": "img/bwg/xinjiang_1_1.png",
"url": "https://mp.weixin.qq.com/s/o67aJr8GJVsQuykeZ3wyaw"
}
]
}, {
"id": "29",
"name": "贵州",
"pinyin": "guizhou",
"bowuguan": [
{
"id": "29_1",
"name": "贵州梵净山",
"photo": "img/bwg/guizhou_1_1.png",
"url": "https://mp.weixin.qq.com/s/sSIwEcw5TV3GTM5tQ1Y7Bg"
}
]
}, {
"id": "30",
"name": "西藏",
"pinyin": "xizang",
"bowuguan": [
{
"id": "30_1",
"name": "布达拉宫历史建筑群",
"photo": "img/bwg/xizang_1_1.png",
"url": "https://mp.weixin.qq.com/s/I8OKFERGtzDWGQdQprW1rQ"
}
]
}, {
"id": "31",
"name": "青海",
"pinyin": "qinghai",
"bowuguan": [
{
"id": "31_1",
"name": "可可西里",
"photo": "img/bwg/qinghai_1_1.png",
"url": "https://mp.weixin.qq.com/s/R7SWeh7-9xzrzFRQOVssag"
}
]
},{
"id": "34",
"name": "澳门",
"pinyin": "aomen",
"bowuguan": [{
"id": "34_1",
"name": "澳门历史城区",
"photo": "img/bwg/aomen_1_1.png",
"url": "https://mp.weixin.qq.com/s/pUPQ2uEmfhJOqnVpInm7vw "
}
]
}
]

76
save.html

@ -0,0 +1,76 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>朱熹学堂—博物馆之旅</title>
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0">
<script src="js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/common.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="css/base.css" />
<link rel="stylesheet" type="text/css" href="css/save.css" />
</head>
<body>
<div class="wrap">
<div class="box_cont">
<div class="info">
<p class="name">不闻不问</p>
</div>
<div class="numInfo">
<p>
踏足中国<span>7</span>个省区,<span>7</span>个一级博物馆
</p>
<p>超越了<span>80.88%</span>的用户</p>
</div>
<div id="container"></div>
<div class="nameList">
<ul>
<li>
<p class="title">北京市</p>
<p class="itemList">故宫博物院、故宫博物院、故宫博物院、故宫博物院、故宫博物院、故宫博物院、故宫博物院、故宫博物院、故宫博物院、故宫博物院</p>
</li>
<li>
<p class="title">北京市</p>
<p class="itemList">故宫博物院、故宫博物院、故宫博物院、故宫博物院、故宫博物院、故宫博物院、故宫博物院、故宫博物院、故宫博物院、故宫博物院</p>
</li>
<li>
<p class="title">北京市</p>
<p class="itemList">故宫博物院、故宫博物院、故宫博物院、故宫博物院、故宫博物院、故宫博物院、故宫博物院、故宫博物院、故宫博物院、故宫博物院</p>
</li>
<li>
<p class="title">北京市</p>
<p class="itemList">故宫博物院、故宫博物院、故宫博物院、故宫博物院、故宫博物院、故宫博物院、故宫博物院、故宫博物院、故宫博物院、故宫博物院</p>
</li>
<li>
<p class="title">北京市</p>
<p class="itemList">故宫博物院、故宫博物院、故宫博物院、故宫博物院、故宫博物院、故宫博物院、故宫博物院、故宫博物院、故宫博物院、故宫博物院</p>
</li>
</ul>
</div>
<div class="qrCode">
<img src="img/erweima.png" />
</div>
</div>
</div>
</body>
<script src="js/jsMap-1.1.0.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$('.wrap').css('height', $(window).height());
jsMap.config("#container", {
name: "china",
width: 355,
height: 306,
datafill: "#4291DA",
areaName: false,
})
</script>
</html>

142
test.html
File diff suppressed because it is too large
View File

184
worldShare.html

@ -0,0 +1,184 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>朱熹学堂—博物馆之旅/title>
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0">
<script src="js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/common.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="css/base.css" />
<link rel="stylesheet" type="text/css" href="css/share.css" />
</head>
<body>
<div class="wrap">
<div class="maskBox"></div>
<div class="box_cont">
<p class="tip"><img src="img/share/titleIcon.png" /></p>
<div class="info">
<p class="avater"><img src="img/share/avatar.png" /></p>
<p class="name">不闻不问</p>
</div>
<div class="numInfo">
<p>
踏足中国<span>7</span>个省区,<span>7</span>个一级博物馆
</p>
<p>超越了<span>80.88%</span>的用户</p>
</div>
<div class="tipText">(了解博物馆详情,请点击图标)</div>
<div id="container"></div>
</div>
<div class="nameList">
<ul>
</ul>
</div>
<div class="bulletBox">
<div class="leftBwg">
<ul>
<li>
<a href=""></a>
</li>
</ul>
</div>
<div class="rightBwg">
<ul>
<li>
<a href=""></a>
</li>
</ul>
</div>
</div>
<div class="deepIcon">
<ul>
<li>
<p class="icon"><img src="img/share/weixin.png" /></p>
<p class="text">分享到微信</p>
</li>
<li onclick="saveImg()">
<p class="icon"><img src="img/share/saveImg.png" /></p>
<p class="text">保存图片</p>
</li>
<li>
<p class="icon"><img src="img/share/shuax.png" /></p>
<p class="text">重新选择</p>
</li>
</ul>
</div>
<div class="mask">
<div class="maskImg">
<div class="topImg"><img src="img/share/imgs.png" /></div>
<div class="btn"><img src="img/share/btnIcon.png" /></div>
</div>
<div class="close"><img src="img/share/close.png" /></div>
</div>
<div class="tipBox">
暂无链接
</div>
</div>
<!-- <canvas id="canvas"></canvas>
<img src="" class="svgImg" /> -->
</body>
<script src="js/jsMap-1.1.0.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// if($('.wrap').height()<$(window).height()){
// $('.wrap').css('height', $(window).height())
// }else{
// $('.wrap').css('height', 'auto')
// }
// $('.wrap').css('height', $(window).height());
function saveImg() {
$('.mask').fadeIn(500)
$('.maskBox').fadeIn(500)
}
$('.mask .close').on('click', function() {
$('.mask').fadeOut(500)
$('.maskBox').fadeOut(500)
})
$('.bulletBox').on('click','.noHref',function(){
$('.tipBox').fadeIn(500)
setTimeout(function(){
$('.tipBox').fadeOut(500)
},2000)
})
var chooseArr = localStorage.getItem("chooseArr");
console.log(JSON.parse(chooseArr));
var list = JSON.parse(chooseArr)
var cont = '';
$.each(list, function(i, val) {
cont += '<li><p class="title">' + val.cityName + '</p><p class="itemList">'
$.each(val.bName, function(index, name) {
console.log(name)
if(index == val.bName.length - 1) {
cont += name
} else {
cont += name + '、'
}
})
cont += '</p></li>'
})
$('.nameList').html(cont)
var infoNum = '';
var dist = (list[0].bNum / 130) * 100
var bf = dist.toFixed(2);
if(list[0].bNum >= 1 && list[0].bNum <= 5) {
infoNum = '<p>踏足中国<span>' + list.length + '</span>个省区,<span>' + list[0].bNum + '</span>个一级博物馆</p><p>超越了<span> 82.38%</span>的用户</p>'
}
if(list[0].bNum > 5 && list[0].bNum <= 10) {
infoNum = '<p>踏足中国<span>' + list.length + '</span>个省区,<span>' + list[0].bNum + '</span>个一级博物馆</p><p>超越了<span>85.68%</span>的用户</p>'
}
if(list[0].bNum > 10 && list[0].bNum <= 15) {
infoNum = '<p>踏足中国<span>' + list.length + '</span>个省区,<span>' + list[0].bNum + '</span>个一级博物馆</p><p>超越了<span>90.18%</span>的用户</p>'
}
if(list[0].bNum > 15 && list[0].bNum <= 20) {
infoNum = '<p>踏足中国<span>' + list.length + '</span>个省区,<span>' + list[0].bNum + '</span>个一级博物馆</p><p>超越了<span>96.58%</span>的用户</p>'
}
if(list[0].bNum > 20) {
infoNum = '<p>踏足中国<span>' + list.length + '</span>个省区,<span>' + list[0].bNum + '</span>个一级博物馆</p><p>超越了<span>99.99%</span>的用户</p>'
}
// nameList
$('.numInfo').html(infoNum)
jsMap.config("#container", {
name: "china",
width: 355,
height: 400,
datafill: "#4291DA",
areaName: false,
}, JSON.parse(chooseArr))
// $('.tip').on('click', function() {
$('.deepIcon ').slideToggle(1000)
// })
$('.jsmap-container').click(function(e) {
if(e.target.classList.length == 0 || e.target.classList[0] != 'imgClick') {
$('.leftBwg').slideUp(300)
$('.rightBwg').slideUp(300)
}
})
</script>
<!--<script src="js/share.js?vs=1.0.0." type="text/javascript" charset="utf-8"></script>-->
</html>
Loading…
Cancel
Save