最近注意到新浪博客有个小功能，就是当鼠标选中一段文字时会浮现一个小图片，点击这个图片可以把选中内容发送到新浪微博，一时兴起昨晚就写了一个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. Hadoop(17)-MapReduce框架原理-MapReduce流程,Shuffle机制,Partition分区

    MapReduce工作流程 1.准备待处理文件 2.job提交前生成一个处理规划 3.将切片信息job.split,配置信息job.xml和我们自己写的jar包交给yarn 4.yarn根据切片规划计 ...

  2. hadoop搭建----centos免密码登录、修改hosts文件

    分布式系统在传输数据时需要多台电脑免密码登录 如:A(192.168.227.12)想ssh免密码登录到B(192.168.227.12),需要把A的公钥文件(~/.ssh/id_rsa.pub)里内 ...

  3. discuzX3.2 X3.4网站漏洞修复 SQL注入与请求伪造攻击利用与修复

    2018年12月9日,国内某安全组织,对discuz X3.2 X3.4版本的漏洞进行了公开,这次漏洞影响范围较大,具体漏洞是discuz 的用户前段SQL注入与请求伪造漏洞,也俗称SSRF漏洞,漏洞 ...

  4. 003---生成器 & 迭代器

    生成器 & 迭代器 列表生成式 现在有个需求,列表[1, 2, 3, 4, 5, 6, 7, 8, 9],将列表里的每个值加1. 二逼青年版 a = [1, 2, 3, 4, 5, 6, 7, ...

  5. python2.7入门---模块(Module)

        来,这次我们就看下Python 模块(Module).它是一个 Python 文件,以 .py 结尾,包含了 Python 对象定义和Python语句.模块让你能够有逻辑地组织你的 Pytho ...

  6. shell重温---基础篇（流程控制&if判断&for&while&循环操作）

        和Java.PHP等语言不一样,sh的流程控制不可为空,如(以下为PHP流程控制写法): <?php if (isset($_GET["q"])) { search( ...

  7. 谈谈WPF中的CollectionView与CollectionViewSource (1)

    原文:谈谈WPF中的CollectionView与CollectionViewSource (1) 谈谈WPF中的CollectionView与CollectionViewSource (1)     ...

  8. SharedPreferences Android

    类似iOS的NSUserDefaults,采用key-value(键值对)形式,主要用于轻量级的数据存储 public class MainActivity extends AppCompatActi ...

  9. 步骤：asp.net core中使用identifyserver4颁发令牌

    使用IdentityServer4颁发令牌基本步骤如下: 在 Startup.Configure 方法调用 app.UseIdentityServer ,添加IdentityServer4到应用的 H ...

  10. App测试基本流程详解

    1 APP测试基本流程 1.1流程图 1.2测试周期 测试周期可按项目的开发周期来确定测试时间,一般测试时间为两三周(即15个工作日),根据项目情况以及版本质量可适当缩短或延长测试时间. 1.3测试资 ...