哪位高手能提供一个漂亮的网页气泡提示框特效
日期：2014-05-17 浏览次数：20770 次
谁能提供一个漂亮的网页气泡提示框特效
如题，就是类似于windows xp的系统托盘处有时会出现的那种气泡提示效果，用的圆角矩形，而且下面有一个三角箭头，带阴影效果，里面可以有超链接和图片什么的，不需要淡入淡出
在google地图里也有这样的效果。当你的鼠标移到一个超链接时，就会弹出这个气泡提示这个链接的详细内容，鼠标移走后就消失
我希望在提示框里能够显示超链接和图片，而且提示框的边框可以是不规则的形状（比如带一个向下的箭头），这些是IE 里的 Popup 做不到的
------解决方案--------------------
这种效果我看到过的，很漂亮。简单的出现提示框比较好做，如果要出现一个箭头这个样子就比较复杂一点。
刚刚尝试作了一个，代码贴给你看看。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN " "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns= "http://www.w3.org/1999/xhtml ">
<head>
<meta http-equiv= "Content-Type " content= "text/html; charset=utf-8 " />
<title> 无标题文档 </title>
<style type= "text/css ">
a.tip{
color:red;
text-decoration:none;
position:relative;
}
a.tip .popbox{
display:none;
}
a.tip:hover{
cursor:pointer;/*由于IE对hover伪对象支持不完善，设置了cursor:hand 才能正常显示*/
}
a.tip:hover .popbox{
display:block;
position:absolute;
top:-240px;
left:-30px;
width:226px;
height:242px;
color:#000000;
background-image:url( '背景图片.gif ');
background-repeat:no-repeat;
padding:0px;
margin:0px;
border:0px;
}
body{
}
</style>
</head>
<body>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> 鼠标放到 <a href= "# " class= "tip "> CSS <span class= "popbox "> 这里放一张图片 <img src= "草原.jpg " width= "60px " height= "60px " border= "0px "/> <br/> Cascading Style Sheets 层叠样式表 </span> </a>
这个超链接上，可以看到一个提示框
</p>
</p>
</body>
</html>
------解决方案--------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN " "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd ">
<html xmlns= "http://www.w3.org/1999/xhtml ">
<head>
<meta http-equiv= "Content-Type " content= "text/html; charset=utf-8 " />
<title> Simplified Sliding Doors </title>
<style type= "text/css ">
<!--
/* Basic Styling
------------------------------------*/
body {
font: 76%/1.8 "Lucida Grande ", Verdana, Arial, Helvetica, sans-serif;
background-color: #fff;
}
/* mainNav
------------------------------------*/
ul {
margin: 0;
padding: 0;
float: left;
width: 720px;
list-style: none;
text-transform: uppercase;
}
ul li {
float: left;
background: url(tab-right.gif) no-repeat top right;
}
/* Hack to make IE/Mac play nice */
li a {
padding: 0 2em;
line-height: 2.5em;
background: url(tab-left.gif) no-repeat top left;
text-decoration: none;
color: #fff;
float: left;
display: block;
}
ul a:hover {
color: #333;
}
-->
</style>
</head>
&
如题，就是类似于windows xp的系统托盘处有时会出现的那种气泡提示效果，用的圆角矩形，而且下面有一个三角箭头，带阴影效果，里面可以有超链接和图片什么的，不需要淡入淡出
在google地图里也有这样的效果。当你的鼠标移到一个超链接时，就会弹出这个气泡提示这个链接的详细内容，鼠标移走后就消失
我希望在提示框里能够显示超链接和图片，而且提示框的边框可以是不规则的形状（比如带一个向下的箭头），这些是IE 里的 Popup 做不到的
------解决方案--------------------
这种效果我看到过的，很漂亮。简单的出现提示框比较好做，如果要出现一个箭头这个样子就比较复杂一点。
刚刚尝试作了一个，代码贴给你看看。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN " "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns= "http://www.w3.org/1999/xhtml ">
<head>
<meta http-equiv= "Content-Type " content= "text/html; charset=utf-8 " />
<title> 无标题文档 </title>
<style type= "text/css ">
a.tip{
color:red;
text-decoration:none;
position:relative;
}
a.tip .popbox{
display:none;
}
a.tip:hover{
cursor:pointer;/*由于IE对hover伪对象支持不完善，设置了cursor:hand 才能正常显示*/
}
a.tip:hover .popbox{
display:block;
position:absolute;
top:-240px;
left:-30px;
width:226px;
height:242px;
color:#000000;
background-image:url( '背景图片.gif ');
background-repeat:no-repeat;
padding:0px;
margin:0px;
border:0px;
}
body{
}
</style>
</head>
<body>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> 鼠标放到 <a href= "# " class= "tip "> CSS <span class= "popbox "> 这里放一张图片 <img src= "草原.jpg " width= "60px " height= "60px " border= "0px "/> <br/> Cascading Style Sheets 层叠样式表 </span> </a>
这个超链接上，可以看到一个提示框
</p>
</p>
</body>
</html>
------解决方案--------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN " "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd ">
<html xmlns= "http://www.w3.org/1999/xhtml ">
<head>
<meta http-equiv= "Content-Type " content= "text/html; charset=utf-8 " />
<title> Simplified Sliding Doors </title>
<style type= "text/css ">
<!--
/* Basic Styling
------------------------------------*/
body {
font: 76%/1.8 "Lucida Grande ", Verdana, Arial, Helvetica, sans-serif;
background-color: #fff;
}
/* mainNav
------------------------------------*/
ul {
margin: 0;
padding: 0;
float: left;
width: 720px;
list-style: none;
text-transform: uppercase;
}
ul li {
float: left;
background: url(tab-right.gif) no-repeat top right;
}
/* Hack to make IE/Mac play nice */
li a {
padding: 0 2em;
line-height: 2.5em;
background: url(tab-left.gif) no-repeat top left;
text-decoration: none;
color: #fff;
float: left;
display: block;
}
ul a:hover {
color: #333;
}
-->
</style>
</head>
&
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
