<!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. Jmeter常见用法

    Jmeter (底层语言是Java)  单进程 Loadrunner (底层语言是C) 多进程 性能更好,更稳定 Tomcat  线程模式(与Java有关的都是单进程) lr的支持最大并发  跟lic ...

  2. sass & compass 实战录

    一.sass 是什么 Css的一种预处理器 是基于css进行语法扩展而成 主要目的是为了提高开发效率,弥补css语法不足的缺陷 同样流行的预处理器还有:less.stylus 二.SASS的基本语法 ...

  3. linux命令（30）：tail

    linux ---tail命令 linux中tail命令---用于查看文件内容 最基本的是cat.more和less. 1. 如果你只想看文件的前5行,可以使用head命令,如: head -5 /e ...

  4. ng-bind和{{}}插值法

    引言 今天调bug的时候遇到了一个问题,就是有的时候加载出来的数据没有数据的时候出现的是{{TeacherName}},一看这个不是我在页面上绑的值吗?怎么这样就显示出来了呢…… 针对这个问题,想起来 ...

  5. mysql linux 区分大小写

    查看大小写区分 mysql> show variables like "%case%"; +------------------------+-------+ | Varia ...

  6. 关联容器——map、set

    map类型通常被称为关联数组,与正常数组类似,不同之处在于其下标不必是整数.我们通过一个关键字而不是位置来查找值(键值对). 与之相对,set就是关键字的简单集合.当只是想知道一个值是否存在时,set ...

  7. [转][SQL] SSIS 简单应用 数据库汇入导出设定& SQL Agent定期排程

    前言 本篇不是要說高深的SSIS 技巧,而是用實例的方式,說明如何應用 Visual Studio 的「Business Intelligence Projects」來建立「Integration S ...

  8. Jar包版本查看方法

    原文:  https://blog.csdn.net/u011287511/article/details/66973559 打开Java的JAR文件我们经常可以看到文件中包含着一个META-INF目 ...

  9. JAVA里使用CKEditor和CKFinder的配置

    在JSP里使用CKEditor和CKFinder的配置 CKEditor的编辑器工具栏中有一项“图片域”,该工具可以贴上图片地址来在文本编辑器中加入图片,但是没有图片上传. “预览”中有一大堆鸟语,看 ...

  10. 【DataStructure】Linked Data Structures

    Arrayss work well for unordered sequences, and even for ordered squences if they don't change much. ...