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 相关文章推荐
jquer之ajaxQueue简单实现代码
Sep 15 Javascript
JavaScript打印iframe内容示例代码
Aug 20 Javascript
JS 实现列表与多选框选择附预览动画
Oct 29 Javascript
jQuery学习心得总结(必看篇)
Jun 10 Javascript
node.js基础知识小结
Feb 26 Javascript
vue定义全局变量和全局方法的方法示例
Aug 01 Javascript
js实现图片上传并预览功能
Aug 06 Javascript
浅谈angular表单提交中ng-submit的默认使用方法
Sep 30 Javascript
微信小程序实现留言板
Oct 31 Javascript
vue如何截取字符串
May 06 Javascript
vue swipe自定义组件实现轮播效果
Jul 03 Javascript
python虚拟环境 virtualenv的简单使用
Jan 21 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
这部番真是良心,画质好到像风景区,剧情让人跟着小公会热血沸腾
2020/03/10 日漫
[原创]php求圆周率的简单实现方法
2016/05/30 PHP
微信随机生成红包金额算法php版
2016/07/21 PHP
Yii1.1中通过Sql查询进行的分页操作方法
2017/03/16 PHP
yii2 url重写并隐藏index.php方法
2018/12/10 PHP
PHP反射学习入门示例
2019/06/14 PHP
Mozilla中显示textarea中选择的文字
2006/09/07 Javascript
jQuery 性能优化指南 (1)
2009/05/21 Javascript
JavaScript调用Activex控件的事件的实现方法
2010/04/11 Javascript
js解析与序列化json数据(二)序列化探讨
2013/02/01 Javascript
PHP配置文件php.ini中打开错误报告的设置方法
2015/01/09 PHP
JavaScript实现cookie的写入、读取、删除功能
2015/11/05 Javascript
使用jQuery的easydrag插件实现可拖动的DIV弹出框
2016/02/19 Javascript
JavaScript实现显示函数调用堆栈的方法
2016/04/21 Javascript
在node中如何使用 ES6
2017/04/22 Javascript
vue-ajax小封装实例
2017/09/18 Javascript
不使用JavaScript实现菜单的打开和关闭效果demo
2018/05/01 Javascript
jquery分页插件pagination使用教程
2018/10/23 jQuery
JavaScript常见事件处理程序实例总结
2019/01/05 Javascript
JavaScript适配器模式原理与用法实例详解
2020/03/09 Javascript
JS 数组和对象的深拷贝操作示例
2020/06/06 Javascript
[15:46]教你分分钟做大人——沙王
2015/03/11 DOTA
python正则表达式中的括号匹配问题
2014/12/14 Python
Python排序搜索基本算法之选择排序实例分析
2017/12/09 Python
用Python调用win命令行提高工作效率的实例
2019/08/14 Python
Tensorflow tf.nn.atrous_conv2d如何实现空洞卷积的
2020/04/20 Python
python 如何读、写、解析CSV文件
2021/03/03 Python
荷兰在线体育用品商店:Avantisport.nl
2018/07/04 全球购物
成人教育自我鉴定
2013/11/01 职场文书
户外婚礼策划方案
2014/02/08 职场文书
教师党员一句话承诺
2014/03/28 职场文书
应届生面试求职信
2014/07/02 职场文书
爱的承诺书
2015/01/20 职场文书
广告公司文案策划岗位职责
2015/04/14 职场文书
春风化雨观后感
2015/06/11 职场文书
LayUI+Shiro实现动态菜单并记住菜单收展的示例
2021/05/06 Javascript