javascript气泡,js气泡特效

AJAX弹出气泡问题

效果非常好的都是flash做的，想用html写基本不可能

如果只是一般的气泡效果css可以实现

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""

html xmlns=""

head

meta http-equiv="Content-Type" content="text/html; charset=gb2312" /

title纯css圆角气泡效果代码/title

/head

style type="text/css"

/* ================================================================

This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html

is available at

Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.

This stylesheet and the assocaited (x)html may be modified in any

way to fit your requirements.

=================================================================== */

/* common styling */

/* Set up the default font and ovrall size to include image */

body {

background: #fff;

font-family: "Lucida Grande", Helvetica, Arial, sans-serif;

font-size: 11px;

}

#container {background:#d8d8ee; width:600px; margin:15px; padding:20px;}

.xsnazzy h1, .xsnazzy h2, .xsnazzy p {margin:0 10px; letter-spacing:1px;}

.xsnazzy h1 {font-size:2.5em; color:#fc0;}

.xsnazzy h2 {font-size:2em; color:#234; border:0;}

.xsnazzy p {padding-bottom:0.5em; color:#eee;}

.xsnazzy h2 {padding-top:0.5em; padding-left:10px;}

.xsnazzy {background: transparent; margin:1em;}

.xsnazzy em {display:block; width:0; height:0; color:#d8d8ee; overflow:hidden; border-top:12px solid #fff; border-left:12px dotted transparent; border-right:12px dotted transparent; margin-left:50px;}

/* hack for IE5.5 */

* html .xsnazzy em {width:24px; height:12px; width:0; height:0;}

.xsnazzy span {display:block; width:0; height:0; color:#fff; overflow:hidden; border-top:10px solid #7f7f9c; border-left:10px dotted transparent; border-right:10px dotted transparent; margin-left:52px; margin-top:-15px;}

* html .xsnazzy span {width:20px; height:10px; width:0; height:0;}

.xb1, .xb2, .xb3, .xb4, .xb5, .xb6, .xb7 {display:block; overflow:hidden; font-size:0;}

.xb1, .xb2, .xb3, .xb4, .xb5, .xb6 {height:1px;}

.xb4, .xb5, .xb6, .xb7 {background:#ccc; border-left:1px solid #fff; border-right:1px solid #fff;}

.xb1 {margin:0 8px; background:#fff;}

.xb2 {margin:0 6px; background:#fff;}

.xb3 {margin:0 4px; background:#fff;}

.xb4 {margin:0 3px; background:#7f7f9c; border-width:0 5px;}

.xb5 {margin:0 2px; background:#7f7f9c; border-width:0 4px;}

.xb6 {margin:0 2px; background:#7f7f9c; border-width:0 3px;}

.xb7 {margin:0 1px; background:#7f7f9c; border-width:0 3px; height:2px;}

.xboxcontent {display:block; background:#7f7f9c; border:3px solid #fff; border-width:0 3px;}

.xboxcontent h2 a{color:#fff; text-decoration:none;}

#picture {width:600px; height:400px; background:url(pic_10h.jpg) center top; padding:80px 20px 0 20px; margin:15px;}

/style

body

div id="container"

div class="xsnazzy"

b class="xb1"/bb class="xb2"/bb class="xb3"/bb class="xb4"/bb class="xb5"/bb class="xb6"/bb class="xb7"/b

div class="xboxcontent"

h2a href=""搜罗精美酷站,提供精选素材！/a/h2

pLorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh

euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim

ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl

ut aliquip ex ea commodo consequat./p

/div

b class="xb7"/bb class="xb6"/bb class="xb5"/bb class="xb4"/bb class="xb3"/bb class="xb2"/bb class="xb1"/b

/div

div class="xsnazzy"

b class="xb1"/bb class="xb2"/bb class="xb3"/bb class="xb4"/bb class="xb5"/bb class="xb6"/bb class="xb7"/b

div class="xboxcontent"

pOr this can be used as a speech bubble with the addition of a little CSS pointer. This does require a careful choice of colors for the foreground, border and background to hide the chunky non-anti aliased corners, and it works with javascript off and images off./p

/div

b class="xb7"/bb class="xb6"/bb class="xb5"/bb class="xb4"/bb class="xb3"/bb class="xb2"/bb class="xb1"/b

em/emspan/span

/div

/div

/body

/html

相关问答

Q1: 在javascript中什么是事件委托 原理是什么

要了解委托的原理，首先要理解DOM事件的过程。

Dom事件分为两个阶段，如图：

事件捕获阶段（红色箭头顺序）

事件冒泡阶段（绿色箭头顺序）

在事件捕获阶段，事件源依次从defaultView（可以理解为整个页面）一直传播到具体的目标（target）。从广泛到具体。

在事件冒泡阶段，事件源依次从target传播到defaultview。从具体到广泛，范围越来越大，像冒泡过程一样，气泡越来越大（范围越来越大）

而事件委托就是利用的DOM事件的事件捕获阶段。把具体dom上发生的事件，委托给更大范围的dom去处理。好比送信员，如果每次都把信件送给每一户，非常繁琐。但是如果交给一个大范围的管理者，比如小区的传达室，那么事情会变得非常简单。事件委托就类似这种原理，我页面中有很多按钮，如果不使用事件委托，我只能在每个按钮上注册事件。非常麻烦。但如果我把事件注册在一个大范围的div（假设所有的按钮都在这个div中），那么我只要注册一次事件，就可以处理所有按钮（只要按钮包含在上述div中）事件的响应了。

Q2: qq空间皮肤代码

最新搜集可用4.0皮肤代码及用法：

腾讯QQ空间代码的使用：只要进入自己的空间，然后点“装扮空间”，然后将你要的代码复制进地址栏，然后敲回车，这时再点“自定义”然后随便微移动一项点“保存”就行了

其他的单色皮肤：（免费）

javascript:window.top.space_addItem(1,1,0,0,0,0,93); 全蓝

javascript:window.top.space_addItem(1,4693,0,0,0,0,93); 全粉（带少许花瓣）

javascript:window.top.space_addItem(1,15306,0,0,0,0,93); 全橙色

最新4.0空间免费皮肤代码：

javascript:window.top.space_addItem(1,2875,0,80,0,0,90); 红色和粉红系

javascript:window.top.space_addItem(1,16309,0,80,0,0,90);铁锈色和灰色

javascript:window.top.space_addItem(1,1027,0,80,0,0,90); 灰绿色方块和黑猫

javascript:window.top.space_addItem(1,1630,0,80,0,0,90);黄色系方块和红色LOVE

javascript:window.top.space_addItem(1,1771,0,80,0,0,90); 粉红色小方块和蓝色蝴蝶，呵呵，对啦，这就是我空间里新换的皮肤哦~

javascript:window.top.space_addItem(1,3216,0,80,0,0,90); 红色MY HOME

javascript:window.top.space_addItem(1,4323,0,80,0,0,90); 白色带兰色的漫画涂鸦

javascript:window.top.space_addItem(1,10812,0,80,0,0,90);白色云朵

javascript:window.top.space_addItem(1,11605,0,80,0,0,90);粉红色蝴蝶兰

javascript:window.top.space_addItem(1,11996,0,80,0,0,90);红心

javascript:window.top.space_addItem(1,13290,0,80,0,0,90);带紫色的红心

javascript:window.top.space_addItem(1,11998,0,80,0,0,90);黑色系带粉红的气泡和心

javascript:window.top.space_addItem(1,6730,0,80,0,0,90);竹子

javascript:window.top.space_addItem(1,3934,0,80,0,0,90);绿蓝系 绿色四叶草

javascript:window.top.space_addItem(1,3938,0,80,0,0,90); 黑色和粉红色系 红心

javascript:window.top.space_addItem(1,3942,0,80,0,0,90); 黑色和粉红色系 红星星

javascript:window.top.space_addItem(1,3899,0,80,0,0,90); 粉红色系 粉红星星

javascript:window.top.space_addItem(1,1632,0,80,0,0,90); 红色方框

javascript:window.top.space_addItem(1,394,0,80,0,0,90);木色I LOVE U

javascript:window.top.space_addItem(1,414,0,80,0,0,90); 兰色冰块方框

javascript:window.top.space_addItem(1,416,0,80,0,0,90);淡绿色方框 很淡雅 很简洁

javascript:window.top.space_addItem(1,5369,0,80,0,0,90); 黑边蝴蝶结方块

javascript:window.top.space_addItem(1,4983,0,80,0,0,90); 淡黄色星星和心

javascript:window.top.space_addItem(1,4463,0,80,0,0,90); 粉红色翅膀

javascript:window.top.space_addItem(1,4080,0,80,0,0,90); 黑心

javascript:window.top.space_addItem(1,4082,0,80,0,0,90); 淡黄 LOVE YOU 还不错

javascript:window.top.space_addItem(1,4040,0,80,0,0,90); 淡兰色 I LOVE YOU

javascript:window.top.space_addItem(1,1029,0,80,0,0,90); 绿色方块

javascript:window.top.space_addItem(1,1030,0,80,0,0,90); 木色 黑猫

javascript:window.top.space_addItem(1,8977,0,80,0,0,90); 黑色城堡

javascript:window.top.space_addItem(1,5867,0,80,0,0,90); 兰色蝴蝶

javascript:window.top.space_addItem(1,5628,0,80,0,0,90); 粉红LOVE ME

javascript:window.top.space_addItem(1,4311,0,80,0,0,90); I LOVE YOU

javascript:window.top.space_addItem(1,4319,0,80,0,0,90); 红心紫心绿心黄心蓝心 忽忽 好花呀 呵呵

javascript:window.top.space_addItem(1,4327,0,80,0,0,90); 粉红方格HAPPY DAY

javascript:window.top.space_addItem(1,1772,0,80,0,0,90); 绿色方框带蝴蝶

javascript:window.top.space_addItem(1,1032,0,80,0,0,90); 灰蓝方框 适合男生用吧

javascript:window.top.space_addItem(1,1919,0,80,0,0,90); 红色方框带太阳花

javascript:window.top.space_addItem(1,1110,0,80,0,0,90); 紫色方框带蝴蝶结

javascript:window.top.space_addItem(1,1522,0,80,0,0,90); 淡蓝方块和云朵

javascript:window.top.space_addItem(1,1036,0,80,0,0,90); 粉红方框淡黄色系 有小蝴蝶结

javascript:window.top.space_addItem(1,16628,0,80,0,0,90); 灰紫卷曲花边 带闪心和紫色花朵~ 看起来满有低沉忧郁气质的哦。。。

javascript:window.top.space_addItem(1,8031,0,80,0,0,90); 黑白钢琴键和黑猫头

javascript:window.top.space_addItem(1,6275,0,80,0,0,90); HAPPY

javascript:window.top.space_addItem(1,5869,0,80,0,0,90); 兰色蝴蝶蓝带闪心

javascript:window.top.space_addItem(1,5754,0,80,0,0,90); 粉红的牵牛花

javascript:window.top.space_addItem(1,5140,0,80,0,0,90); 拼图和海星

javascript:window.top.space_addItem(1,5144,0,80,0,0,90); 红白信封

javascript:window.top.space_addItem(1,4827,0,80,0,0,90); 冰块

javascript:window.top.space_addItem(1,4830,0,80,0,0,90); 大红色块

javascript:window.top.space_addItem(1,4829,0,80,0,0,90); 粉心

javascript:window.top.space_addItem(1,4831,0,80,0,0,90); 兰色小冰块 很清爽的一款背景皮肤哟 我喜欢~！

javascript:window.top.space_addItem(1,2469,0,80,0,0,90); 木纹带向日葵 呵呵 很阳光的一款背景 满不错的

javascript:window.top.space_addItem(1,2364,0,80,0,0,90); 淡粉色块

javascript:window.top.space_addItem(1,2160,0,80,0,0,90); 胆黄色块

javascript:window.top.space_addItem(1,1920,0,80,0,0,90); 淡粉带蓝色小花 很淡雅的 不错~~

javascript:window.top.space_addItem(1,1626,0,80,0,0,90); 淡蓝色气泡 还不错

javascript:window.top.space_addItem(1,6556,0,80,0,0,90); 粉红心和蓝色小钻

javascript:window.top.space_addItem(1,2942,0,80,0,0,90); 蓝紫色 HAPPY 和星星

javascript:window.top.space_addItem(1,2468,0,80,0,0,90); 灰砖墙和红色花边以及淡黄色块

javascript:window.top.space_addItem(1,2464,0,80,0,0,90); 红紫色块

QQ之声官方皮肤

javascript:window.top.space_addItem(1,15306,0,0,1,1,94);

希望可以帮到你

Q3: js中什么是事件气泡，如何阻止事件气泡

比如有3个div 一个包裹一个 点击最里面那个 会触发click事件

外面的DIV 一样会触发click事件

最外面的一样会触发click事件

如果你3个div 监听 你就会发现。。。

事件的触发顺序自内向外，这就是事件冒泡。以下为阻止冒泡

var oEvent = ev || event;

oEvent.cancelBubble = true;

oEvent.stopPropagation();

望采纳

Q4: 开发百度地图，使用百度api时怎么自定义哪气泡

此可以添加自定义气泡

script type="text/javascript"

// 百度地图API功能

var sContent =

"h4 style='margin:0 0 5px 0;padding:0.2em 0'天安门/h4" +

"img style='float:right;margin:4px' id='imgDemo' src='' width='139' height='104' title='天安门'/" +

"p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'天安门坐落在中国北京市中心,故宫的南侧,与天安门广场隔长安街相望,是清朝皇城的大门.../p" +

"/div";

var map = new BMap.Map("allmap");

var point = new BMap.Point(116.404, 39.915);

var marker = new BMap.Marker(point);

var infoWindow = new BMap.InfoWindow(sContent); // 创建信息窗口对象

map.centerAndZoom(point, 15);

map.addOverlay(marker);

marker.addEventListener("click", function(){

this.openInfoWindow(infoWindow);

//图片加载完毕重绘infowindow

document.getElementById('imgDemo').onload = function (){

infoWindow.redraw(); //防止在网速较慢，图片未加载时，生成的信息框高度比图片的总高度小，导致图片部分被隐藏

}

});

/script

Q5: 移动鼠标到按钮处，出来一个气泡提示框，怎样实现

这个效果其实蛮好实现的,一般的html元素都有onmouseover这个事件,即当鼠标移至目标元素时所触发的.你可以在这个事件里用javascript实现你所要的效果.

=======================================

补充:举个例子:你可以先设置一个div将其display设为none,这样它就不会显示出来了,然后当鼠标移至上面时,你可以先用document.GetElementByID获取这个div,然后将其的display设置成block就能够将其显示出来了.当然这个div的内容你可以随便设置的.