本文實例講述了jQuery實現鼠標選中文字后彈出提示窗口效果。分享給大家供大家參考，具體如下：
運行效果截圖如下：
具體代碼如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title></title></head><body><!--在文章內添加 selected-article ID--><div id="selectedArticle"> <p>歡迎來到武林網...</p> <p>武林網是國內專業的網站建設資源、腳本編程學習類網站...</p> <p>提供asp、php、asp.net、javascript、jquery、vbscript、dos批處理、網頁制作、網絡編程、網站建設等編程資料...</p></div><script type="text/javascript" src="jquery-1.7.2.min.js"></script><script type="text/javascript">document.writeln("<style>");document.writeln(".tooltip {width:219px;height:33px;background:url(bg-wenzi.png) no-repeat left top;}");document.writeln(".tooltip a {width:219px;height:33px;display:block;}");document.writeln("</style>");$(function () { //將該id下的文章，鼠標選中松開后彈窗 $("#selectedArticle").mouseup(function (e) { var x = 10; var y = 10; var r = ""; if (document.selection) { r = document.selection.createRange().text; } else if (window.getSelection()) { r = window.getSelection(); } if (r!= "") { var bowen = " "; var tooltip = "<div id='tooltip' class='tooltip'><a href='###' target='_blank'>" + bowen + "</a></div>"; $("body").append(tooltip); $("#tooltip").css({ "top": (e.pageY + y) + "px", "left": (e.pageX + x) + "px", "position": "absolute" }).show("fast"); } }).mousedown(function () { $("#tooltip").remove(); });});</script></body></html>完整實例代碼點擊此處本站下載。
更多關于jQuery相關內容感興趣的讀者可查看本站專題：《jQuery擴展技巧總結》、《jQuery常用插件及用法總結》、《jQuery拖拽特效與技巧總結》、《jQuery表格(table)操作技巧匯總》、《jquery中Ajax用法總結》、《jQuery常見經典特效匯總》、《jQuery動畫與特效用法總結》及《jquery選擇器用法總結》
希望本文所述對大家jQuery程序設計有所幫助。
新聞熱點
疑難解答
