通常我们在阅读新浪博客的时候，当选中文章中的一段文字，会出现下面这一现象：

选中文字后，当我们抬起鼠标会出现一个新浪的分享按钮，这有利于我们很方便的将有用的文字信息分享到微博。那么这种效果是如何实现的？

首先想的是，如何把用户选中的文字保存下来呢？

在javascript中，它为我们提供　document.selection.createRange().text　这样一个方法，它返回的是一个字符串，但是只适用ie。在其他的浏览器，则是用的 window.getSelection().toString()　。

于是我们封装这个函数，以便兼容多个浏览器：

function textSelect(){　　
    if(document.selection){　// ie
        return document.selection.createRange().text;
    }else{ //标准
        return window.getSelection().toString();
    }
}

文字选中后，鼠标抬起分享按钮的出现？

我们在html中定义一个绝对定位的分享层：

<div id="share" style="position:absolute;display:none;"><img src="../images/share.gif"></div>

接着，将鼠标的坐标点赋给分享层并显示这个层，在这里我们做了一个选中文字长度的条件限制，如果文字长度大于10,则分享层才显示。

ele.onmouseup=function(ev){
    var oEvent=ev||event,
        left=oEvent.clientX,
        top=oEvent.clientY; 
    
    if(textSelect().length>10){
        setTimeout(function(ev){
            oShare.style.display="block";
            oShare.style.left=left+"px";
            oShare.style.top=top+"px";
        }, 100) //100ms后出现，防止在IE下触发太快，影响选中文字的范围
    }else{
        oShare.style.display="none";
    }
}

最后，如何把选中的文字带到微博发布框？

当我们点击分享按钮时，网页会跳到分享发布框页面，这乍一看是个很复杂的问题，的确，有些东西不知道就算你想破脑袋也无从入手。在这里，新浪给我们提供了一个分享接口，将分享发布框页面的网址拆分如下：

http://v.t.sina.com.cn/share/share.php?searchPic=false&title="+textSelect()+"&url=window.location.href

红色部分是新浪分享发布页面的网址及相关参数，深蓝色部分是你的分享文字，绿色部分是你需要分享的网页地址（博文地址）。

于是就有：

oShare.onclick=function(){  
    window.open("http://v.t.sina.com.cn/share/share.php?searchPic=false&title="+textSelect()+"&url=window.location.href");
}

以上就是分享文字效果的步骤讲解。

demo的完整代码如下：

<p id=”p1″>本书从最早期Netscape浏览器中的JavaScript开始讲起，直到当前它对XML和Web服务的具体支持，内容主要涉及JavaScript的语言特点、JavaScript与浏览器的交互、更高级的JavaScript技巧，以及与在Web应用程序中部署JavaScript解决方案有关的问题，如错误处理、调试、安全性、优化/混淆化、XML和Web服务，最后介绍应用所有这些知识来创建动态用户界面。”本书作者显然非常了解读者的需要，切中要害，信息密集。单单对客户端通信、Web服务、正则表达式、DOM、XML处理等现代JavaScript技术的详细讲解，就已经物超所值。”</p>
<div id=”share” style=”position:absolute;display:none;”><img src=”../images/share.gif”></div>

<script>
(function(){
    function textSelect(){  //核心函数
        if(document.selection){　// ie
            return document.selection.createRange().text;
        }
        else{ //标准
            return window.getSelection().toString();
        }
    }

    var d=document,oP=d.getElementById("p1"),oShare=d.getElementById("share");
    oP.onmouseup=function(ev){
        var oEvent=ev||event,left=oEvent.clientX,top=oEvent.clientY; 
        if(textSelect().length>10){
            setTimeout(function(ev){
                oShare.style.display="block";
                oShare.style.left=left+"px";
                oShare.style.top=top+"px";
            },100) //100ms后出现，防止在IE下触发太快，影响选中文字的范围

        }　
        else{
            oShare.style.display="none";
        }
    }

    oShare.onclick=function(ev){  //阻止冒泡函数
        var oEvent=ev||event;
        oEvent.cancelBubble=true;
        window.open(‘http://v.t.sina.com.cn/share/share.php?　searchPic=false&title=’+textSelect()+’&url=http://baike.baidu.com/view/605930.htm’);
//这里的百度百科的网址，如果在服务器网页可以使用window.location.href
    }

    document.onclick=function(){　
        oShare.style.display="none"; 
    }
})();
</script>