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)
May 13 Javascript
js读取本地excel文档数据的代码
Nov 11 Javascript
Jquery中Ajax 缓存带来的影响的解决方法
May 19 Javascript
jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果
Apr 24 Javascript
Javascript中Event属性搜集整理
Sep 17 Javascript
JS实现图片产生波纹一样flash效果的方法
Feb 27 Javascript
js创建对象的方法汇总
Jan 07 Javascript
AngularJS 入门教程之HTML DOM实例详解
Jul 28 Javascript
微信小程序 限制1M的瘦身技巧与方法详解
Jan 06 Javascript
angularJs 表格添加删除修改查询方法
Feb 27 Javascript
浅谈node.js 命令行工具(cli)
May 10 Javascript
React中使用UMEditor的方法示例
Dec 27 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
一些操作和快捷键的理解和讨论
2020/03/04 星际争霸
香妃
2021/03/03 冲泡冲煮
php下实现在指定目录搜索指定类型文件的函数
2008/10/03 PHP
PHP header()函数使用详细(301、404等错误设置)
2013/04/17 PHP
php读取csv文件并输出的方法
2015/03/14 PHP
PHP设置头信息及取得返回头信息的方法
2016/01/25 PHP
Apache PHP MySql安装配置图文教程
2016/08/27 PHP
列表内容的选择
2006/06/30 Javascript
javascript 异常处理使用总结
2009/06/21 Javascript
jquery与google map api结合使用 控件,监听器
2010/03/04 Javascript
仅IE6/7/8中innerHTML返回值忽略英文空格的问题
2011/04/07 Javascript
js关闭子窗体刷新父窗体实现方法
2012/12/04 Javascript
JavaScript将相对地址转换为绝对地址示例代码
2013/07/19 Javascript
js获取控件位置以及不同浏览器中的差别介绍
2013/08/08 Javascript
JQuery中基础过滤选择器用法实例分析
2015/05/18 Javascript
JavaScript 模块的循环加载实现方法
2015/12/13 Javascript
js中使用使用原型(prototype)定义方法的好处详解
2016/07/04 Javascript
关于JS中二维数组的声明方法
2016/09/24 Javascript
Angular获取手机验证码实现移动端登录注册功能
2017/05/17 Javascript
新手快速入门微信小程序组件库 iView Weapp
2019/06/24 Javascript
Vue使用路由钩子拦截器beforeEach和afterEach监听路由
2020/11/16 Javascript
用Python写一段用户登录的程序代码
2018/04/22 Python
python实现批量修改图片格式和尺寸
2018/06/07 Python
Python根据成绩分析系统浅析
2019/02/11 Python
Python Opencv提取图片中某种颜色组成的图形的方法
2019/09/19 Python
军用级手机壳,专为冒险而建:Zizo Wireless
2019/08/07 全球购物
初一体育教学反思
2014/01/29 职场文书
中秋寄语大全
2014/04/11 职场文书
查摆问题自我剖析材料
2014/08/18 职场文书
党的群众路线对照检查材料
2014/08/27 职场文书
中学生社区服务活动报告
2015/02/05 职场文书
宾馆安全管理制度
2015/08/06 职场文书
演讲稿:​快乐,从不抱怨开始!
2019/04/02 职场文书
七年级作文(600字3篇)
2019/09/24 职场文书
MySQL表字段时间设置默认值
2021/05/13 MySQL
nginx location 带斜杠【 / 】与不带的区别
2022/04/13 Servers