javascript 地图 - 走看看

zoukankan html css js c++ java

javascript 地图

日本人的作品，好可怕的东西，看一下差点晕倒，这也太逆天了！（IE下速度严重拖慢，如果报错，请刷新。）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://bloghighlighter.googlecode.com/files/data2.js" type="text/javascript"></script> <style type="text/css"> #body div { 500px; height: 5px; margin: 0; padding: 0; border: 0; list-style-type: none; } #body div div.data { /* zoom: 1; */ background: #eee; position: absolute; font-size: 0.1px; 5px; height: 5px; margin: 0; padding: 0; border: 0; list-style-type: none; } </style> </head> <body> <div id="body" style="float: left; position: relative"></div> <ul id="data" style="margin-left: 1em; float: left"></ul> <div id="message" style="height: 1em;"></div> <script type="text/javascript"> var body = document.getElementById('body'); var message = document.getElementById('message'); body.onmouseover = function(e) { var evt = (window.event || e); var data = (evt.target || evt.srcElement).className; if (data) { var datas = data.split(' '); message.innerText = message.textContent = datas[3] + ' (' + (30 + +datas[1]) + ', ' + (25 - datas[2]) + ')'; if (colorNameMap[datas[3]]) { selectNation(datas[3], colorNameMap[datas[3]][0]); } } }; body.onmouseout = function(e) { var evt = (window.event || e); var data = (evt.target || evt.srcElement).className; if (data) { var datas = data.split(' '); message.innerText = message.textContent = ''; if (colorNameMap[datas[3]]) { selectNation(datas[3], colorNameMap[datas[3]][1]); } } }; var counter = {}; var elements = {}; for (var i = 0; i < 100; i++) { var ul = document.createElement('div') body.appendChild(ul); for (var j = 0; j < 100; j++) { var li = document.createElement('div') if (data[i][j] != '' && data[i][j] != '-') { counter[data[i][j]] = counter[data[i][j]] || 0; elements[data[i][j]] = elements[data[i][j]] || []; counter[data[i][j]]++; elements[data[i][j]].push(li); li.className = 'data ' + i + ' ' + j + ' ' + data[i][j]; } ul.appendChild(li); var style = li.style; style.left = i * 5 + 'px'; style.top = j * 5 + 'px'; } } var names = []; for (var name in counter) { names.push([name, counter[name]]); } names = names.sort(function(a, b) { return b[1] - a[1]; }); names = names.splice(0, 18); var map = { '魏': -1, 'パロス': -1, 'バグワイプ': -1, 'ラキシス': -0.5, '無双乱舞': 1 }; names = names.sort(function(a, b) { return (map[b[0]] || 0) - (map[a[0]] || 0); }); var dataElm = document.getElementById('data'); var colorNameMap = {}; for (var i = 0; i < 18; i++) { var li = document.createElement('li'); var a = document.createElement('a'); li.appendChild(a); a.innerText = a.textContent = names[i][0] + ': ' + names[i][1]; (function(i) { var rate = 1; if (names[i][0] in map) { rate = 5; } a.style.color = hsvToRGB(i * 15, 1, 0.7); selectNation(names[i][0], hsvToRGB(i * 15, 0.1 * rate, 1)); a.onmouseover = function() { selectNation(names[i][0], hsvToRGB(i * 15, 1, 0.7)) } a.onmouseout = function() { selectNation(names[i][0], hsvToRGB(i * 15, 0.1 * rate, 1)) } colorNameMap[names[i][0]] = [hsvToRGB(i * 15, 1, 0.7), hsvToRGB(i * 15, 0.1* rate, 1)] })(i) dataElm.appendChild(li); } function selectNation(name, color) { var elems = elements[name]; for (var i = 0; i < elems.length; i ++) { elems[i].style.background = color; } } function hsvToRGB(h,s,v) { var colors; if(s === 0) { // GREY colors = {red:v,green:v,blue:v}; } else { h /= 60; var i = Math.floor(h); var f = h - i; var p = v * (1 - s); var q = v * (1 - s * f); var t = v * (1 - s * (1 - f) ); switch(i) { case 0: colors = {red:v, green:t, blue:p}; break; case 1: colors = {red:q, green:v, blue:p}; break; case 2: colors = {red:p, green:v, blue:t}; break; case 3: colors = {red:p, green:q, blue:v}; break; case 4: colors = {red:t, green:p, blue:v}; break; default:colors = {red:v, green:p, blue:q}; break; } } colors.red = Math.ceil(colors.red * 255); colors.green = Math.ceil(colors.green * 255); colors.blue = Math.ceil(colors.blue * 255); return 'rgb(' + colors.red + ', ' + colors.green + ', ' + colors.blue + ')'; } </script> </body> </html>

机器瞎学/数据掩埋/模式混淆/人工智障/深度遗忘/神经掉线/计算机幻觉/专注单身二十五年

查看全文

相关阅读:
ThreadPoolExecutor线程池参数设置技巧
 函数式接口
 Mac下进入MySQL命令行
 Java8 特性
 Java8 :: 用法（JDK8 双冒号用法）
事务传播
 新版IDEA配置tomcat教程（2018）
Java8 Map的compute()方法
 Spring 普通类与工具类调用service层
 简单工厂(三)——JDK源码中的简单工厂

原文地址：https://www.cnblogs.com/rubylouvre/p/1661291.html