基于jquery的气泡提示效果_jquery

代码注释已经尽可能的详细了,也不多说了.
初步测试暂未发现大的BUG,总体来说不满意的是鼠标移来移去不断触发气泡时会出现XX为空或不是对象的问题,
虽然不影响效果,但看着IE左下角的黄色警告不爽,暂时不知道如何改进. 加了try/catch解决...
还有就是气泡默认出现在触发对象的正上方,当触发对象在边上时,气泡会有一部分出现在窗口外面......也许这种情况可以让气泡显示在左边或是右边,感觉可能会有些麻烦,就没去弄了,比较懒......
越用jquery就越喜欢用它...
bubble.js:

复制代码 代码如下:

/*
* @date: 2010-5-30 11:57:22
* @author: 胡灵伟
* Depends:
* jquery.js
*
* function:气泡提示效果
* use:$("selectors").bubble({fn:getdata, width:width, height:height});
* 对所有需要气泡提示效果的对象使用bubble方法，
* fn为气泡中显示内容获得方法,即fn中返回的数据会显示在气泡中
* 以样式指代div则有:
* width\height为contents的width\height属性
* 气泡总width为left.width + contents.width + right.width
* 气泡总height为top.height + contents.height + bottom.height
*/
(function ($) {
$.fn.bubble = function (options) {
Bubble = function(){
this.defaults = {
distance : 10,
time : 250,
hideDelay : 500,
width:100,
height:100
};
this.options = $.extend(this.defaults, options);
this.hideDelayTimer = new Array();
this.shown = new Array();
this.beingShown = new Array();
this.popup = new Array();
this.trigger = new Array();
this.makebubble = function(w, h){
var tpl = $('<div class="bubble-popup"></div>').append('<div class="topleft"></div>').append('<div class="top"></div>')
.append($('<div class="topright"></div>')).append('<div class="left"></div>')
.append('<div class="contents"></div>').append('<div class="right"></div>')
.append('<div class="bottomleft"></div>')
.append($('<div class="bottom"></div>')
.append($('<div class="bottomtail"></div>')))
.append('<div class="bottomright"></div>').appendTo('body');
tpl.find('.left, .right, .contents').each(function(){$(this).height(h)});
tpl.find('.top, .bottom, .contents').each(function(){$(this).width(w)});
return tpl;
};
this.add = function(triggers, options){
//此处的options为每次调用add方法传进来的参数,比如指定获取数据的方法fn, 气泡宽width高height
//console.debug("length:"+triggers.length);
var t = this.trigger.length;
//将新加入的需要气泡提示效果的对象放到trigger数组中
for(var j =0;j<triggers.length;j++)
this.trigger.push(triggers[j]);
//console.debug("trigger.length:" + this.trigger.length);
var hout = this.handleout;
var hover = this.handleover;
var obj = this;
//为新加入的对象绑定鼠标监听事件
triggers.each(function(ind){
$(this).unbind('mouseover').mouseover(function(){
hover(t + ind, obj, options);
}).unbind('mouseout').mouseout(function(){
hout(t + ind, obj, options);
});
});
};
this.handleover = function(i, obj, options){
//console.debug("hideDelayTimer.length:" + obj.hideDelayTimer.length);
//当新触发冒气泡事件时原先的定时器还没结束则将原来的定时器清除
if (obj.hideDelayTimer[i]) clearTimeout(obj.hideDelayTimer[i]);
if (obj.beingShown[i] || obj.shown[i]) {
//如果气泡正在冒或已经冒出来了则不再重复冒气泡
return;
} else {
var trigger = $(obj.trigger[i]);
//标记正在冒气泡
obj.beingShown[i] = true;
//创建气泡
obj.popup[i] = obj.makebubble(options.width||obj.options.width, options.height||obj.options.height);
//对于气泡绑定同样的事件以使得鼠标离开触发对象后放到气泡上时气泡不会消失
obj.popup[i].mouseover(function(){obj.handleover(i, obj)}).mouseout(function(){obj.handleout(i, obj)});
//调用获取数据的方法fn来显示数据
obj.options.fn(obj.trigger[i], function(data){
obj.popup[i].find('.contents').text(data);
});
//设定气泡的位置和显示属性,气泡默认出现在触发对象正上方
obj.popup[i].css({
top: trigger.offset().top-obj.popup[i].height(),
left: trigger.offset().left + trigger.width()/2 - obj.popup[i].width()/2,
display: 'block'
}).animate(
//由于万恶的IE不能同时支持PNG半透明和滤镜,所以对于IE不使用滤镜
$.browser.msie?{
top: '-=' + obj.options.distance + 'px'
}:{
top: '-=' + obj.options.distance + 'px',
opacity: 1
}, obj.options.time, 'swing', function() {
obj.beingShown[i] = false;
obj.shown[i] = true;
});
}
return false;
};
this.handleout = function(i, obj, options){
//console.debug("hideDelayTimer["+i+"]:"+obj.hideDelayTimer[i]);
//处理当因为某些意外操作使得没有触发鼠标进入事件而直接再次触发鼠标离开事件时的情况
if (obj.hideDelayTimer[i]) clearTimeout(obj.hideDelayTimer[i]);
obj.hideDelayTimer[i] = setTimeout(function () {
obj.hideDelayTimer[i] = null;
try{
　　　　　　　　 obj.popup[i].animate(
$.browser.msie?{
top: '-=' + obj.options.distance + 'px'
}:{
top: '-=' + obj.options.distance + 'px',
opacity: 0//渐隐效果
}, obj.options.time, 'swing', function () {
obj.shown[i] = false;
obj.popup[i].css('display', 'none');
obj.popup[i] = null;
});}catch(e){};
}, obj.options.hideDelay);
return false;
};
};
$.bubble = new Bubble();//单例
$.bubble.add(this, options);
};
})(jQuery);

