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

  1. jQuery实现鼠标选中文字后弹出提示窗口效果

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  2. jQuery鼠标悬停文字渐隐渐现动画效果

    jQuery鼠标悬停文字渐隐渐现动画效果 当时是做项目的时候用到的所以图片有些大,九张,真正要做图片不需要这么大 css样式 <style> *{ margin: 0; padding: ...

  3. Jquery CheckBox复选框 全选/取消全选 最佳实现方式 参考案例

    <input id="chkAll" type="checkbox" />全选/取消全选</div> <asp:Repeater ...

  4. 基于jQuery图片遮罩滑动文字切换特效

    基于jQuery图片遮罩滑动文字切换特效.这是一款jquery hover鼠标滑动选项卡切换透明背景遮罩文字显示特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  5. js进阶 12-1 jquery的鼠标事件有哪些

    js进阶 12-1 jquery的鼠标事件有哪些 一.总结 一句话总结:1+3*2+1+1,其中里面有两组移入移出,一组和click,总结就是click(3个),hover(5个),mousemove ...

  6. 对jquery操作复选框

    摘要:jquery操作复选框.使用更简洁易懂,思路清晰,逻辑更明了,很实用 <!DOCTYPE html> <html> <head> <meta chars ...

  7. jQuery css3鼠标悬停图片显示遮罩层动画特效

    jQuery css3鼠标悬停图片显示遮罩层动画特效 效果体验:http://hovertree.com/texiao/jquery/39/ 效果图: 源码下载:http://hovertree.co ...

  8. jQuery实现鼠标经过图片变亮效果

    在线体验效果:http://hovertree.com/texiao/jquery/1.htm 以下是完整源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD ...

  9. jQuery实现全选效果【转】

    这是一段用jquery实现全选的代码,主要思路如下: 1.所有的复选框都有单击事件,所有效果都是在单击事件下实现的 2.全选复选框所实现的功能与其他复选选项实现的功能不同,所有在单击事件内做一个判断, ...

随机推荐

  1. 嵌入式框架Zorb Framework搭建四：状态机的实现

    我是卓波,我是一名嵌入式工程师,我万万没想到我会在这里跟大家吹牛皮. 嵌入式框架Zorb Framework搭建过程 嵌入式框架Zorb Framework搭建一:嵌入式环境搭建.调试输出和建立时间系 ...

  2. FPGA算法学习(1) -- Cordic（圆周系统之旋转模式）

    三角函数的计算是个复杂的主题,有计算机之前,人们通常通过查找三角函数表来计算任意角度的三角函数的值.这种表格在人们刚刚产生三角函数的概念的时候就已经有了,它们通常是通过从已知值(比如sin(π/2)= ...

  3. 利用JS调取电脑摄像头，实现拍照功能

    1.调取电脑摄像头非常简单,看代码一幕了然 window.addEventListener("DOMContentLoaded", function() { var canvas ...

  4. C#中Equals和= =(等于号)的比较)（转载）

    C#中Equals和= =(等于号)的比较) 相信很多人都搞不清Equals和 = =的区别,只是零星的懂一点,现在就让我带大家来进行一些剖析 一.           值类型的比较 对于值类型来说  ...

  5. 美年健康股票成交量和K线关系

    看下美年健康的股票,这次主要是研究下成交量和K线的关系,以最后5天为例子,股票下跌成交量降低,说明抛压很小,在最后3天,价格突破的时候,成交量是平时的两倍,说明有机构买入, 业绩部分还可以,全民健身是 ...

  6. L007- linux系统优化进阶课堂小节

    首先把这节课所讲的大概引锁一下,然后下面详细列举. 1.填加普通用户,通过sudo管理. 2.更改默认的SSH服务端口及禁止root用户远程连接. 3.定时自动更新服务器时间 4.关闭防火墙(ipta ...

  7. [转]Git，SVN的优缺点及适合的范围，开源项目？公司项目？

    使用git不久,粗浅理解: 1)适用对象不同.Git适用于参与开源项目的开发者.他们由于水平高,更在乎的是效率而不是易用性.Svn则不同,它适合普通的公司开发团队.使用起来更加容易. 2)使用的场合不 ...

  8. Appium如何获取appPackage和appActivity

    基本概念: appPackage:简单来说是App开发者提供的名称. appActivity:简单来说是App提供的各种不同的功能.每个程序都有个MainActivity,就是打开程序时显示在屏幕的活 ...

  9. 常用模块（chardet）

    作用:检测二进制的编码格式,不是百分百正确 import chardet f = open('test.txt', 'rb')data = f.read()print(data)result = ch ...

  10. linux学习总结---web前端③

    css3: border-radius opacity: transform: 旋转 rotate 平移translate 缩放scale 扭曲skew transition:转变 强调:开始和结束 ...