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 相关文章推荐
javascript Object与Function使用
Jan 11 Javascript
浅析document.ready和window.onload的区别讲解
Dec 18 Javascript
javascript:void(0)的问题使用探讨
Apr 10 Javascript
js 获取范围内的随机数实例代码
Aug 02 Javascript
javascript中活灵活现的Array对象详解
Nov 30 Javascript
jQuery animate()实现背景色渐变效果的处理方法【使用jQuery.color.js插件】
Mar 15 Javascript
JS自定义函数实现时间戳转换成date的方法示例
Aug 27 Javascript
使用JS获取SessionStorage的值
Jan 12 Javascript
React路由管理之React Router总结
May 10 Javascript
vue使用echarts图表的详细方法
Oct 22 Javascript
js使用Promise实现简单的Ajax缓存
Nov 14 Javascript
three.js 利用uv和ThreeBSP制作一个快递柜功能
Aug 18 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
You might like
目录,文件操作详谈―PHP
2006/11/25 PHP
dedecms中显示数字验证码的修改方法
2007/03/21 PHP
PHP 基于文件头的文件类型验证类函数
2012/05/01 PHP
基于HBase Thrift接口的一些使用问题及相关注意事项的详解
2013/06/03 PHP
PHP实现从远程下载文件的方法
2015/03/12 PHP
php实现将任意进制数转换成10进制的方法
2015/04/17 PHP
PHP SOCKET编程详解
2015/05/22 PHP
关于laravel 子查询 &amp; join的使用
2019/10/16 PHP
javascript+xml技术实现分页浏览
2008/07/27 Javascript
Extjs学习笔记之七 布局
2010/01/08 Javascript
Dojo 学习要点
2010/09/03 Javascript
jQuery实现鼠标滑过遮罩并高亮显示效果
2013/07/16 Javascript
window.location 对象所包含的属性
2014/10/10 Javascript
bootstrap实现的自适应页面简单应用示例
2017/03/09 Javascript
npm scripts 使用指南详解
2018/10/08 Javascript
Vue封装的组件全局注册并引用
2019/07/24 Javascript
Python中tell()方法的使用详解
2015/05/24 Python
java中两个byte数组实现合并的示例
2018/05/09 Python
python随机在一张图像上截取任意大小图片的方法
2019/01/24 Python
浅谈Python的条件判断语句if/else语句
2019/03/21 Python
让你Python到很爽的加速递归函数的装饰器
2019/05/26 Python
Django中自定义admin Xadmin的实现代码
2019/08/09 Python
python [:3] 实现提取数组中的数
2019/11/27 Python
基于Python数据分析之pandas统计分析
2020/03/03 Python
django 取消csrf限制的实例
2020/03/13 Python
手把手教你从PyCharm安装到激活(最新激活码),亲测有效可激活至2089年
2020/11/25 Python
jupyter notebook 写代码自动补全的实现
2020/11/02 Python
VSCode中autopep8无法运行问题解决方案(提示Error: Command failed,usage)
2021/03/02 Python
HTML5拖放效果的实现代码
2016/11/17 HTML / CSS
澳大利亚波西米亚风情网上商店:Czarina
2019/03/18 全球购物
致200米运动员广播稿
2014/02/06 职场文书
离婚协议书范本样本
2014/08/19 职场文书
公积金贷款承诺书
2015/04/30 职场文书
2015年教研室工作总结范文
2015/05/23 职场文书
2016应届毕业生自荐信范文
2016/01/28 职场文书
Windows Server 2012 R2服务器安装与配置的完整步骤
2022/07/15 Servers