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 {
                width: 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;
                width: 5px;
                height: 5px;
                margin: 0;
                padding: 0;
                border: 0;
                list-style-type: none;
            }
        </style> 
    </head> 
    <body> 
        <div ></div> 
        <ul ></ul> 
        <div ></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>