划词翻译的实现

 <a style="font-weight:bold;background-color:#996600;padding:4px;border:3px solid #eee;color:#fff" href="javascript:void((function(){var scr=document.createElement('script');var url='http://127.0.0.1/transdemo/trans.js';scr.setAttribute('src',url);document.getElementsByTagName('head').item(0).appendChild(scr);})())" οnclick="return false;">划词翻译</a>


(function(){
    
    var timer = null;
    var langFrom = "";
    var langTo = "zh";
    /**
     * 绑定事件
     */
    function bind(obj, type, fn){
        if (obj.attachEvent) {
            obj['e' + type + fn] = fn;
            obj[type + fn] = function(){
                obj['e' + type + fn](window.event);
            }
            obj.attachEvent('on' + type, obj[type + fn]);
        }
        else
            obj.addEventListener(type, fn, false);
    }
    /**
     * 取得页面上选中的内容
     */
    function select(){
        if (window.getSelection) {
            return window.getSelection();
        }
        else if (document.getSelection) {
            return document.getSelection();
        }
        else if (document.selection) {
            return document.selection.createRange().text;
        }
        else {
            return false;
        }
    }
    /**
     * 向页面中写入script标签
     */
    function createScript(url){
        var existScr = document.getElementById('ocTransScr');
        if (existScr) {
            existScr.parentNode.removeChild(existScr);
        }
        var scr = document.createElement('script');
        scr.setAttribute('id', 'ocTransScr');
        scr.setAttribute('type', 'text/javascript');
        scr.setAttribute('src', url);
        document.getElementsByTagName('head')[0].appendChild(scr);
    }
    /**
     * 鼠标弹起后的处理
     */
    function dealMouseUp(){
        timer ? clearTimeout(timer) : null;
        timer = setTimeout(function(){
            var selectText = select();
            if (selectText != "") {
                goTrans(select());
            }
        }, 600);
    }
    /**
     * jsonp方式请求google翻译接口
     */
    function goTrans(text){
        alert(text)
        var googleTransUrl = "http://ajax.googleapis.com/ajax/services/language/translate?v=1.0&q="+encodeURI(text)+"&langpair=en|zh-CN";
        createScript(googleTransUrl);
    }
    /**
     * 处理响应
     */
    function onTransBack(json){
        document.getElementById("ocTransBoxResult").innerHTML = json.responseData.translatedText;
    }
    function createTransbox() {
        var box = document.createElement("div");
        box.id = "ocTransBox";
        box.unselectable = "on";
        box.style.position = "fixed";
        box.style.top = "20px";
        box.style.right = "20px";
        box.style.zIndex = 1000;
        box.style.maxWidth = "280px";
        box.style.backgroundColor = "#996600";
        box.style.color = "#FFFFFF";
        box.style.padding = "6px";
        box.style.border = "3px solid #FFFFFF";
        box.style.visibility = 'visible';
        box.innerHTML = "<b>翻译:</b><br /><span style='font-size:13px' id='ocTransBoxResult'></span>";
        document.getElementsByTagName('body')[0].appendChild(box);
    }
    /**
     * 注册到window
     */
    window.onTransBack = onTransBack;
    /**
     * 绑定事件
     */
    createTransbox();
    bind(document, "mouseup", dealMouseUp);
    
})()



  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值