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>
运行代码
机器瞎学/数据掩埋/模式混淆/人工智障/深度遗忘/神经掉线/计算机幻觉/专注单身二十五年
查看全文
相关阅读:
iaas,paas,saas理解
July 06th. 2018, Week 27th. Friday
July 05th. 2018, Week 27th. Thursday
July 04th. 2018, Week 27th. Wednesday
July 03rd. 2018, Week 27th. Tuesday
July 02nd. 2018, Week 27th. Monday
July 01st. 2018, Week 27th. Sunday
June 30th. 2018, Week 26th. Saturday
June 29th. 2018, Week 26th. Friday
June 28th. 2018, Week 26th. Thursday
原文地址:https://www.cnblogs.com/rubylouvre/p/1661291.html
最新文章
Mac,WIN下支撑 IPV6的 sftp客户端
树莓pi快速ssh【校园网】
【idea】移动下载站
制作动态链接库给opencv程序使用(使用QtCreator)
【转】Qt Creator在Windows上的调试器安装与配置
Git 基础
new features and insights for pedestrian detection
杂谈PID控制算法——第二篇:调·三个量
杂谈PID控制算法——第一篇:三个量
请不要做浮躁的嵌入式系统工程师
热门文章
C# 打印出发生错误的文件,方法,代码所在行和列
Toad使用中的快捷键
Oracle 数据库操作;各种记录一下
ArcGIS中的schema
C#下获取当前解决方案的路径
C# 获取当前app的文档对象
java 网络编程 模拟browser
centos搭建本地库
make clean 和make distclean的区别
最近常用的几个单词
Copyright © 2011-2022 走看看