十分时兴的所谓的气泡对话框

日期:2020-09-30 类型:科技新闻 

关键词:免费自助建站,手机建站平台,wap建站,免费自助建站平台,H5网站,H5模板建站

一般的Alt没法自定设计风格,而Sweet Titles根据JS脚本制作与CSS的结合.自定了这类伪Alt设计风格.
前1段時间十分时兴的,就所谓的气泡对话框(电脑鼠标移到连接处出現的).
大家这里完成的用的是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专用,用来圆弧划边沿的4角.*/
}
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)";