核心提示：还记得化学上的元素周期表么，现在是前端时代了呢，咱给来了H5周期表学学HTML5吧~~先看一下效果喽，还是比较方便的哦~~ 吼吼来共享一下代码吧~~!DOCTYPE htmlhtmlheadmeta ...
还记得化学上的元素周期表么，现在是前端时代了呢，咱给来了H5周期表学学HTML5吧~~
先看一下效果喽，还是比较方便的哦~~
吼吼来共享一下代码吧~~
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>H5周期表--来自欣欣博客</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
<script src="js/labeltable.js"></script>
</head>
<body>
<p class="main">
<table>
<tr>
<td class="htmlColor">html</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="tableColor">col</td>
<td class="tableColor">table</td>
</tr>
<tr>
<td class="headColor">head</td>
<td class="inlineColor">span</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="blockColor">p</td>
<td class="formColor">fieldset</td>
<td class="formColor">form</td>
<td class="titleColor">body</td>
<td class="titleColor">h1</td>
<td class="titleColor">section</td>
<td class="tableColor">colgroup</td>
<td class="tableColor">tr</td>
</tr>
<tr>
<td class="headColor">title</td>
<td class="inlineColor">a</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="blockColor">pre</td>
<td class="formColor">meter</td>
<td class="formColor">select</td>
<td class="titleColor">aside</td>
<td class="titleColor">h2</td>
<td class="titleColor">header</td>
<td class="tableColor">caption</td>
<td class="tableColor">td</td>
</tr>
<tr>
<td class="headColor">meta</td>
<td class="inlineColor">rt</td>
<td class="inlineColor">dfn</td>
<td class="inlineColor">em</td>
<td class="inlineColor">i</td>
<td class="inlineColor">small</td>
<td class="inlineColor">ins</td>
<td class="inlineColor">s</td>
<td class="blockColor">br</td>
<td class="blockColor">p</td>
<td class="blockColor">blockquote</td>
<td class="formColor">legend</td>
<td class="formColor">optgroup</td>
<td class="titleColor">address</td>
<td class="titleColor">h3</td>
<td class="titleColor">nav</td>
<td class="menuColor">menu</td>
<td class="tableColor">th</td>
</tr>
<tr>
<td class="headColor">base</td>
<td class="inlineColor">rp</td>
<td class="inlineColor">abbr</td>
<td class="inlineColor">time</td>
<td class="inlineColor">b</td>
<td class="inlineColor">strong</td>
<td class="inlineColor">del</td>
<td class="inlineColor">kbd</td>
<td class="blockColor">hr</td>
<td class="blockColor">ol</td>
<td class="blockColor">dl</td>
<td class="formColor">label</td>
<td class="formColor">option</td>
<td class="formColor">datalist</td>
<td class="titleColor">h4</td>
<td class="titleColor">acticle</td>
<td class="menuColor">command</td>
<td class="tableColor">tbody</td>
</tr>
<tr>
<td class="headColor">link</td>
<td class="headColor">noscript</td>
<td class="inlineColor">q</td>
<td class="inlineColor">var</td>
<td class="inlineColor">sub</td>
<td class="inlineColor">mark</td>
<td class="inlineColor">bdi</td>
<td class="inlineColor">wbr</td>
<td class="blockColor">figcaption</td>
<td class="blockColor">ul</td>
<td class="blockColor">dt</td>
<td class="formColor">input</td>
<td class="formColor">output</td>
<td class="formColor">keygen</td>
<td class="titleColor">h5</td>
<td class="titleColor">footer</td>
<td class="menuColor">summary</td>
<td class="tableColor">thead</td>
</tr>
<tr>
<td class="headColor">style</td>
<td class="headColor">script</td>
<td class="inlineColor">cite</td>
<td class="inlineColor">samp</td>
<td class="inlineColor">sup</td>
<td class="inlineColor">ruby</td>
<td class="inlineColor">bdo</td>
<td class="inlineColor">code</td>
<td class="blockColor">figure</td>
<td class="blockColor">li</td>
<td class="blockColor">dd</td>
<td class="formColor">textarea</td>
<td class="formColor">button</td>
<td class="formColor">progress</td>
<td class="titleColor">h6</td>
<td class="titleColor">hgroup</td>
<td class="menuColor">details</td>
<td class="tableColor">tfoot</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="inlineBlockColor">img</td>
<td class="inlineBlockColor">area</td>
<td class="inlineBlockColor">map</td>
<td class="inlineBlockColor">embed</td>
<td class="inlineBlockColor">object</td>
<td class="inlineBlockColor">param</td>
<td class="inlineBlockColor">source</td>
<td class="inlineBlockColor">iframe</td>
<td class="inlineBlockColor">canvas</td>
<td class="inlineBlockColor">track</td>
<td class="inlineBlockColor">audio</td>
<td class="inlineBlockColor">video</td>
</tr>
</table>
</p>
<p class="info">
<h3></h3>
<p></p>
<a href="###">Mozilla,W3C Reference</a>
</p>
<p class="end">
<ul>
<li><span class="htmlColor"></span>根元素</li>
<li><span class="headColor"></span>元数据和脚本</li>
<li><span class="inlineBlockColor"></span>嵌入式内容</li>
</ul>
<ul>
<li><span class="inlineColor"></span>文本级别语义</li>
<li><span class="blockColor"></span>组合内容</li>
</ul>
<ul>
<li><span class="formColor"></span>表单</li>
<li><span class="titleColor"></span>文档章节</li>
</ul>
<ul>
<li><span class="tableColor"></span>表格数据</li>
<li><span class="menuColor"></span>交互元素</li>
</ul>
</p>
</body>
</html>
$(function(){
var $td = $("td");
var $info = $(".info");
var data;
$.ajax({
type:"get",
url:"js/elements.json",
async:true,
success:function(d){
data = d;
}
});
$td.mouseenter(function(e){
$(this).mousemove(function(e){
mousex = e.clientX;
mousey = e.clientY;
var $tdCont = $(this).text();
if($tdCont!= ""){
$(this).addClass("active");
}
for(var attr in data){
var title = data[attr].name;
if(title == $tdCont){
$info.css("display","block");
$info.find("h3").html("<"+title+">");
$info.find("p").html(data[attr].value);
if(mousex > ($(window).width()- $info.width()-10)){
$info.offset({left:mousex - $info.width()-10,top:mousey+10})
}else{
$info.offset({left:mousex +10,top:mousey+10})
}
}
}
})
})
$td.mouseleave(function(){
$(this).removeClass("active");
$info.hide();
})
})
json文件：
[
{"name":"html","value":"Document root element.<br>文档根元素","type":"html"},
{"name":"col","value":"Columns in a table.<br>表格中的列","type":"table"},
{"name":"table","value":"Table of multi-dimensional data.<br>表格","type":"table"},
{"name":"head","value":"First element of the HTML document. Contains document metadata.<br>HTML文档中的第一个元素。包含文档元数据","type":"head"},
{"name":"span","value":"Container with no semantic meaning.<br>无语义的容器","type":"inline"},
{"name":"p","value":"Container with no semantic meaning.<br>无语义的容器","type":"block"},
{"name":"fieldset","value":"Set of form controls grouped by theme.<br>按用途组合的一组表单控制元素","type":"form"},
{"name":"form","value":"Form.<br>表单","type":"form"},
{"name":"body","value":"Document content.<br>文档的主体","type":"title"},
{"name":"h1","value":"Heading for the current section.<br>当前章节的标题","type":"title"},
{"name":"h2","value":"Heading for the current section.<br>当前章节的标题","type":"title"},
{"name":"h3","value":"Heading for the current section.<br>当前章节的标题","type":"title"},
{"name":"h4","value":"Heading for the current section.<br>当前章节的标题","type":"title"},
{"name":"h5","value":"Heading for the current section.<br>当前章节的标题","type":"title"},
{"name":"h6","value":"Heading for the current section.<br>当前章节的标题","type":"title"},
{"name":"section","value":"Contains elements grouped by theme, for example a chapter or tab box.<br>包含同主题一组元素的容器，例如文档的章节","type":"title"},
{"name":"colgroup","value":"Defines a group of columns in a table.<br>对表格中的若干列进行组合","type":"table"},
{"name":"tr","value":"A row of cells.<br>表格中的一行单元","type":"table"},
{"name":"title","value":"Document title.<br>文档标题","type":"head"},
{"name":"a","value":"Hyperlink.<br>超链接","type":"inline"},
{"name":"pre","value":"Text that is preformatted in the HTML code.<br>在HTML代码中预先格式化的文本","type":"block"},
{"name":"meter","value":"Control for entering a numeric value in a known range.<br>控制在已知范围内输入度量值","type":"form"},
{"name":"select","value":"Control for selecting from multiple options.<br>有多选值的下拉列表","type":"form"},
{"name":"aside","value":"Content related to surrounding elements that doesn't belong inline, such as a advertising or quotes.<br>与周围元素相关的内容，但分开显示","type":"title"},
{"name":"h","value":"Heading for the current section.<br>当前章节的标题","type":"title"},
{"name":"header","value":"Navigation or introductory elements for the current section.<br>当前章节的导航或引导性元素","type":"title"},
{"name":"caption","value":"Title of a table.<br>表格的标题","type":"table"},
{"name":"td","value":"Table cell.<br>表格单元格","type":"table"},
{"name":"meta","value":"Document metadata that can't be represented with other elements.<br>文档的元数据","type":"head"},
{"name":"rt","value":"Annotation of preceding text.<br>文本的解释","type":"inline"},
{"name":"dfn","value":"Term being defined by the parent section.<br>由父级章节定义的项","type":"inline"},
{"name":"em","value":"Text that should be emphasised.<br>需要强调的文本","type":"inline"},
{"name":"i","value":"Text in a alternate voice or mood, such as a technical term.<br>斜体的文本","type":"inline"},
{"name":"small","value":"An aside, such as fine print.<br>更小的旁注信息","type":"inline"},
{"name":"ins","value":"Text that has been inserted during document editing.<br>在文档编辑过程中插入的文本","type":"inline"},
{"name":"s","value":"Text that is outdated or no longer accurate.<br>失效或不再准确的文本","type":"inline"},
{"name":"br","value":"Line break.<br>换行符","type":"block"},
{"name":"p","value":"Paragraph content.<br>段落内容","type":"block"},
{"name":"blockquote","value":"Quote from another source.<br>从其它源引用的内容","type":"block"},
{"name":"legend","value":"Define a name for a fieldset.<br>图例或表的说明","type":"form"},
{"name":"optgroup","value":"Group of option.<br>选项组","type":"form"},
{"name":"address","value":"Contact information for the current article.<br>当前文章的联系信息","type":"title"},
{"name":"h","value":"Heading for the current section.<br>当前章节的标题","type":"title"},
{"name":"nav","value":"Contains a collection of links.<br>导航链接的容器","type":"title"},
{"name":"menu","value":"Set of commands.<br>菜单列表","type":"menu"},
{"name":"th","value":"Table heading.<br>表头","type":"table"},
{"name":"base","value":"Specifies URL which non-absolute URLs are relative to.<br>定义非绝对的链接地址所相对的默认 URL","type":"head"},
{"name":"rp","value":"Contains semantically meaningless markup for browsers that don't understand ruby annotations.<br>针对不支持ruby 注音的浏览器，用于注释信息","type":"inline"},
{"name":"abbr","value":"Abbreviation or acronym.<br>缩写或缩略词","type":"inline"},
{"name":"time","value":"Time defined in a machine readable format.<br>时间","type":"inline"},
{"name":"b","value":"Stylistically separated text of equal importance, such as a product name.<br>粗体文本，用于强调","type":"inline"},
{"name":"strong","value":"Text that is important.<br>重要的文本","type":"inline"},
{"name":"del","value":"Text that has been removed during document editing.<br>在编辑过程中被删除的文本","type":"inline"},
{"name":"kbd","value":"Example input (usually keyboard) for a program.<br>由键盘输入的文本","type":"inline"},
{"name":"hr","value":"Thematic break within a paragraph.<br>水平线/内容主题的变化","type":"block"},
{"name":"ol","value":"Ordered list.<br>有序列表","type":"block"},
{"name":"dl","value":"List of term-description pairs.<br>带定义的列表","type":"block"},
{"name":"label","value":"Caption for a form control.<br>表单控件的标题（标签）","type":"form"},
{"name":"option","value":"Single option within a select control.<br>下拉列表中的单一选项","type":"form"},
{"name":"datalist","value":"Define sets of options.<br>定义选项列表","type":"form"},
{"name":"h","value":"Heading for the current section.<br>当前章节的标题","type":"title"},
{"name":"article","value":"Section of the page content, such as a blog or forum post.页面内容的独立部分，如博客文章、论坛帖子","type":"title"},
{"name":"command","value":"Command the user can perform, such as publishing an article.<br>用户可以执行的命令，如发表一篇文章","type":"menu"},
{"name":"tbody","value":"Contains rows that hold the table's data.<br>表格主体","type":"table"},
{"name":"link","value":"Other resources related to the document.<br>与文档相关的其它资源","type":"head"},
{"name":"noscript","value":"Contains elements that are part of the document only if scripting is disabled.<br>当脚本被禁用时显示的一部分文档内容","type":"head"},
{"name":"q","value":"Quoted text.<br>引用的文本","type":"inline"},
{"name":"var","value":"Mathematical or programming variable.<br>数学或程序变量","type":"inline"},
{"name":"sub","value":"Subscript text.<br>上标","type":"inline"},
{"name":"mark","value":"Text highlighted for referencing elsewhere.<br>突出显示的文本","type":"inline"},
{"name":"bdi","value":"Text that is separated from directional formatting of its surroundings.<br>从周围内容分开，而设置不同的文本方向","type":"inline"},
{"name":"wbr","value":"Opportunity for a line break.<br>软回车（必要时才回车）","type":"inline"},
{"name":"figcaption","value":"Caption for a figure.<br>图片的标题，图题","type":"block"},
{"name":"ul","value":"Unordered list.<br>无序列表","type":"block"},
{"name":"dt","value":"Term which will be described.<br>带定义的列表中的项目","type":"block"},
{"name":"input","value":"Generic form input.<br>表单中的输入字段","type":"form"},
{"name":"output","value":"Contains the results of a calculation.<br>输出的结果","type":"form"},
{"name":"keygen","value":"Generates private-public key pairs.<br>生成密钥对","type":"form"},
{"name":"h","value":"eading for the current section.<br>当前章节的标题","type":"title"},
{"name":"footer","value":"Footer of the current section.<br>当前章节的页脚","type":"title"},
{"name":"summary","value":"Caption of a details element.<br>dedails元素的标题","type":"menu"},
{"name":"thead","value":"Contains rows with table headings.<br>表格中的表头行","type":"table"},
{"name":"style","value":"Styling defined inline data.<br>在文档中定义的样式","type":"head"},
{"name":"script","value":"Inline or linked client side scripts.<br>内部或外部链接的脚本","type":"head"},
{"name":"cite","value":"Title of a referenced piece of work.<br>对参考文献等的引用","type":"inline"},
{"name":"samp","value":"Sample output of a program.<br>程序的样本","type":"inline"},
{"name":"sup","value":"Superscript text.<br>下标","type":"inline"},
{"name":"ruby","value":"Contains text with annotations, such as pronounciation hints. Commonly used in East Asian text.<br>东亚文字的注音，如中文的拼音","type":"inline"},
{"name":"bdo","value":"Defines directional formatting for content.<br>定义内容的排版方向","type":"inline"},
{"name":"code","value":"Fragment of code.<br>代码的片断","type":"inline"},
{"name":"figure","value":"Contains elements related to single concept, such as an illustration or code example.<br>独立的内容，如图像、代码等","type":"block"},
{"name":"li","value":"List item.<br>列表项目","type":"block"},
{"name":"dd","value":"Description for the preceding term.<br>带定义列表中对项目的描述","type":"block"},
{"name":"textarea","value":"Multiline free-form text input.<br>多行的文本输入区域","type":"form"},
{"name":"button","value":"A button.<br>按钮","type":"form"},
{"name":"progress","value":"Control for displaying progress of a task.<br>运行中的进度控制","type":"form"},
{"name":"h","value":"Heading for the current section.<br>当前章节的标题","type":"title"},
{"name":"hgroup","value":"Collection of headings for the current section. The highest ranked heading represents the group in the document outline.<br>当前章节各标题的组合","type":"title"},
{"name":"details","value":"Contains additional information, such as the contents of an accordian view.<br>附加的详细信息","type":"menu"},
{"name":"tfoot","value":"Contains rows with summary of data.<br>表格的页脚/脚注行","type":"table"},
{"name":"img","value":"An image.<br>图像","type":"inlineBlock"},
{"name":"area","value":"Hyperlink area in an image map.<br>图像映射的超链接区域","type":"inlineBlock"},
{"name":"map","value":"Image map for adding hyperlinks to parts of an image.<br>在图像的一部分区域定义图像映射用于添加超链接","type":"inlineBlock"},
{"name":"embed","value":"Reference to non-HTML content.<br>嵌入的非HTML内容","type":"inlineBlock"},
{"name":"object","value":"External resource such as an image, iframe or plugin.<br>嵌入的外部资源，如图像、iframe或插件","type":"inlineBlock"},
{"name":"param","value":"Parameters for the parent object.<br>父级对象的参数","type":"inlineBlock"},
{"name":"source","value":"Alternative sources for parent video or audio elements.<br>父级视频或音频元素的资源","type":"inlineBlock"},
{"name":"iframe","value":"Nested browser frame.<br>嵌套的框架","type":"inlineBlock"},
{"name":"canvas","value":"Bitmap which is editable by client side scripts.<br>可以通过客户端脚本编辑的图形（画布）","type":"inlineBlock"},
{"name":"track","value":"Specifies external timing track for media elements.<br>媒体类元素的外部轨道","type":"inlineBlock"},
{"name":"audio","value":"Audio file.<br>音频文件","type":"inlineBlock"},
{"name":"video","value":"Video.<br>视频","type":"inlineBlock"}
]
scss
$labelWidth:52px;
$fontSize:12px;
$htmlColor:#81d183;
$headColor:#6575d3;
$inlineColor:#d1d157;
$blockColor:#d17d47;
$formColor:#55d157;
$titleColor:#8591d3;
$tableColor:#d17d57;
$menuColor:#d1d1d3;
$inlineBlockColor:#d17dd3;
html{
font-family: "microsoft yahei";
}
body{
width: 100%;
height:100%;
overflow: hidden;
background:#1C1D26;
}
li{list-style: none;color: #fff;}
.main{
margin:50px 0;
}
.active{
opacity: 1;
box-shadow: 1px 1px 5px #fff ;
}
a{
text-decoration: none;
color:#FF8215 ;
}
.info{
background:#fff;
box-shadow: 1px 1px 5px #000;
width: auto;
float: left;
padding: 10px;
border-radius: 10px;
position: absolute;
display: none;
}
table{
border: 0;
margin: 0 auto;
tr{
td{
width:$labelWidth;
height:$labelWidth;
border-radius: 10px;
text-align: center;
border:none;
font-size: $fontSize;
word-break: break-all;
opacity: 0.7;
position: relative;
}
}
}
.htmlColor{
background:$htmlColor;
}
.tableColor{
background:$tableColor;
}
.headColor{
background: $headColor;
}
.inlineColor{
background:$inlineColor;
}
.titleColor{
background:$titleColor;
}
.blockColor{
background: $blockColor;
}
.formColor{
background: $formColor;
}
.menuColor{
background: $menuColor;
}
.inlineBlockColor{
background: $inlineBlockColor;
}
.end{
margin-top:100px;
ul{
float: left;
margin-right: 100px;
li{
height:30px;
span{
display: block;
width:20px;
height:20px;
border-radius: 2px;
float:left;
margin-right: 10px;
}
}
}
}
