趁寒假學(xué)習(xí)一下HTML，豐富一下筆者的技能范圍=。=
效果演示
MyGhost.gif
制作準(zhǔn)備
- html編寫(xiě)軟件-筆者用的是Hbuilder
- 一個(gè)js文件，可以在這里下載（ 訪問(wèn)密碼 3385）
開(kāi)始制作
新建一個(gè)web項(xiàng)目，名稱(chēng)為MyGhost：
截圖00.png
頁(yè)面div布局
布局代碼如下
<body>
<div class="box">
<div class="link link-miss">
<span class="icon"></span>
<a href="#" class="button" data-title="My mission is clear">
<span class="line line-top"></span>
<span class="line line-left"></span>
<span class="line line-right"></span>
<span class="line line-bottom"></span>
MISSION
</a>
</div>
<div class="link link-play">
<span class="icon"></span>
<a href="#" class="button" data-title="This is my playground">
<span class="line line-top"></span>
<span class="line line-left"></span>
<span class="line line-right"></span>
<span class="line line-bottom"></span>
PLAY
</a>
</div>
<div class="link link-touch">
<span class="icon"></span>
<a href="#" class="button" data-title="lets do something together">
<span class="line line-top"></span>
<span class="line line-left"></span>
<span class="line line-right"></span>
<span class="line line-bottom"></span>
TOUCH
</a>
</div>
<div class="tip">
<em> </em>
<span></span>
</div>
</div>
</body>
主要是利用div進(jìn)行布局，如果你和筆者一樣是新手，并不知道上面代碼中的標(biāo)簽都是什么含義和作用的話，你可以點(diǎn)擊這里來(lái)查詢(xún)你不了解的標(biāo)簽，以快速學(xué)習(xí)。
編輯CSS樣式
首先你需要在項(xiàng)目?jī)?nèi)的css文件夾下創(chuàng)建文件，并命名為style。然后將網(wǎng)頁(yè)連接到樣式，將下面代碼插入到title標(biāo)簽之后：
<link rel="stylesheet" type="text/css" href="css/style.css" />
具體的CSS文件內(nèi)容的編寫(xiě)筆者不再贅述，若有疑問(wèn)，可以直接私信筆者進(jìn)行詢(xún)問(wèn)，這里可以用來(lái)查詢(xún)CSS屬性的作用，方便學(xué)習(xí)
js編寫(xiě)
導(dǎo)入js文件（其實(shí)就只直接下載文件（ 訪問(wèn)密碼 3385）)，拖入文件夾js就是），然后在index.html中連接js，將下面代碼插入在前文的css后面，效果如圖：
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="js/jquery-2.1.1.min.js" ></script>
</head>
然后在類(lèi)為box的div最后編寫(xiě)js事件：
<script>
$(function(){
$(".link .button").hover(function(){
var title = $(this).attr("data-title"); //獲取鼠標(biāo)經(jīng)過(guò)的按鈕的datatitle自定義屬性
$(".tip em").text(title); //設(shè)置tip下em標(biāo)簽的文本
var pos = $(this).offset().left; //獲取按鈕外部左邊的坐標(biāo)
//計(jì)算位移距離
var dis = ($(".tip").outerWidth() - $(this).outerWidth()) / 2;
var f = pos - dis; //準(zhǔn)確位置
$(".tip").css({"left":f+"px"}).animate({"top":195,"opacity":1},300); //執(zhí)行位移和動(dòng)畫(huà)
},function(){ //回調(diào)事件，當(dāng)鼠標(biāo)離開(kāi)時(shí)調(diào)用
$(".tip").animate({"top":160,"opacity":0},300);//執(zhí)行位移和動(dòng)畫(huà)
})
})
</script>
圖片
別忘了把你要顯示的圖片放在img文件夾里面，關(guān)于圖片哪里去弄的問(wèn)題，自己找或者在demo里復(fù)制吧。
總結(jié)
- DEMO下載地址：MyGhost (訪問(wèn)密碼 9617)
筆者能幫你的就這么多了，能不能做出來(lái)就看造化 =。=
