编程 Javascript

javascript实现划词标记+划词搜索功能

Posted in Javascript onMarch 06, 2007

<!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 相关文章推荐

双击滚屏-常用推荐

Nov 29 Javascript

javascript 必知必会之closure

Sep 21 Javascript

Javascript 中文字符串处理额外注意事项

Nov 15 Javascript

Javascript 面向对象继承

May 13 Javascript

JS清除选择内容的方法

Jan 29 Javascript

新手快速学习JavaScript免费教程资源汇总

Jun 25 Javascript

BootStrap下jQuery自动完成的样式调整

May 30 Javascript

javascript实现简单的可随机变色网页计算器示例

Dec 30 Javascript

使用D3.js制作图表详解

Aug 13 Javascript

vue-router两种模式区别及使用注意事项详解

Aug 01 Javascript

JavaScript实现Tab选项卡切换

Feb 13 Javascript

在Vue 中实现循环渲染多个相同echarts图表

Jul 20 Javascript

用一段js程序来实现动画功能

Mar 06 #Javascript

用javascript动态调整iframe高度的方法

Mar 06 #Javascript

静态图片的十一种滤镜效果--不支持Ie7及非IE浏览器。

Mar 06 #Javascript

限制文本字节数js代码

Mar 06 #Javascript

用Div仿showModalDialog模式菜单的效果的代码

Mar 05 #Javascript

HTML-CSS群中单选引发的“事件”

Mar 05 #Javascript

用javascript实现页面打印的三种方法

Mar 05 #Javascript