手机
当前位置:查字典教程网 >网页设计 > Div+Css教程 >非常流行的所谓的气泡窗口
非常流行的所谓的气泡窗口
摘要:普通的Alt无法自定义风格,而SweetTitles通过JS脚本与CSS的集合.自定义了这种伪Alt风格.前一段时间非常流行的,就所谓的气泡...

普通的Alt无法自定义风格,而Sweet Titles通过JS脚本与CSS的集合.自定义了这种伪Alt风格.

前一段时间非常流行的,就所谓的气泡窗口(鼠标移到链接处出现的).

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

先下载Sweet Titles的插件(http://www.dustindiaz.com/sweet-titles).

在页面Body处插入如下:

<script type="text/javascript" src="/js/addEvent.js"></script> <>

<script type="text/javascript" src="/js/sweetTitles.js"></script> <>

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

body div#toolTip { position:absolute;

z-index:1000;

width:220px; /*气泡窗口最大宽度.*/

background:#000; /*气泡窗口背景颜色.*/

border:2px double #fff; /*气泡框边缘线粗细,线的类型以及颜色.*/

text-align:left;

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)";

【非常流行的所谓的气泡窗口】相关文章:

CSS网页布局的技巧

表格列表偶数列、奇数列的CSS样式示例

CSS UL LI布局实现表格效果

十套非常漂亮的CSS3按钮样式 无需图片

IE9下DIV本来应该居中的结果显示为居左

网页中用于构造图表的一些基本CSS代码

谈CSS的标准和最佳示例-Div+CSS教程

css实现强制不换行/自动换行/强制换行

纯CSS绘制三角形箭头效果

CSS3边框-边框颜色(border-color)

精品推荐
分类导航