H5元素周期表

来源：互联网发布：常用的数据挖掘工具编辑：程序博客网时间：2024/04/27 22:34

还记得化学上的元素周期表么，现在是前端时代了呢，咱给来了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><div 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">div</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></div><div class="info"><h3></h3><p></p><a href="###">Mozilla,W3C Reference</a></div><div 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></div></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":"div","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;            }        }    }}

ok~~完工

1 0