JS微博分享/简易

效果图

选中了文本内容后，点击图标，跳转到微博分享页面。

HTML

<p id="word">
  Plasma betaine concentrations and urinary betaine
  excretions have high test-retest reliability.
  Abnormal betaine excretion is common in diabetes.
  We aimed to confirm the individuality of plasma beta
  ine and urinary betaine excretion in an overweight po
  pulation with type 2 diabetes and compare this with the
  individuality of other osmolytes, one-carbon metabolites
  and trimethylamine-N-oxide (TMAO), thus assessing their pot
  entia
</p>
<div id="share_weibo"></div>

CSS

图标是在选中之后显示，并且是在文本之上

 *{
      margin: 0;
      padding: 0;
      list-style: none;
    }
    p{
      margin: 100px;
      width: 300px;
    }
    #share_weibo{
      width:26px;
      height: 26px;
      position: absolute;
      display: none;
      background: url("tile.png");
      -webkit-background-size: 100%;
      background-size: 100%;
      position: absolute;
      display: none;
    }

JS

事件分析

当鼠标抬起时（onmouseup）图标出现。
鼠标点击其他处时（onclick），图标隐藏
鼠标点击图标时（onmousedown），跳转到分享页面

特效分析

一、首先肯定要获取选中的文本内容

二、选中内容以后鼠标抬起，在鼠标抬起处显示刚才选中的文本
所以只需要获取鼠标抬起的位置，最后设置图标的left和top值

三、当鼠标点击的不是该图标时的任意位置，图标隐藏
所以只需要写一个document.onclick事件，进行判断即可

四、鼠标点击该图标时，页面跳转至微博分享界面。

代码

获取选中文本内容

/***
 * 获取用户选中的文本内容
 * 可处理ie浏览器和其他浏览器的兼容性问题
 *
 * @return：{{void}}
 * @constructor
 */
if(window.getSelection){
        selectedText=window.getSelection().toString();
      }else{
        selectedText=document.selection.createRange().text;
      }

完整代码
使用selectedText接收选中的字符串
最后在跳转的网址中加上selectedText这个变量
如果要添加url也可以直接添加

 window.onload = function () {
    var selectedText;
    //1.监听鼠标的抬起
    $("word").onmouseup = function (event) {
      //event
      var e=event||window.event;
      //1.1获取选中的文字
      if(window.getSelection){
        selectedText=window.getSelection().toString();
      }else{
        selectedText=document.selection.createRange().text;
      }
      console.log(selectedText);
      if (selectedText!==" "){
        //1.2显示面板
        $("share_weibo").style.display="block";
        //1.3改变位置
        $("share_weibo").style.left=e.clientX+"px";
        $("share_weibo").style.top=e.clientY+"px";
      }
    };
    //2.监听文档的点击
    document.onmousedown=function (event) {
      //2.0
      var e=event||window.event;
      //2.1获取点击区域的id
      var targetId=e.target?e.target.id:e.srcElement.id;
      if(targetId!=="share_weibo"){
        $("share_weibo").style.display="none";
      }else{
      window.location.href='http://service.weibo.com/share/share.php?title='+selectedText;//动态跳转
      }
      window.getSelection?window.getSelection().removeAllRanges():document.selection.empty();
    }
  }

移除选中内容

window.getSelection?window.getSelection().removeAllRanges():document.selection.empty();

示例

最后弹出undefine

function test1(){
    var txt =window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
    alert(txt);
  }
  document.onmouseup = test1;