双11上云狂欢,0.5折起爆品开抢
Logo

博客

sdf

两年前在pro.html.it的时候,我写了一篇关于如何使用纯CSS和少量的DOM树来动态确定标题框的文章。最近我在玩一个新技术:使用Javascript+CSS去实现那些以前单纯使用Javascript做脚本或者单纯使用CSS做设计的技术。这个星期关于链接冒泡的新文章在Pro站上得到了发表。

链接冒泡其实非常容易实现,工作机制也很简单:

1.检查DOM
2.如果找到关于链接的信息,title,href等就被传递给DOM树
3.当鼠标滑过时,含有链接相关信息的气泡(CSS设定格式)显示出来。

很简单不是吗?不仅工作机制很简单,就连代码以及需要的文件也很简单:
1.一个不足2kb的Javascript文件
2.一个设定样式的CSS
3.一张设定形状的Gif
4.网页文件部分四行HTML
JS文件,CSS文件以及图片只要复制到同一个目录下面,不需要做任何修改,就可以正常使用了。网页部分的代码如下:
<script type="text/javascript" src="bubbletooltips.js"></script>
<script type="text/javascript">
window.onload=function(){enableTooltips("content")};/*content是div的ID*/
</script>

HTML的代码:
<span class="tooltip">
<span class="top">链接的title</span>
<b class="bottom">链接的URL,最多30个字符</b>
</span>

CSS也非常简单:(代码如下)
.tooltip,.tooltip*{display:block}/*由JS添加*/
.tooltip{width:200px;color:#000;font:lighter 11px/1.3 arial,sans-serif;text-decoration:none;text-align:center}
.tooltip span.top{padding:30px 8px 0;background:url(bt.gif) no-repeat top}
.tooltip b.bottom{padding:3px 8px 15px;color:#548912;background:url(bt.gif) no-repeat bottom}

JS的文件实在是太多行了,我就直接给出文件download .

好了,废话少说,大家自己去ENJOY这其中的乐趣吧!

我给出地址整个实例的下载地址:http://shxy.hrbu.edu.cn/ajax/demo/bubble.rar

2,296 阅读

最新发布

13 天前
OBS 自动切换场景 93 次阅读
26 天前
Channel was closed. 61 次阅读
29 天前

大家在看

避免把网页放在框架中 发布于 14 年前
2287 次阅读
1953 次阅读
5660 次阅读