利用Google的翻译接口进行网页划线翻译

最新推荐文章于 2026-06-18 14:36:14 发布

原创最新推荐文章于 2026-06-18 14:36:14 发布 · 1k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#google #function #div #string #date

本文介绍了一个实用的网页功能，允许用户通过选择页面上的文本并立即查看其英文翻译。该功能利用Google翻译的JavaScript接口实现，能够在用户选择文本后快速生成浮动窗口展示翻译结果。

实现在的功能，在网页上选择一段代码，当公开鼠标后，在动态显出的div中显示英文翻译，使用的是google翻译的js接口。

代码如下：

/******************************************************************************* date:2009.06.02 author: shjiye description: translates string that selected. */ function handleSelected(ev) { ev = ev||window.event; // 事件 var str = window.getSelection?window.getSelection().toString():(document.getSelection?document.getSelection():document.selection.createRange().text); if (document.selection != undefined) { document.selection.empty(); } var dest = 'en'; if (str.length > 0){ var mousePos = mouseCoords(ev); f_creatediv(mousePos); google.language.detect(str,function(result) {google.language.translate(str,result.language,dest,handleSelectedTrans)}); } } function handleSelectedTrans(result) { document.getElementById("shjiye_trans_div").innerHTML = result.translation; } function f_creatediv(pos){ //是否存在 var objdiv = document.getElementById("shjiye_trans_div"); if (objdiv == undefined) { objdiv = document.createElement("DIV"); var objname="shjiye_trans_div" objdiv.id = objname; objdiv.style.position = 'absolute'; objdiv.style.zIndex = '1000'; objdiv.style.top = pos.x; objdiv.style.left = pos.y; objdiv.style.background = '#FFFFD8'; objdiv.style.visibility = 'visible'; objdiv.style.maxWidth = 240; objdiv.style.border = "1px solid #99E300"; objdiv.style.paddingLeft = 10; objdiv.style.fontSize = '14px'; objdiv.style.paddingRight = 10; objdiv.style.paddingTop = 15; objdiv.style.paddingBottom = 20; document.body.appendChild(objdiv); } if (objdiv != undefined){ objdiv.style.top = pos.y; objdiv.style.left = pos.x; objdiv.style.visibility = 'visible'; } setTimeout('hideTrans()',60000); } function mouseCoords(ev){ if(ev.pageX || ev.pageY){ return {x:ev.pageX, y:ev.pageY}; } return { x:ev.clientX + document.body.scrollLeft - document.body.clientLeft, y:ev.clientY + document.body.scrollTop - document.body.clientTop }; } //过一定时间隐藏div function hideTrans() { var trans_div = document.getElementById("shjiye_trans_div"); if (trans_div != undefined) { trans_div.style.visibility = 'hidden'; trans_div.innerHTML = ''; } } /******************************************************************划线翻译***************************************/