jQuery实现鼠标选文字发新浪微博的方法

2019-11-20 10:18:10

字体：大中小

来源：转载

供稿：网友

本文实例讲述了jQuery实现鼠标选文字发新浪微博的方法。分享给大家供大家参考，具体如下：

最近注意到新浪博客有个小功能，就是当鼠标选中一段文字时会浮现一个小图片，点击这个图片可以把选中内容发送到新浪微博，一时兴起昨晚就写了一个Demo玩了一下，代码超简单，没优化，有兴趣的朋友可以自己改进。

原理很简单，先获得鼠标选中文字，然后调用新浪博客中提供的页面，把文字作为参数传过去就OK了。

代码如下：

<html xmlns="http://www.w3.org/1999/xhtml"><head runat="server">  <title></title>  <style type="text/css">    .tooltip    {      width:120px;      height:23px;      line-height:23px;      background-color:#CCCCCC;    }    .tooltip a    {      color: #333333;      display: block;      font-size: 12px;      font-weight: bold;      text-indent: 10px;    }  </style>  <script src="jquery.min.js"></script>  <script type="text/javascript">    $(function () {      $("#blogContent").mouseup(function (e) {        var x = 10;        var y = 10;        var r = "";        if (document.selection) {          r = document.selection.createRange().text;        }        else if (window.getSelection()) {          r = window.getSelection();        }        if (r!= "") {          var bowen = "发送到新浪微博";          var tooltip = "<div id='tooltip' class='tooltip'><a onclick=ask('"+r+"')>" + bowen + "</a></div>";          $("body").append(tooltip);          $("#tooltip").css({            "top": (e.pageY + y) + "px",            "left": (e.pageX + x) + "px",            "position": "absolute"          }).show("fast");        }      }).mousedown(function () {        $("#tooltip").remove();      });    })    function ask(r) {      if (r != "") {        window.open('http://v.t.sina.com.cn/share/share.php?searchPic=false&title='+r+'&url=http://www.nowwamagic.net&sourceUrl=http%3A%2F%2Fblog.sina.com.cn&content=utf-8&appkey=1617465124', '_blank', 'height=515, width=598, toolbar=no, menubar=no, scrollbars=auto, resizable=yes, location=no, status=yes');      }    }  </script></head><body>  <div id="blogContent">    words words words words words words words words words。  </div></body></html>

就这么简单哦，大家可以自己试试哈。当然获得选中文本还可以有其他操作，这儿只是取巧调用了新浪的页面，大家如果有兴趣可以自己创建应用自己实现。

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

上一篇：js一维数组、多维数组和对象的混合使用方法

下一篇：JQuery解析XML的方法小结