效果演示

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>