繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > JS和CSS实现的气泡窗口
- Javascript
- javascript下拉框不被选中大类的区别方法
- firefox浏览器下javascript 拖动层效果与原理分析代码
- javascript 常用关键字列表集合
- [原创]后缀就扩展名为js的文件是什么文件
- 初学JS的的小例子 javascript replace高亮替换
- 项目实践之javascript技巧
- 不间断滚动JS打包类，基本可以实现所有的滚动效果，太强了
- javascript数组使用调用方法汇总
- JS的递增/递减运算符和带操作的赋值运算符的等价式
- JavaScript开发时的五个注意事项
- js中将多个语句写成一个语句的两种方法小结
- javascript while语句和do while语句的区别分析
- 带参数的function 的自运行效果代码
- 看了就知道什么是JSON
- js模拟实现Array的sort方法
- JavaScript创建命名空间(namespace)的最简实现
- 文本链接逐个出现的js脚本
- 我见过最全的个人js加解密功能页面
- CLASS_CONFUSION JS混淆 全源码
- javascript轻松控制表格列样式的脚本代码
Javascript 中的 JS和CSS实现的气泡窗口
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-28 浏览: 398 ::
收藏到网摘: n/a
普通的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> <!--填入正确的js文件地址-->
<script type="text/javascript" src="/js/sweetTitles.js"></script> <!--填入正确的js文件地址-->
<script type="text/javascript" src="/js/sweetTitles.js"></script> <!--填入正确的js文件地址-->
然后在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;
}
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)";
this.tip.style.filter = "alpha(opacity:80)";
评论 (0) All