使用方法:(用到的图片样式img.zip,注意路径,没图片是很难看的...)

复制代码 代码如下:

<style type="text/css" media="screen">
<!--
* {
margin: 0;
padding: 0;
}
body {
padding: 10px;
}
h1 {
margin: 14px 0;
font-family: 'Trebuchet MS', Helvetica;
}
.bubbletrigger {
}
/* Bubble pop-up */
.bubble-popup {
position: absolute;
display: none;
z-index: 50;
border-collapse: collapse;
}
.bubble-popup .topleft {width:19px; height:15px;float:left;background-image: url(../images/bubble/bubble-1.png);}
.bubble-popup .top { width:1px;height:15px;float:left;background-image: url(../images/bubble/bubble-2.png); }
.bubble-popup .topright { width:19px; height:15px;float:left;background-image: url(../images/bubble/bubble-3.png); }
.bubble-popup .left { clear:left;width:19px; height:1px;float:left;background-image: url(../images/bubble/bubble-4.png); }
.bubble-popup .contents {
white-space:normal;
word-break:break-all;
float:left;
font-size: 12px;
line-height: 1.2em;
background-color: #fff;
color: #666;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", sans-serif;
}
.bubble-popup .right { width:19px; height:1px;float:left;background-image: url(../images/bubble/bubble-5.png); }
.bubble-popup .bottomleft { clear:left;width:19px; height:15px;float:left;background-image: url(../images/bubble/bubble-6.png); }
.bubble-popup .bottom {width:1px;height:15px;float:left;background-image: url(../images/bubble/bubble-7.png); text-align: center;}
.bubble-popup .bottomtail { width:30px; height:29px; display: block; margin: 0 auto; background-image: url(../images/bubble/bubble-tail2.png);}
.bubble-popup .bottomright { width:19px; height:15px;float:left;background-image: url(../images/bubble/bubble-8.png); }
-->
</style>
<script src="../js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="../js/bubble-1.0.js" type="text/javascript"></script>
<script type="text/javascript"><!--
aa = function(obj, callback){
$.ajax({
type : 'POST',
data : {word:$(obj).attr('alt'),rand:Math.random()},
url : 'http://localhost/xun/ajax.svl?method=getdetailinfo',
dataType : 'text',
timeout : 1000,
success : function(data){
callback(data);
}
});
};
bb = function(obj, callback){
$.ajax({
type : 'POST',
data : {word:$(obj).attr('alt'),rand:Math.random()},
url : 'http://localhost/xun/ajax.svl?method=getdetailinfo',
dataType : 'text',
timeout : 1000,
success : function(data){
callback(data + "aaaa");
}
});
};
$(function(){
$('.bubbletrigger').bubble({width:150, height: 100, fn:aa});
$('#a').bubble({fn:bb});
});
//
--></script>
</head>
<body id="page">
<h1>jQuery Bubble Example</h1>
<div>
<br/>aaaaaaaaaa
<br/>aaaaaaaaaaaaaaaaaaaa
<br/>aaaaaaaaaaaaaaaaaaaaaaaaaaaa
<br/>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
<br/>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
<br/>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
<div style="padding-left:100px;">
<img class="bubbletrigger" alt="a" src="../images/bubble/starburst.gif" />
<img class="bubbletrigger" alt="b" src="../images/bubble/starburst.gif" />
<img class="bubbletrigger" alt="c" src="../images/bubble/starburst.gif" />
<img class="bubbletrigger" alt="d" src="../images/bubble/starburst.gif" />
<img id="a" alt="e" src="../images/bubble/starburst.gif" />
</div>
</body>

