jquery提示气泡
<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:100; display:none;} .docBubble a{ margin-left:0;} .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 0; } .docBubble .tr{ position:absolute;right:-12px; top:0;width:12px; height:12px; background-position:100% 0; } .docBubble .bl{ position:absolute;left:0; bottom:-12px; width:12px; height:12px; background-position:-20px 100%; } .docBubble .inner{ position: relative;left:12px; width:220px; margin:12px 0 -12px 0; max-width:220px; background-position:100% 100%; padding:0 12px 12px 2px; _padding-bottom:12px; } .docBubble .triangle-t{ position:absolute; z-index:2; top:-7px; width:15px; height:8px; overflow:hidden; } .docBubble .triangle-b{ position:absolute; bottom:-18px; z-index:2; width:15px; height:11px; overflow:hidden; background-position:0 -10px; } .docBubble .triangle-l{ position:absolute; left:-10px; z-index:2; 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:2; 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:1; top:10px; right:2px; width:9px; height:9px; text-indent:-99em; overflow:hidden; background-position:0 -25px; cursor:pointer;} .docBubble .inner .icon{ float:left; padding: 2px 0;} .docBubble .inner .icon img{ margin-right:10px; } .docBubble .inner .cont{ overflow:hidden; zoom:1; line-height:20px;} .docBubble .inner .title{ margin:0 0 2px 0; font-size:12px;font-weight:bold;} .docBubble .inner .lk-btn{ text-align:right;}
/*** * 漫画原创鼠标悬浮气泡提示Jquery插件 * 编写时间：2012年11月14号 * version:manhua_hoverTips.js ***/ $(function() { $.fn.manhua_hoverTips = function(options) { var defaults = { position : "t", //箭头指向上(t)、箭头指向下(b)、箭头指向左(l)、箭头指向右(r) value : 23 //小箭头偏离左边和上边的位置 }; var options = $.extend(defaults,options); var bid = parseInt(Math.random()*100000); 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+14 }).show(); break; case "b" ://当它是下面的时候 $(".triangle-b").css('left',options.value); $btip.css({ "left":offset.left , "top":offset.top-h-7-$btip.height() }).show(); break; case "l" ://当它是左边的时候 $(".triangle-l").css('top',options.value); $btip.css({ "left":offset.left+w+10 , "top":offset.top+h/2-7-options.value }).show(); break; case "r" ://当它是右边的时候 $(".triangle-r").css('top',options.value); $btip.css({ "left":offset.left-20-$btip.width() , "top":offset.top+h/2-7-options.value }).show(); break; } }); $this.live("mouseout",function(){ timer = setInterval(function (){ $btip.hide(); }, 1000); }); $btip.live("mousemove",function(){ clearInterval(window.timer); $btip.show(); }); $btip.live("mouseout",function(){ $btip.hide(); }); $btipClose.live("click",function(e){ $btip.hide(); }); } });
