<html>
<head>
<title>划词搜索</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body>
<SCRIPT language=Javascript>
document.body.onload=adddiv; //页面加载时动态创建div
document.onmousedown=recordobj; //鼠标按下时触发的事件
document.ondblclick=dbclick; //窗体双击时触发的事件
document.onmouseup=showselect; //鼠标弹起时触发的事件
var eventObj;
var isDouble=false;
var allow=true; //是否启用划词搜索
function isallow()
{
if(allow){
allow=false;
alert('已经关闭');
}
else{
allow=true;
alert('已经打开');
}
}
function dbclick() //双击事件
{
isDouble=true;
}
function recordobj() //当前操作对象
{
eventObj=event.srcElement;
}
function showselect() {
var str="";
if(event.srcElement.tagName!="A"&&event.srcElement.tagName!="INPUT"&&event.srcElement==eventObj&&!isDouble&&allow)
{
var oText=document.selection.createRange();//获取选择文本
if(oText.text.length>0) //如果文本存在
{
str=oText.text;
oText.text="begin"+oText.text+"end"; //包装被选中的文本
}
oText.select(); //实现选择
//设置选中文本的样式-带下划线-变颜色
event.srcElement.innerHTML=event.srcElement.innerHTML.replace("begin","<u style='FONT-WEIGHT: bold;COLOR: #ff3366'>").replace("end","</u>");
}
googleDiv(str) //实现选定文本的搜索
isDouble=false;
}
function googleDiv(str)
{
var obj=document.getElementById("googleDiv");//获取动态添加的div
if(str.length>0)
{
obj.style.display="block"; //显示div
obj.style.position="absolute"; //设置div绝对位置
obj.style.zindex=999;
obj.style.posTop=document.body.scrollTop+event.y-25;//div的Y坐标
obj.style.posLeft=document.body.scrollLeft+event.x+5;//div的X坐标
obj.style.widht=80; //div的宽度
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'>搜索</a>";
}
else
{
obj.style.display="none";
}
}
function adddiv()//动态添加div标签
{
var mobj = document.createElement("div"); //创建div标签
mobj.id="googleDiv"; //设置div标签的id
document.body.appendChild(mobj); //将div添加到窗体中
}
</SCRIPT>
<INPUT type="button" onclick="isallow()" value="关闭/打开划词功能">
<p>This is Test ,please Select,it's will google</p>
</body>
</html>
分享到：
相关推荐
总的来说，"网页划词标记划词搜索功能"是一个利用JavaScript技术提升网页用户体验的功能，它结合了划词标记、划词搜索以及可能的表格和图层特效。通过解压并分析提供的"说明.htm"和"index.htm"文件，我们可以深入...
在JavaScript的世界里，"js划词弹出模态div特效"是一种常见的用户交互设计，它提高了网站的用户体验和互动性。这种技术的核心在于利用JavaScript监听用户的鼠标动作，当用户在网页上选择（划词）文本时，会触发一个...
网页划词标记与划词搜索是网页交互中的一个重要功能，它允许用户在浏览网页时，通过选择（划词）文本块来执行特定的操作，如搜索、翻译或进行其他信息查询。这种技术极大地提升了用户获取信息的效率。在这个压缩包中...
第1章 页面特效 1.1 HTML页面反向显示 1.2 页面自动最大化 1.3 页面自动刷新 1.4 页面的后退、刷新、前进 1.5保护网页源代码 1.6 保护自己的网页不被放入框架 1.7 保护自己的网页不被放入框架 1.8 打印页面的出错...
第1章 页面特效 1.1 HTML页面反向显示 1.2 页面自动最大化 1.3 页面自动刷新 1.4 页面的后退、刷新、前进 1.5保护网页源代码 1.6 保护自己的网页不被放入框架 1.7 保护自己的网页不被放入框架 1.8 打印页面的出错...