servlet只要返回一段字符串就可以了,就不贴了.

时间： 2024-08-03 09:11:04

基于jquery的气泡提示效果_jquery的相关文章

jquery.cvtooltip.js 基于jquery的气泡提示插件_jquery

序 1.插件名cvtooltip中的cv是ChinaValue的首字母缩写,而tooltip就是提示啦. 2.适用于新功能的提示,引导用户的提示,即时类消息的提示,操作失败提示(操作成功了也没人拦着)等等等,使用css实现,不附带任何图片文件. 3.目前发现的问题,在Chorme中表现的不给力,是由于Chrome对页面的解析与IE和FF不同,导致jquery的position或者offset返回值不同. 4.该插件依然是练习之作,一人之力,错误难免. 实例演示 1.载入页面的同时,气泡提示也显示

基于jquery实现省市联动效果_jquery

由于项目需要需要实现一个省市联动,由于业务有一些特殊的需求,使用现有的插件略有不便,就自己实现了一个. 首先需要保存地区数据的JS数据文件,我这里命名为areaData.js,内容如下: /** * 保存地区信息 * 数据格式 * areaData = [{'pro': '北京', 'cities': {'-1': '北京'}}, {...}] * 直辖市存在-1,表示就是直辖市 */ (function(window) { window.areaData = [{"pro":&quo

基于Jquery的温度计动画效果_jquery

设计图如下:1.xhml 复制代码 代码如下: <div id="mometer"> <div id="hot"></div> <span> <div id="Hgheader">0℃</div> <div id="Hg"></div> </span> </div> <input name="

基于jQuery实现滚动切换效果_jquery

仿锋利的Jquery案例做的一个滚动切换效果,供大家参考,具体内容如下 效果如下图: 前台HTML代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title

niceTitle 基于jquery的超链接提示插件_jquery

这不是真正的预览,在读取文字列表的时候同时读取每个文章的内容概要(即想要预览的内容),然后使用该插件就可以实现假预览. 效果图如下,自己可以相应修改 代码如下: 复制代码 代码如下: <link rel="Stylesheet" type="text/css" href="Styles/jQuery.niceTitle.css" /> <script type="text/javascript" src=&q

一个基于jquery的图片切换效果_jquery

下面的代码对于学习jquery的朋友是个参考html代码: 代码 复制代码 代码如下: <div class="warp" id="warp"> <img src="http://images.cnblogs.com/cnblogs_com/zhangle/252347/t_pic1.bmp" alt="" class="imgBig" /> <img src="ht

基于jQuery的消息提示插件 DivAlert之旅（二）_jquery

改进的代码部分主要如下: 1.创建default.css文件: 代码 复制代码 代码如下: img { vertical-align:middle; } .jBg { position: absolute; top: 0; left: 0; z-index: 9999; background-color: #999; filter: alpha(opacity=70); opacity: 0.7; } .jWrap { position: absolute; border: 1px solid

基于jQuery的消息提示插件之旅 DivAlert(三)_jquery

本版本遵循了2.0的写法,此处通过extend方法封装了需要设置的各个选项,比起2.0版本的代码要精简了一些. 2.0版本 复制代码 代码如下: //设置插件基本信息 var options = o || {}; options.width = o.width || 300; //提示框宽度若小于104px则自动重置为200px if (options.height > 104) { options.height = o.height; } else { options.height = 200

基于jQuery实现带动画效果超炫酷的弹出对话框(附源码下载)_jquery

这是一款基于jQuery的弹出对话框插件,这个jQuery对话框插件的最大特点是弹出和关闭都带有非常炫酷的动画特效,比如旋转飞入.上下抖动飞入等.效果图如下: 效果演示     源码下载 html代码: <div class="container"> <h1>jQuery gDialog Plugin Exampels</h1> <button class="btn demo-1">Alert Dialog Box&l