jQuery简单实现title提示效果示例
本文实例讲述了jQuery简单实现title提示效果的方法。分享给大家供大家参考,具体如下:
/* 调用示例: $(document).ready(function(){ $('.quicktip').quberTip({ speed:200 }); }); <a href='' class='quicktip' title='Information about this link'>desktop publishing</a> */ jQuery.fn.quberTip = function (options) { var defaults = { speed: 500, xOffset: 10, yOffset: 10 }; var options = $.extend(defaults, options); return this.each(function () { var $this = jQuery(this); if ($this.attr('title') != undefined) { //Pass the title to a variable and then remove it from DOM if ($this.attr('title') != '') { var tipTitle = ($this.attr('title')); } else { var tipTitle = 'QuberTip'; } //Remove title attribute $this.removeAttr('title'); $(this).hover(function (e) { // $(this).css('cursor', 'pointer'); $("body").append("<div id='tooltip'>" + tipTitle + "</div>"); $("#tooltip").css({ "position": "absolute", "z-index": "9999", "background": "#D3DDF5", "background-image": "url(../../Quber_Image/Quber_Common/Quber_TB_TitltBG.png)", "padding": "5px", "opacity": "0.9", "border": "1px solid #A3C0E8", "-moz-border-radius": "3px", "border-radius": "3px", "-webkit-border-radius": "3px", "font-weight": "normal", "font-size": "12px", "display": "none" }); $("#tooltip") .css("top", (e.pageY + defaults.xOffset) + "px") .css("left", (e.pageX + defaults.yOffset) + "px") .fadeIn(options.speed); }, function () { //Remove the tooltip from the DOM $("#tooltip").remove(); }); $(this).mousemove(function (e) { $("#tooltip") .css("top", (e.pageY + defaults.xOffset) + "px") .css("left", (e.pageX + defaults.yOffset) + "px"); }); } }); };
更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery常用插件及用法总结》、《jQuery form操作技巧汇总》、《jQuery操作json数据技巧汇总》、《jQuery扩展技巧总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jquery中Ajax用法总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
相关推荐
EdwardSiCong 2020-11-23
85477104 2020-11-17
hhanbj 2020-11-17
81427005 2020-11-11
seoppt 2020-09-13
honeyth 2020-09-13
WRITEFORSHARE 2020-09-13
84483065 2020-09-11
momode 2020-09-11
85477104 2020-08-15
83510998 2020-08-08
82550495 2020-08-03
tthappyer 2020-08-03
84901334 2020-07-28
tthappyer 2020-07-25
TONIYH 2020-07-22
tztzyzyz 2020-07-20
83510998 2020-07-18
81463166 2020-07-17