趁寒假学习一下HTML，丰富一下笔者的技能范围=。=
效果演示
MyGhost.gif
制作准备
- html编写软件-笔者用的是Hbuilder
- 一个js文件，可以在这里下载（ 访问密码 3385）
开始制作
新建一个web项目，名称为MyGhost：
截图00.png
页面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进行布局，如果你和笔者一样是新手，并不知道上面代码中的标签都是什么含义和作用的话，你可以点击这里来查询你不了解的标签，以快速学习。
编辑CSS样式
首先你需要在项目内的css文件夹下创建文件，并命名为style。然后将网页连接到样式，将下面代码插入到title标签之后：
<link rel="stylesheet" type="text/css" href="css/style.css" />
具体的CSS文件内容的编写笔者不再赘述，若有疑问，可以直接私信笔者进行询问，这里可以用来查询CSS属性的作用，方便学习
js编写
导入js文件（其实就只直接下载文件（ 访问密码 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>
然后在类为box的div最后编写js事件：
<script>
$(function(){
$(".link .button").hover(function(){
var title = $(this).attr("data-title"); //获取鼠标经过的按钮的datatitle自定义属性
$(".tip em").text(title); //设置tip下em标签的文本
var pos = $(this).offset().left; //获取按钮外部左边的坐标
//计算位移距离
var dis = ($(".tip").outerWidth() - $(this).outerWidth()) / 2;
var f = pos - dis; //准确位置
$(".tip").css({"left":f+"px"}).animate({"top":195,"opacity":1},300); //执行位移和动画
},function(){ //回调事件，当鼠标离开时调用
$(".tip").animate({"top":160,"opacity":0},300);//执行位移和动画
})
})
</script>
图片
别忘了把你要显示的图片放在img文件夹里面，关于图片哪里去弄的问题，自己找或者在demo里复制吧。
总结
- DEMO下载地址：MyGhost (访问密码 9617)
笔者能帮你的就这么多了，能不能做出来就看造化 =。=
网友评论