幽灵按钮html透明度,幽灵按钮-HTML5

趁寒假学习一下HTML，丰富一下笔者的技能范围=。=

效果演示

MyGhost.gif

制作准备

html编写软件-笔者用的是Hbuilder

一个js文件，可以在这里下载( 访问密码 3385)

开始制作

新建一个web项目，名称为MyGhost：

截图00.png

页面div布局

布局代码如下

MISSION

PLAY

TOUCH

主要是利用div进行布局，如果你和笔者一样是新手，并不知道上面代码中的标签都是什么含义和作用的话，你可以点击这里来查询你不了解的标签，以快速学习。

编辑CSS样式

首先你需要在项目内的css文件夹下创建文件，并命名为style。然后将网页连接到样式，将下面代码插入到title标签之后：

具体的CSS文件内容的编写笔者不再赘述，若有疑问，可以直接私信笔者进行询问，这里可以用来查询CSS属性的作用，方便学习

js编写

导入js文件(其实就只直接下载文件( 访问密码 3385))，拖入文件夹js就是)，然后在index.html中连接js，将下面代码插入在前文的css后面，效果如图：

然后在类为box的div最后编写js事件：

$(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);//执行位移和动画

})

})

图片

别忘了把你要显示的图片放在img文件夹里面，关于图片哪里去弄的问题，自己找或者在demo里复制吧。

总结

DEMO下载地址：MyGhost (访问密码 9617)

html 标签在线查询：查询

css3 属性在线查询： 查询

笔者能帮你的就这么多了，能不能做出来就看造化 =。=