我需要在页面中增加一个js代码,当用户用鼠标选择文字(鼠标拖动涂蓝文字)时,会出现一个层,提示与这个选择文字有个的信息
解决方案 »
- |zyciis| 在家帮看看哪里有这个Jquery suggest 效果的插件 谢谢
- javascript 在线代码测试
- 如何用swfupload实现以下效果?我只能发表100分的帖子,如能提供整篇代码.加分相赠.
- 非常奇怪的问题,百思不解.....
- 一个很急的问题,请教各位朋友,我的错在哪里?
- 帮帮忙吧,快急死我了,关于xmlhttp的问题
- jquery parseJson报错SyntaxError: Unexpected token b
- 请帮我看看以下代码错在哪里?错误提示是:缺少对象!谢谢
- 有判断是否为合法日期的函数吗?
- 一段生成随机数的代码中的问题!!
- 我想到一个JavaScript绘图的办法
- 请推荐一个不错的JavaScript编辑器,谢谢。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>无标题 1</title>
</head><body>
<div style=" font-size:20px">
我需要在页面中增加一个js代码,当用户用鼠标选择文字(鼠标拖动涂蓝文字)时,会出现一个层,提示与这个选择文字有个的信息
</div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/>
<div id="show"></div>
</body>
<script type="text/javascript">
//记录选区大小,位置
var rect = {
left:-1,
top:-1,
width:-1,
height:-1,
start_left:-1
};
//这个我就不说了……
function $(id)
{
return document.getElementById(id);
}
//当选区改变时,改变选区的属性
document.onselectionchange=function(){
var sel = document.selection.createRange();
rect.left = sel.boundingLeft;
rect.top = sel.boundingTop;
rect.width = sel.boundingWidth;
rect.height = sel.boundingHeight;
rect.start_left = sel.offsetLeft;
rect.end_left = sel.offsetTop;
};
//当鼠标移动时,得到鼠标的绝对位置
document.onmousemove = function(){
var position = getMouse(window.event);
if(ptInRect(rect,position))
{
document.title = "鼠标在选区中!!!!!!!!!!!";
$("show").innerHTML="选择的文字是--->"+document.selection.createRange().text;
}
else
document.title = "鼠标不在选区中";
}
//判断鼠标是否在矩形(也就是选区,选区是一个矩形)内
function ptInRect(rect,pt)
{
if(pt.x>rect.left&&pt.x<rect.left+rect.width&&pt.x>rect.start_left)
if(pt.y>rect.top&&pt.y<rect.top+rect.height)
return true;
return false;
}
//得到鼠标的位置
function getMouse(ev)
{
if(ev.pageX || ev.pageY)
{
return {x:ev.pageX, y:ev.pageY};
}
return {
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y:ev.clientY + document.body.scrollTop - document.body.clientTop
};
}
</script></html>