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>
运行代码
机器瞎学/数据掩埋/模式混淆/人工智障/深度遗忘/神经掉线/计算机幻觉/专注单身二十五年
查看全文
相关阅读:
蓝屏代码stop:0X000000EA(0X85E286B8,0X8635F210,0XF7A53CBC,0X00000001)
SAP HR 复制PA30的人员
ABAP OO 开发语法整理
ABAP制作密码输入框
Basis 基础
Excel 文件下载
SAP 锁机制
SE16传输配置表数据
FastAdmin bootstrap-table 分页手动输入跳转
FastAdmin 的 url 有一个 ref=addtabs 是怎么添加的?
原文地址:https://www.cnblogs.com/rubylouvre/p/1661291.html
最新文章
安装express 出现 错误
nodejs 路径
nodejs模块——目录操作
nodejs模块——fs模块 使用fs.write读文件
nodejs模块——fs模块 使用fs.read读文件
【BZOJ2527】[Poi2011]Meteors 整体二分
【BZOJ2127】happiness 最小割
【BZOJ2039】[2009国家集训队]employ人员雇佣 最小割
【BZOJ3798】特殊的质数 分块打表
【BZOJ3931】[CQOI2015]网络吞吐量 最大流
热门文章
【BZOJ4027】[HEOI2015]兔子与樱花 贪心
【BZOJ1189】[HNOI2007]紧急疏散evacuate 动态加边网络流
【BZOJ4827】[Hnoi2017]礼物 FFT
【BZOJ4503】两个串 FFT
【BZOJ4259】残缺的字符串 FFT
【BZOJ3527】[Zjoi2014]力 FFT
【BZOJ2194】快速傅立叶之二
【BZOJ2179】FFT快速傅立叶
【BZOJ2259】[Oibh]新型计算机 最短路
【BZOJ2208】[Jsoi2010]连通数 DFS
Copyright © 2011-2022 走看看