快捷導(dǎo)航

javascript實(shí)現(xiàn)劃詞標(biāo)記+劃詞搜索功能

更新時(shí)間：2007年03月06日 00:00:00 作者：

<!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="關(guān)閉/打開劃詞功能">  
<p>qrasfdasfasfdasfsafasdfsafsafasdfasdfasd</p>  
</body>  
</html> 

在頁面中加上這串代碼就行了，同時(shí)還有搜索功能。演示效果就請看本BLOG頁面上用鼠標(biāo)劃選文字的效果

沒來得及整理代碼，看上去有點(diǎn)亂。

您可能感興趣的文章:

javascript實(shí)現(xiàn)劃詞標(biāo)記+劃詞搜索功能

相關(guān)文章

JavaScript日期時(shí)間格式化函數(shù)分享
這篇文章主要介紹了JavaScript日期時(shí)間格式化函數(shù)分享,需要的朋友可以參考下
2014-05-05
詳解JavaScript之ES5的繼承
這篇文章主要介紹了JavaScript之ES5的繼承的相關(guān)資料，文中示例代碼非常詳細(xì)，幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下
2020-07-07
JavaScript控制瀏覽器全屏及各種瀏覽器全屏模式的方法、屬性和事件
這篇文章主要介紹了JavaScript控制瀏覽器全屏及各種瀏覽器全屏模式的方法、屬性和事件的相關(guān)資料,需要的朋友可以參考下
2015-12-12
微信小程序移動(dòng)拖拽視圖-movable-view實(shí)例詳解
這篇文章主要介紹了微信小程序移動(dòng)拖拽視圖-movable-view的實(shí)例代碼，代碼簡單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-08-08
原生態(tài)js,鼠標(biāo)按下后,經(jīng)過了那些單元格的簡單實(shí)例
下面小編就為大家?guī)硪黄鷳B(tài)js,鼠標(biāo)按下后,經(jīng)過了那些單元格的簡單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-08-08
Javascript計(jì)算二維數(shù)組重復(fù)值示例代碼
這篇文章主要給大家介紹了利用Javascript計(jì)算二維數(shù)組重復(fù)值的方法，文中給出了詳細(xì)的示例代碼，相信對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流。
2016-12-12
Javascript圖像處理—為矩陣添加常用方法
上一篇文章，我們定義了矩陣，這篇文章我們來給矩陣添加一些常用方法比如：toString方法、clone方法等，需要了解的朋友可以詳細(xì)參考下
2012-12-12
uni-app使用微信小程序云函數(shù)的步驟示例
這篇文章主要介紹了uni-app使用微信小程序云函數(shù)的步驟示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-05-05
ES6新增數(shù)據(jù)結(jié)構(gòu)WeakSet的用法詳解
WeakSet和Set類似，同樣是元素不重復(fù)的集合，它們的區(qū)別是WeakSet內(nèi)的元素必須是對象，不能是其它類型。接下來通過本文給大家詳細(xì)介紹ES6新增數(shù)據(jù)結(jié)構(gòu)WeakSet的用法，感興趣的朋友一起看看吧
2017-08-08
使用html+js+css 實(shí)現(xiàn)頁面輪播圖效果(實(shí)例講解)
下面小編就為大家?guī)硪黄褂胔tml+js+css 實(shí)現(xiàn)頁面輪播圖效果(實(shí)例講解)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-09-09