|
|
<!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>
|
