频道栏目
首页 > 程序开发 > web前端 > HTML/CSS > 正文
H5元素周期表
2016-11-04 09:48:00         来源:欣欣博客  
收藏   我要投稿

还记得化学上的元素周期表么,现在是前端时代了呢,咱给来了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;  
            }  
        }  
    }  
}
点击复制链接 与好友分享!回本站首页
上一篇:XML相关案例(无广告视频)
下一篇:DOM对XML的解析处理
相关文章
图文推荐
点击排行

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站