<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
<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实现鼠标选中文字后弹出提示窗口效果的更多相关文章

  1. js单击输入框后弹出提示信息效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. Jquery实现鼠标hover图片遮罩弹出提示层特效

    1.引入JS文件和所需要的样式文件 2.简单的写上以下18行代码就可以实现了 $(document).ready(function() { $("div.tip_trigger a.img& ...

  3. CSS 鼠标选中文字后改变背景色的实现代码

    废话不多说,直接上代码 ::-moz-selection{background:#93C; color:#FCF;} ::selection {background:#93C; color:#FCF; ...

  4. JQuery弹出层，点击按钮后弹出遮罩层，有关闭按钮

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...

  5. JQuery弹出层，点击按钮后弹出遮罩层，有关闭按钮【转】

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...

  6. html body标签的几个属性 禁用鼠标右键，禁用鼠标选中文字等

    <body oncontextmenu='return false' ondragstart='return false' onselectstart ='return false' onsel ...

  7. 从零开始，开发一个 Web Office 套件（9）：拖动鼠标选中文字 Edge Case

    这是一个系列博客,最终目的是要做一个基于 HTML Canvas 的.类似于微软 Office 的 Web Office 套件(包括:文档.表格.幻灯片--等等). 博客园:<从零开始, 开发一 ...

  8. [转]jquery Fancybox丰富的弹出层效果

    本文转自:http://www.helloweba.com/view-blog-65.html Fancybox是一款优秀的jquery插件,它能够展示丰富的弹出层效果.前面我们有文章介绍了facyb ...

  9. JQuery用鼠标选文字来发新浪微博

    最近注意到新浪博客有个小功能,就是当鼠标选中一段文字时会浮现一个小图片,点击这个图片可以把选中内容发送到新浪微博,一时兴起昨晚就写了一个Demo玩了一下,代码超简单,没优化,有兴趣的朋友可以自己改进. ...

随机推荐

  1. 【Android】10.2 使用Android Support Library增强组件功能

    分类:C#.Android.VS2015: 创建日期:2016-02-18 一.简介 Android Support Library提供了一些非常漂亮的附加功能,由于这些库的引用办法都差不多,所以这一 ...

  2. Winform文件夹图片批量压缩整理修改

    效果图: 窗体设计器生成的代码: namespace ImageCompact { partial class MainForm { /// <summary> /// 必需的设计器变量. ...

  3. C++ string的用法

    之所以抛弃char*的字符串而选用C++标准程序库中的string类,是因为他和前者比较起来,不必担心内存是否足够.字符串长度等等,而且作为一个类出现,他集成的操作函数足以完成我们大多数情况下(甚至是 ...

  4. linux命令（28）：Linux下SCP无需输入密码传输文件,python 中scp文件

    python 中scp文件:(如果下面的发送免密码已经完成的话,就直接能用下面这个) os.system('scp "%s" "%s:%s"' % (" ...

  5. solr进阶九：solr对数字和单个字符的搜索

    solr中配有分词器,但分词器里面有大写转换为小写的过滤器时,数字就会被过滤.比如123中国ABC.123就会被过滤掉了,所以才查1|12|123都会失败. <Solr 数字字符不能搜索的一个问 ...

  6. 【Java】包装类总结

    Java语言是一个面向对象的语言,但是Java中的基本数据类型却是不面向对象的,这在实际使用时存在很多的不便,为了解决这个不足,在设计类时为每个基本数据类型设计了一个对应的类进行代表,这样八个和基本数 ...

  7. tomcat 部署时修改服务器时间

    tomcat 在部署时修改了服务器时间  会出现以下状况 1.session 失效 2.修改的文件不会正确被tomcat热部署进去

  8. js photoswipe 相册使用 移动pc端均可

    http://photoswipe.com/ 官网  这里使用的是最新 4.1.1版本 http://photoswipe.com/documentation/getting-started.html ...

  9. mysql中使用正则表达式查询

    正则表达式功能确实很强大,那天专门抽空学学,这里就暂时在mysql查询中用用. 正则表达式强大而灵活,可以应用于非常复杂的查询. 选项 说明(自动加匹配二字) 例子 匹配值示例 ^ 文本开始字符 '^ ...

  10. kubernetes外部访问的几种方式

    1:用的最多的是nodePort,如下nginx的service,将type设置成NodePort,同时nodePort设置成30010(k8s为了不与宿主机的端口冲突,默认限制了30000以下的端口 ...