jQuery实现鼠标选中文字后弹出提示窗口效果
<!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实现鼠标选中文字后弹出提示窗口效果的更多相关文章
- js单击输入框后弹出提示信息效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Jquery实现鼠标hover图片遮罩弹出提示层特效
1.引入JS文件和所需要的样式文件 2.简单的写上以下18行代码就可以实现了 $(document).ready(function() { $("div.tip_trigger a.img& ...
- CSS 鼠标选中文字后改变背景色的实现代码
废话不多说,直接上代码 ::-moz-selection{background:#93C; color:#FCF;} ::selection {background:#93C; color:#FCF; ...
- JQuery弹出层,点击按钮后弹出遮罩层,有关闭按钮
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...
- JQuery弹出层,点击按钮后弹出遮罩层,有关闭按钮【转】
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...
- html body标签的几个属性 禁用鼠标右键,禁用鼠标选中文字等
<body oncontextmenu='return false' ondragstart='return false' onselectstart ='return false' onsel ...
- 从零开始,开发一个 Web Office 套件(9):拖动鼠标选中文字 Edge Case
这是一个系列博客,最终目的是要做一个基于 HTML Canvas 的.类似于微软 Office 的 Web Office 套件(包括:文档.表格.幻灯片--等等). 博客园:<从零开始, 开发一 ...
- [转]jquery Fancybox丰富的弹出层效果
本文转自:http://www.helloweba.com/view-blog-65.html Fancybox是一款优秀的jquery插件,它能够展示丰富的弹出层效果.前面我们有文章介绍了facyb ...
- JQuery用鼠标选文字来发新浪微博
最近注意到新浪博客有个小功能,就是当鼠标选中一段文字时会浮现一个小图片,点击这个图片可以把选中内容发送到新浪微博,一时兴起昨晚就写了一个Demo玩了一下,代码超简单,没优化,有兴趣的朋友可以自己改进. ...
随机推荐
- 李洪强iOS开发之FMDB线程安全的用法
// // ViewController.m // 04 - FMDB线程安全的用法 // // Created by 李洪强 on 2017/6/6. // Copyright © 2017 ...
- Ribbon对于SocketTimeOutException重试的坑以及重试代码解析
背景 本文基于Spring-Cloud, Daltson SR4 微服务一般多实例部署,在发布的时候,我们要做到无感知发布:微服务调用总会通过Ribbon,同时里面会实现一些重试的机制,相关配置是: ...
- 为何C语言(的函数调用)需要堆栈,而汇编语言却不需要堆栈
http://www.cnblogs.com/myblesh/archive/2012/04/07/2435737.html 之前看了很多关于uboot的分析,其中就有说要为C语言的运行,准备好堆栈. ...
- VisualVM使用Jstatd和JMX远程监控配置(转载)
一.Jstatd远程监控服务器配置 jstat可以实时显示本地或远程JVM进程中类装载.内存.垃圾收集.JIT编译等数据.如果要显示远程JVM信息,需要远程主机开启RMI支持,详情如下: 1. 在JA ...
- C中fread()函数的返回值
这个问题很容易搞错,并导致很多问题,需要强调的是fread函数返回的并不是字节数. realRead = fread(buf,item,count,fp) (每次读item大小的数据块,分cou ...
- SpringMVC 之类型转换Converter详解转载
SpringMVC之类型转换Converter详解 本文转载 http://www.tuicool.com/articles/uUjaum 1.1 目录 1.1 目录 1.2 ...
- 工作队列workqueue应用
工作队列是另一种将工作推后执行的形式,它可以把工作交给一个内核线程去执行,这个下半部是在进程上下文中执行的,因此,它可以重新调度还有睡眠. 区分使用软中断/tasklet还是工作队列比较简单,如果推后 ...
- 分享一下自己写的Python 3的各种PDF文档【花了半年时间那】
这些文档花了我半年的时间去整理.因为是第一次进行整理,希望帮助后来者少走弯路.毕竟是第一次整理.哪些地方不到位,希望大家和我练习,我们一起把它做好,以下就直接给出下载地址了,都是免积分的下载奥.因此. ...
- windows 搭建 subversion+TortoiseSVN
1.版本 (a)Apache 2.2.25:httpd-2.2.25-win32-x86-no_ssl.msi (b)Subversion:Setup-Subversion-1.8.5.msi (c) ...
- 利用层的table-row、table-cell属性进行页面布局
利用层的table-row.table-cell属性可以进行等高.宽度自适应页面布局,这是参看了<我所知道的几种display:table-cell的应用>及<基于display:t ...