会员登录/控制面版您的位置: 学院首页 >> 网站开发 >> JavaScript >> 文章内容

JS和CSS实现的气泡窗口

日期：2008-01-25 人气：出处：本站收集整理作者:

字体大小:
小
中
大

普通的Alt无法自定义风格,而Sweet Titles通过JS脚本与CSS的集合.自定义了这种伪Alt风格.
前一段时间非常流行的,就所谓的气泡窗口(鼠标移到链接处出现的).

我们这里实现的用的是Sweet Titles的插件.显示效果完全由CSS控制..

先下载Sweet Titles的插件（http://www.dustindiaz.com/sweet-titles）.
在页面Body处插入如下:

然后在CSS文件里添加如下:

body div#toolTip { position:absolute;
z-index:1000;
width:220px; /*气泡窗口最大宽度.*/
background:#000; /*气泡窗口背景颜色.*/
border:2px double #fff; /*气泡框边缘线粗细,线的类型以及颜色.*/
text-align:left;

Webjx.Com

padding:5px;
min-height:2em;
-moz-border-radius:5px; /*FireFox专用,用来圆弧划边缘的四角.*/
}

body div#toolTip p {
margin:0;
padding:0;
color:#fff; /*说明文字颜色*/
font:11px/12px verdana,arial,sans-serif;
}

body div#toolTip p em {
display:block;
margin-top:3px;
color:#f60; /*地址文字颜色*/
font-style:normal;
font-weight:bold;
}

body div#toolTip p em span {
font-weight:bold;
color:#fff;
}

注:可以通过修改sweetTitles.js文件里的opacity参数调整气泡框的透明度.默认为80..

this.tip.style.opacity = '.80';
this.tip.style.filter = "alpha(opacity:80)";

精彩推荐

本类推荐文章

本类阅读排行

JS和CSS实现的气泡窗口

相关文章

相关软件

网友评论: