首頁 > 開發者 > JavaScript
jQuery實現滑鼠選中文字後彈出提示視窗效果【附demo源碼】，jquerydemo
本文執行個體講述了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>
完整執行個體代碼點擊此處本站下載。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
