jQuery簡單實(shí)現(xiàn)title提示效果示例
本文實(shí)例講述了jQuery簡單實(shí)現(xiàn)title提示效果的方法。分享給大家供大家參考,具體如下:
/* 調(diào)用示例: $(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"); }); } }); };
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jQuery常用插件及用法總結(jié)》、《jQuery form操作技巧匯總》、《jQuery操作json數(shù)據(jù)技巧匯總》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jquery中Ajax用法總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動(dòng)畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對大家jQuery程序設(shè)計(jì)有所幫助。
- JQuery實(shí)現(xiàn)超鏈接鼠標(biāo)提示效果的方法
- jquery實(shí)現(xiàn)網(wǎng)站超鏈接和圖片提示效果
- jQuery文字提示與圖片提示效果實(shí)現(xiàn)方法
- jquery實(shí)現(xiàn)簡單文字提示效果
- jQuery實(shí)現(xiàn)仿QQ空間裝扮預(yù)覽圖片的鼠標(biāo)提示效果代碼
- jquery實(shí)現(xiàn)鼠標(biāo)滑過后動(dòng)態(tài)圖片提示效果實(shí)例
- jQuery實(shí)現(xiàn)行文字鏈接提示效果的方法
- jquery刪除數(shù)據(jù)記錄時(shí)的彈出提示效果
- jQuery表單獲取和失去焦點(diǎn)輸入框提示效果的實(shí)例代碼
- jQuery實(shí)現(xiàn)的超鏈接提示效果示例【附demo源碼下載】
相關(guān)文章
jQuery插件zoom實(shí)現(xiàn)圖片全屏放大彈出層特效
jQuery zoom是一款能夠查看相冊大圖的jQuery彈出層插件,點(diǎn)擊相冊的縮略圖,就會(huì)彈出該相片對應(yīng)的大圖,并且?guī)в袀€(gè)性的加載動(dòng)畫,還有上一張下一張按鈕以及關(guān)閉按鈕。使用方法非常簡單。兼容IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗等瀏覽器。2015-04-04jquery.simple.tree插件 更簡單,兼容性更好的無限樹插件
在這里介紹一款小巧,功能強(qiáng)大,能拖拽,支持異步,且兼容性更高的jquery Tree插件2010-09-09最新最熱最實(shí)用的15個(gè)jQuery插件匯總
本文給大家匯總介紹了2015年7月最新發(fā)布的最熱最實(shí)用的15款jQuery插件,都有著非常炫酷的效果,十分的實(shí)用,這里推薦給大家。2015-07-07jQuery實(shí)現(xiàn)對象轉(zhuǎn)為url參數(shù)的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)對象轉(zhuǎn)為url參數(shù)的方法,涉及jQuery針對字符串的遍歷與轉(zhuǎn)換操作相關(guān)技巧,需要的朋友可以參考下2017-01-01jQuery實(shí)現(xiàn)的移動(dòng)端圖片縮放功能組件示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的移動(dòng)端圖片縮放功能組件,結(jié)合實(shí)例形式詳細(xì)分析了jQuery基于移動(dòng)端的圖片縮放功能組件實(shí)現(xiàn)原理、步驟、核心代碼及使用技巧,需要的朋友可以參考下2020-05-05