趁寒假学习一下HTML,丰富一下笔者的技能范围=。=
效果演示
MyGhost.gif
制作准备
html编写软件-笔者用的是Hbuilder
一个js文件,可以在这里下载( 访问密码 3385)
开始制作
新建一个web项目,名称为MyGhost:
截图00.png
页面div布局
布局代码如下
主要是利用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 属性在线查询: 查询
笔者能帮你的就这么多了,能不能做出来就看造化 =。=