JQuery用鼠标选文字来发新浪微博

一个小demo
服务器君一共花费了1078.533 ms进行了5次数据库查询,努力地为您提供了这个页面。
试试阅读模式?希望听取您的建议

最近注意到新浪博客有个小功能,就是当鼠标选中一段文字时会浮现一个小图片,点击这个图片可以把选中内容发送到新浪微博,一时兴起昨晚就写了一个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>

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

本文地址:http://www.nowamagic.net/librarys/veda/detail/919,欢迎访问原出处。

不打个分吗?

转载随意,但请带上本文地址:

http://www.nowamagic.net/librarys/veda/detail/919

如果你认为这篇文章值得更多人阅读,欢迎使用下面的分享功能。
小提示:您可以按快捷键 Ctrl + D,或点此 加入收藏

阅读一百本计算机著作吧,少年

很多人觉得自己技术进步很慢,学习效率低,我觉得一个重要原因是看的书少了。多少是多呢?起码得看3、4、5、6米吧。给个具体的数量,那就100本书吧。很多人知识结构不好而且不系统,因为在特定领域有一个足够量的知识量+足够良好的知识结构,系统化以后就足以应对大量未曾遇到过的问题。

奉劝自学者:构建特定领域的知识结构体系的路径中再也没有比学习该专业的专业课程更好的了。如果我的知识结构体系足以囊括面试官的大部分甚至吞并他的知识结构体系的话,读到他言语中的一个词我们就已经知道他要表达什么,我们可以让他坐“上位”毕竟他是面试官,但是在知识结构体系以及心理上我们就居高临下。

所以,阅读一百本计算机著作吧,少年!

《敏捷软件开发(原则模式与实践)》 马丁 (作者), 邓辉 (译者)

《敏捷软件开发:原则模式与实践》由享誉全球的软件开发专家和软件工程大师Robert C.Martin将向您展示如何解决软件开发人员、项目经理及软件项目领导们所面临的最棘手的问题。这本综合性、实用性的敏捷开发和极限编程方面的指南,是由敏捷开发的创始人之一所撰写的。1.讲述在预算和实践要求下,软件开发人员和项目经理如何使用敏捷开发完成项目;2.使用真实案例讲解如何用极限编程来设计、测试、重构和结对编程;3.包含了极具价值的可多次使用的C++和JAVA源代码;4.重点讲述了如何使用UML和设计模式解决面向客户系统的问题。

更多计算机宝库...