javascript实现划词标记+划词搜索功能
来源:互联网 发布:诸神黄昏女神进阶数据 编辑:程序博客网 时间:2024/05/03 15:45
完整示例代码如下
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body>
<SCRIPT language=javascript>
<!--
document.body.onload=adddiv;
document.onmousedown=recordobj;
document.ondblclick=dbclick;
document.onmouseup=showselect;
var starobj,isdb=false,allow=true;
function isallow()
{
if(allow){
allow=false;
alert('is closed');
}
else{
allow=true;
alert('is opend');
}
}
function dbclick()
{
isdb=true;
}
function recordobj()
{
starobj=event.srcElement;
}
function showselect() {
var str="";
if(event.srcElement.tagName!="A"&&event.srcElement.tagName!="INPUT"&&event.srcElement==starobj&&!isdb&&allow)
{
var oText=document.selection.createRange();
if(oText.text.length>0)
{
str=oText.text;
oText.text="BuB"+oText.text+"EuE";
}
oText.select();
event.srcElement.innerHTML=event.srcElement.innerHTML.replace("BuB","<u style='FONT-WEIGHT: bold;COLOR: #ff3366'>").replace("EuE","</u>");
}
searchgoogle(str)
isdb=false;
}
function searchgoogle(str)
{
var obj=document.getElementById("searchgoogle");
if(str.length>0)
{
obj.style.display="block";
obj.style.position="absolute";
obj.style.zindex=999;
obj.style.posTop=document.body.scrollTop+event.y-25;
obj.style.posLeft=document.body.scrollLeft+event.x+5;
obj.style.widht=80;
obj.innerHTML="<a target=_blank href=http://www.google.com/search?ie=UTF-8&oe=UTF-8&q="+str+" style='BORDER-RIGHT: royalblue thin solid; BORDER-TOP: royalblue thin solid; FONT-WEIGHT: bold; BORDER-LEFT: royalblue thin solid; CLIP: rect(auto auto auto auto); COLOR: #ffffff; BORDER-BOTTOM: royalblue thin solid; BACKGROUND-COLOR: inactivecaption; TEXT-DECORATION: none'>Search It!</a>";
}
else
{
obj.style.display="none";
}
}
function adddiv()
{
var mobj = document.createElement("div");
mobj.id="searchgoogle";
document.body.appendChild(mobj);
}
//-->
</SCRIPT>
<INPUT type="button" onclick="isallow()" value="关闭/打开划词功能">
<p>qrasfdasfasfdasfsafasdfsafsafasdfasdfasd</p>
</body>
</html>
在页面中加上这串代码就行了,同时还有搜索功能。演示效果就请看本BLOG页面上用鼠标划选文字的效果
没来得及整理代码,看上去有点乱。
- javascript实现划词标记+划词搜索功能
- javascript实现划词标记划词搜索功能
- javascript实现划词标记+划词搜索功能
- javascript实现划词标记+划词搜索功能
- Javascript实现划词标记+划词搜索功能代码实例
- javascript实现划词标记划词搜索功能修正版,兼容IE及FF
- javascript实现划词标记+划词搜索功能代码实例
- Extjs划词搜索
- 划词搜索原理
- 划词搜索示例
- 划词搜索示例
- QQ2010的划词搜索
- QQ2010 SP1新版划词搜索功能演示
- 如何在网页实现自己的划词搜索
- Ubuntu实现划词翻译
- 流氓软件“划词搜索”、“千橡互联”删除小记
- 有道词典的划词搜索功能加入生成的百度链接
- ubuntu实现简单的划词工具
- 自动备份SQL Server数据库中用户创建的Stored Procedures
- 计划(2006.09)
- .Net和SqlServer的事务处理实例
- c语言之函数参数传递之数组篇
- 比较难的面试题
- javascript实现划词标记+划词搜索功能
- g.729a 音频编解码算法
- java | 代理 | AOP
- ADO.NET 命名规则参考
- 学习中......
- Torque游戏引擎TGE/TGB中文输入的问题解决方案(含代码下载)
- ASP.NET应用程序的安全模型
- 身份验证和授权
- 安全通信