非常流行的所谓的气泡窗口
作者 佚名技术
来源 CSS技术
浏览
发布时间 2012-03-05
普通的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)"; |
凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务,公司网站:http://www.lingzhong.cn 为了给广大客户了解更多的技术信息,本技术文章收集来源于网络,凌众科技尊重文章作者的版权,如果有涉及你的版权有必要删除你的文章,请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢! |
你可能对下面的文章感兴趣
上一篇: CSS框架的利与弊(上)下一篇: 小技巧:网页制作中段落缩进的方法
关于非常流行的所谓的气泡窗口的所有评论