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


Posted in Javascript onSeptember 05, 2016

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

运行效果截图如下:

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

具体代码如下:

<!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程序设计有所帮助。

Javascript 相关文章推荐
用javascript getComputedStyle获取和设置style的原理
Oct 10 Javascript
JavaScript基本概念初级讲解论坛贴的学习记录
Feb 22 Javascript
jQuery学习笔记 更改jQuery对象
Sep 19 Javascript
jQuery中after的两种用法实例
Jul 03 Javascript
express的中间件bodyParser详解
Dec 04 Javascript
浅谈javascript对象模型和function对象
Dec 26 Javascript
JavaScript知识点整理
Dec 09 Javascript
VUE实现日历组件功能
Mar 13 Javascript
jQuery实现上传图片前预览效果功能
Aug 03 jQuery
vue引入ueditor及node后台配置详解
Jan 03 Javascript
浅谈Postman解决token传参的问题
Mar 31 Javascript
原生js实现each方法实例代码详解
May 27 Javascript
Vue.js每天必学之表单控件绑定
Sep 05 #Javascript
深入分析node.js的异步API和其局限性
Sep 05 #Javascript
点击页面任何位置隐藏div的实现方法
Sep 05 #Javascript
JS锚点的设置与使用方法
Sep 05 #Javascript
jquery基本选择器匹配多个元素的实现方法
Sep 05 #Javascript
Vue.js实现一个自定义分页组件vue-paginaiton
Sep 05 #Javascript
jquery层级选择器(匹配父元素下的子元素实现代码)
Sep 05 #Javascript
You might like
PHP时间戳使用实例代码
2008/06/07 PHP
php下防止单引号,双引号在接受页面转义的设置方法
2008/09/25 PHP
PHP备份数据库生成SQL文件并下载的函数代码
2012/02/05 PHP
php.ini save_handler 修改不生效的解决办法
2014/07/22 PHP
php获取访问者浏览页面的浏览器类型
2017/01/23 PHP
yii2.0整合阿里云oss上传单个文件的示例
2017/09/19 PHP
一个很酷的拖动层的js类,兼容IE及Firefox
2009/06/23 Javascript
基于jQuery实现图片的前进与后退功能
2013/04/24 Javascript
JavaScript简单实现网页回到顶部功能
2013/11/12 Javascript
javaScript 计算两个日期的天数相差(示例代码)
2013/12/27 Javascript
JavaScript实现复制文章自动添加版权
2016/08/02 Javascript
NodeJS中的MongoDB快速入门详细教程
2016/11/11 NodeJs
原生js实现查询天气小应用
2016/12/09 Javascript
node.js将MongoDB数据同步到MySQL的步骤
2017/12/10 Javascript
React中的refs的使用教程
2018/02/13 Javascript
JavaScript轮播停留效果的实现思路
2018/05/24 Javascript
Vue-router的使用和出现空白页,路由对象属性详解
2018/09/03 Javascript
JSONP 的原理、理解 与 实例分析
2020/05/16 Javascript
Python实现网站文件的全备份和差异备份
2014/11/30 Python
python爬取亚马逊书籍信息代码分享
2017/12/09 Python
Python中的上下文管理器和with语句的使用
2018/04/17 Python
css3的@media属性实现页面响应式布局示例代码
2014/02/10 HTML / CSS
CSS3圆角边框和边界图片效果实例
2016/07/01 HTML / CSS
ALDO英国官网:加拿大女鞋品牌
2018/02/19 全球购物
What's the difference between an interface and abstract class? (接口与抽象类有什么区别)
2012/10/29 面试题
俄罗斯商务邀请函
2014/01/26 职场文书
个人贷款担保书
2014/04/01 职场文书
学生会竞选演讲稿
2014/04/24 职场文书
活动总结怎么写啊
2014/05/07 职场文书
水利局群众路线专题民主生活会发言材料
2014/09/21 职场文书
班子个人四风问题整改措施
2014/10/04 职场文书
学校纪律作风整改措施思想汇报
2014/10/11 职场文书
学生打架检讨书
2014/10/20 职场文书
2015年干部教育培训工作总结
2015/05/15 职场文书
禁毒心得体会范文
2016/01/15 职场文书
MySQL修改默认引擎和字符集详情
2021/09/25 MySQL