作家
登录

非常流行的所谓的气泡窗口

作者: 来源:www.28hudong.com 2012-11-19 22:48:51 阅读 我要评论

普通的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文件地址--> 然后在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隐藏网页文字的几种常用方法

display:none:它可以使包括容器本身在内的东西都消失,简便且有效,但它有两个耳熟能详的缺陷,那就是对搜索引擎不友好,且被屏幕阅读器所忽略。 text-indent:-9999px:text-indent是首行缩进,所以对于多行文>>>详细阅读


本文标题:非常流行的所谓的气泡窗口

地址:http://www.17bianji.com/kaifa2/CSS/17222.html

关键词: 探索发现

乐购科技部分新闻及文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与乐购科技进行文章共享合作。

网友点评
自媒体专栏

评论

热度

精彩导读
栏目ID=71的表不存在(操作类型=0)