本次文章是一个简单的在图片上悬停弹出文字介绍的方法。

先制作图片列表和介绍文字

先将图片的列表制作好,图片的高是 130 px,我给图片框设置 160 px的高度,下方的 30 px用来放入一个简略的文字介绍。

插图1

给图片下方添加a标签,添加相应的介绍文字,并设置 CSS 代码:

于是每个图片的下方就有了简介的文字。
插图2

实现文字介绍的出现

其实文字也是写在图片后的 a 标签内的,设置了行高和父盒子的大小之后,就只有第一行出现在图片下方。

那么,如果想让第一张图片下方的介绍文字出现,可以给 a 标签设置 onmouseover 的时候 CSS 的 top:0 即可,移出时 top:130px

为每个图片都实现文字介绍的弹出效果

通过找到每张图片的索引,就可以为每次移动到相应图片时,该文字对应索引的 a 标签介绍文字的弹出了,改写上方的 JavaScript 代码即可:

结论

现在,每滑过一张照片,相应图片的介绍文字就弹出了,为了美观起见,记得设置 opacity: 0.8 不透明度哦!

发表评论

电子邮件地址不会被公开。 必填项已用*标注