首页 > 代码库 > JQuery用鼠标选文字来发新浪微博

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="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/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用鼠标选文字来发新浪微博