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

wutaixih

wutaixih

2016-02-19 16:56

下面图老师小编跟大家分享一个简单易学的非常流行的所谓的气泡窗口教程,get新技能是需要行动的,喜欢的朋友赶紧收藏起来学习下吧!

普通的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文件里添加如下:

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

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;
}

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

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

展开更多 50%)
分享

猜你喜欢

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

Web开发
非常流行的所谓的气泡窗口

利用气泡合成非常梦幻的心形图案

电脑网络
利用气泡合成非常梦幻的心形图案

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

国外近期非常流行的优秀网页设计欣赏

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
国外近期非常流行的优秀网页设计欣赏

PS用气泡合成非常梦幻可爱的心形图案效果教程

PS PS基础 ps平面设计教程 ps去水印教程
PS用气泡合成非常梦幻可爱的心形图案效果教程

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

脚上有脚气泡泡非常痒怎么办?

电脑网络
脚上有脚气泡泡非常痒怎么办?

如何减少尿液中的气泡

电脑网络
如何减少尿液中的气泡

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

JavaScript split() 方法

JavaScript split() 方法

C# Builder WinForm开发入门

C# Builder WinForm开发入门
下拉加载更多内容 ↓