当前位置:软件学堂 > 资讯首页 > 网络编程 > 编程其他 > JS实现划词搜索

JS实现划词搜索

2012/11/13 07:44:46作者:佚名来源:网络

移动端

【实例名称】

JS实现划词搜索

【实例描述】

在一段文本中选择一个单词,然后调用Google的搜索功能对此单词进行搜索,这就是本例要实现的划词搜索功能。

【实例代码】

<html> <head> <title>划词搜索-学无忧(www.xue51.com)</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>

 

【运行效果】

                                                            划词后的效果

划词搜索运行效果

                                                                           搜索的效果

划词搜索运行效果

【难点剖析】

本例的难点有3个,获取用户选择的词,动态弹出div层让用户调用搜索功能,调用Google实现搜索。获取用户选择的词在“showselect”方法中实现,主要依靠“createRaIlge”和“select”两个文本区域选择方法。动态弹出div层是常见的层特效,就是设置层的隐藏和显示。调用Google搜索的实现在“googleDiv”方法中完成,这里注意传递给Google的参数。

【源码下载】

为了JS代码的准确性,请点击:划词搜索 进行本实例源码下载 

标签: JS实现  划词  搜索