jQuery实现鼠标选中文字后弹出提示窗口效果【附演示源码】

本文实例讲述了jQuery实现鼠标选中文字后弹出提示窗口效果。分享给大家供大家参考，具体如下：

运行效果截图如下：

具体代码如下：

！DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN ' ' http://www .w3。org/TR/HTML 4/松散。DTD ' HTML hearteta http-equiv=' Content-Type ' Content=' text/HTML；charset=utf-8 ' title/title/head body！-在文章内添加选定文章' ID - div id='选定文章p欢迎来到我们./p p我们是国内专业的网站建设资源、脚本编程学习类网站./p p提供asp、php、asp.net、javascript、jquery、vbscript、dos批处理、网页制作、网络编程、网站建设等编程资料./p/div脚本类型=' text/JavaScript ' src=' http : jquery-1。7 .2 .量滴js '/script脚本类型=' text/JavaScript '文档。writeln(' style ')；document.writeln(' .工具提示{ width :219 pxh8 :33 px background : URL(BG-文子。巴布亚新几内亚)不重复左上角；}');document.writeln(' .工具提示a { width :219 px h8 :33 px显示：块；}');文件。writeln('/style ')；$(function () { //将该编号下的文章，鼠标选中松开后弹窗$('#selectedArticle ').mouseup(函数(e){ var x=10；var y=10var r=if(文档。选择){ r=文档。选择。创建范围().文本；} else if(窗口。getselection()){ r=window。getselection()；} if (r！=' '){ var bowen=' '；var tooltip=' div id=' tooltip ' class=' tooltip ' a href=' # # # ' target=' _ blank ' ' bowen '/a/div '；$(“正文”).追加（工具提示);$(“# tooltip”).css({ 'top': (e.pageY y) 'px '，' left': (e.pageX x) 'px '，' position': 'absolute' }).show(' fast ')；} }).鼠标向下(函数(){ $(“# tooltip”).移除();});});/脚本/正文/html完整实例代码点击此处本站下载。

更多关于jQuery相关内容感兴趣的读者可查看本站专题： 《jQuery扩展技巧总结》 、 《jQuery常用插件及用法总结》 、 《jQuery拖拽特效与技巧总结》 、 《jQuery表格(table)操作技巧汇总》 、 《jquery中Ajax用法总结》 、 《jQuery常见经典特效汇总》 、 《jQuery动画与特效用法总结》 及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。