H5元素周期表


還記得化學上的元素周期表么,現在是前端時代了呢,咱給來了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~~完工


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com