html5气泡提示效果,基于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){

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值