<link href="css/manhua_hoverTips.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="http://www.jq-school.com/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/manhua_hoverTips.js"></script>
<script type="text/javascript">
$(function () {
$("p").manhua_hoverTips(); //使用默认参数,所以不用调用最简洁(下面显示)
$("#btn").manhua_hoverTips({ position: "l" }); //改变了显示的位置参数(右边显示)
$("#tr").manhua_hoverTips({ position: "r" }); //改变了显示的位置参数(左边显示)
$("#tb").manhua_hoverTips({ position: "b" }); //改变了显示的位置参数(下面显示)
});
</script> <body>
<center>
<form id="form1" runat="server">
<div>
<p tips="哈哈 是我。。。。。">afdsafdsfasd</p>
<input id="btn" type="button" tips="我怎么了,怎么会???" value="button" />
<br />
<select id="tr" tips="是我。。。。。"><option></option>
</select>
<br />
<input id="tb" tips="你要说什么......." type="radio" />
</div>
</form>
</center>
</body>
body {
background: #f7f7f7;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
.docBubble {position:absolute;max-width:240px; text-align:left;text-align:left;z-index:; display:none;}
.docBubble a{ margin-left:;}
.docBubble .icon{ background:none;}
.docBubble .title a {text-decoration: none;}
.docBubble .tl,.docBubble .tr,.docBubble .bl,.docBubble .inner,.docBubble .triangle-t,.docBubble .triangle-b,.docBubble .close{ background-image:url(../images/manhua_bubbletips.png);_background-image:url(../images/manhua_bubbletips_ie6.png); }
.docBubble .tl{ float:left; background-position:-20px ; }
.docBubble .tr{ position:absolute;right:-12px; top:;width:12px; height:12px; background-position:% ; }
.docBubble .bl{ position:absolute;left:; bottom:-12px; width:12px; height:12px; background-position:-20px %; }
.docBubble .inner{ position: relative;left:12px; width:220px; margin:12px -12px ; max-width:220px; background-position:% %; padding: 12px 12px 2px; _padding-bottom:12px; }
.docBubble .triangle-t{ position:absolute; z-index:; top:-7px; width:15px; height:8px; overflow:hidden; }
.docBubble .triangle-b{ position:absolute; bottom:-18px; z-index:; width:15px; height:11px; overflow:hidden; background-position: -10px; }
.docBubble .triangle-l{ position:absolute; left:-10px; z-index:; top:15px; width:15px; height:18px; overflow:hidden; background:url(../images/manhua_bubbletips_l.png) no-repeat;_background-image:url(../images/manhua_bubbletips_l_ie6.png) no-repeat; }
.docBubble .triangle-r{ position:absolute; right:-19px; z-index:; top:15px; width:15px; height:18px; overflow:hidden; background:url(../images/manhua_bubbletips_r.png) no-repeat;_background-image:url(../images/manhua_bubbletips_r_ie6.png) no-repeat; }
.docBubble .triangle-t,.docBubble .triangle-b{ right:20px;}
.docBubble .close{ position:absolute; z-index:; top:10px; right:2px; width:9px; height:9px; text-indent:-99em; overflow:hidden; background-position: -25px; cursor:pointer;}
.docBubble .inner .icon{ float:left; padding: 2px ;}
.docBubble .inner .icon img{ margin-right:10px; }
.docBubble .inner .cont{ overflow:hidden; zoom:; line-height:20px;}
.docBubble .inner .title{ margin: 2px ; font-size:12px;font-weight:bold;}
.docBubble .inner .lk-btn{ text-align:right;}

css(manhua_hoverTips.css)

/***
* 漫画原创鼠标悬浮气泡提示Jquery插件
* 编写时间:2012年11月14号
* version:manhua_hoverTips.js
***/
$(function() {
$.fn.manhua_hoverTips = function(options) {
var defaults = {
position : "t", //箭头指向上(t)、箭头指向下(b)、箭头指向左(l)、箭头指向右(r)
value : //小箭头偏离左边和上边的位置 };
var options = $.extend(defaults,options); var bid = parseInt(Math.random()*);
var $this = $(this);
$("body").prepend('<div class="docBubble" id="btip'+bid+'"><i class="triangle-'+options.position+'"></i><div class="tl"><div class="inner"><div class="cont"></div></div></div><div class="tr"></div><div class="bl"></div></div>');
var $btip = $("#btip"+bid);
var $btipClose = $("#btipc"+bid);
var offset,h ,w ;
var timer;
$this.die().live("mousemove",function(){
clearInterval(timer);
offset = $(this).offset();
h = $(this).height();
w = $(this).width();
$(".cont").html($(this).attr("tips")); switch(options.position){
case "t" ://当它是上面的时候
$(".triangle-t").css('left',options.value);
$btip.css({ "left":offset.left , "top":offset.top+h+ }).show();
break;
case "b" ://当它是下面的时候
$(".triangle-b").css('left',options.value);
$btip.css({ "left":offset.left , "top":offset.top-h--$btip.height() }).show();
break;
case "l" ://当它是左边的时候
$(".triangle-l").css('top',options.value);
$btip.css({ "left":offset.left+w+ , "top":offset.top+h/--options.value }).show();
break;
case "r" ://当它是右边的时候
$(".triangle-r").css('top',options.value);
$btip.css({ "left":offset.left--$btip.width() , "top":offset.top+h/--options.value }).show();
break;
} });
$this.live("mouseout",function(){
timer = setInterval(function (){
$btip.hide();
}, );
}); $btip.live("mousemove",function(){
clearInterval(window.timer);
$btip.show();
});
$btip.live("mouseout",function(){
$btip.hide();
});
$btipClose.live("click",function(e){
$btip.hide();
});
}
});

manhua_hoverTips.js

jquery提示气泡的更多相关文章

  1. jquery $提示缺少对象$提示缺少对象

    jquery $提示缺少对象 项目中存在不同版本的jquery,有1.4也有1.2, 之前运行项目不会报错 " $提示缺少对象 ",但是我的IE9重置之后就报错,从网上找了一大堆, ...

  2. jQuery提示组件toastr(取代alert)

    给大家推荐一款jquery提示插件:toastr 它是一个可以取代alert的提示信息框,它在PC,移动设备上都有不错的UI效果. 具体使用方法如下: 1.首先在网页头站调用他需要的js和css文件. ...

  3. jquery提示sucess

    这是学习笔记. 今天做东西的时候,想把体验做好,于是打算再ajax success字段中添加函数实现提示sucess. 用了jquery的fadeIn 跟fadeOut,再fadeIn的callbac ...

  4. jquery 提示语淡入效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. idea开启jquery提示及如何找到学习目标

    idea开启jquery提示 根据这些library就知道该学习哪些技术了

  6. Eclipse通过Spket增加JQuery提示的方法

    Eclipse通过Spket增加JQuery提示的方法 1.增加在线更新源:Help->Install New Software...->Add...->Name: "Sp ...

  7. Android 红色小圆球提示气泡 BadgeView

    今天给大家分享两个实用有简单的一个小圆球提示气泡: BadgeView 参考地址: https://github.com/qstumn/BadgeView;       个人地址:http://git ...

  8. jquery提示消息,简单通用

    jquery提示消息.简单通用 function showTips(txt,time,status) { var htmlCon = ''; if(txt != ''){ if(status != 0 ...

  9. DSAPI多功能组件编程应用-DS提示气泡

    首先下载DSAPI.dll.并在项目中引用. 该功能包括在DSAPI1.0.1.1及更高版本号,DLL请到本人资源里查找. Private Sub Button1_Click(sender As Ob ...

随机推荐

  1. 淘宝IP地址库采集器c#代码

    这篇文章主要介绍了淘宝IP地址库采集器c#代码,有需要的朋友可以参考一下. 最近做一个项目,功能类似于CNZZ站长统计功能,要求显示Ip所在的省份市区/提供商等信息.网上的Ip纯真数据库,下载下来一看 ...

  2. CorelDRAW 二维码插件

    随着智能手机的流行,二维码在各个领域大量应用,这个插件在补CorelDRAW这方面的不足: 这个插件是 cpg 格式,安装请看这篇博客:http://www.cnblogs.com/o594cql/p ...

  3. ComboBox Control Messages 消息

    连接到MSDN,有时间完善这个.具体说明可点击进入msdn CB_ADDSTRING 添加一个字符串组合框的列表框.如果组合框没有cbs_sort风格,字符串添加到列表的结尾.否则,该字符串插入列表, ...

  4. DataSnap Demo:TFDConnection、最大连接数、客户端回叫功能、多线程模拟、压力测试等

    一.限制最大连接数,并验证来访者用户身份: procedure TServerContainer1.DSServer1Connect( DSConnectEventObject: TDSConnect ...

  5. splObjectStroge的作用,实例化一个数组

    PHP SPL SplObjectStorage是用来存储一组对象的,特别是当你需要唯一标识对象的时候. PHP SPL SplObjectStorage类实现了Countable,Iterator, ...

  6. 【css】web标准

    网页主要由三部分组成:结构(Structure).表现(Presentation)和行为(Behavior) 结构重点理解: XHTML 1.应用形式 ccs+div  2000 2.基于xml 和x ...

  7. iOS9下修改回HTTP模式进行网络请求

    升级为iOS9后,默认请求类型为https,如何使用http进行请求会报错 The resource could not be loaded because the App Transport Sec ...

  8. Webstorm10.0.4注册码

    分享几个Webstorm10的注册码: (1) user name :EMBRACE ===== LICENSE BEGIN =====17739-1204201000002KkN!4z2O8JEyj ...

  9. SCRUM,一个采用迭代,增量方法来优化可预见控制风险

    Scrum是一个用于开发和维持复杂产品的框架,是一个增量的,迭代的开发过程.在这个框架中,整个开发过程是由若干个短的迭代周期组成,一个短的迭代周期称为一个Sprint,每个Sprint的建议长度是2到 ...

  10. 现在不使用ZeroClipboard我们也能实现复制功能(转)

    现在不使用ZeroClipboard我们也能实现 首先,我们保证页面结构不变,但不在引入ZeroClipboard插件: 1 <input type="text" name= ...