jQuery实现鼠标选文字发新浪微博的方法
来源: 阅读:717 次 日期:2016-07-08 15:59:10
温馨提示: 小编为您整理了“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="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程序设计有所帮助。

更多信息请查看网络编程
由于各方面情况的不断调整与变化, 提供的所有考试信息和咨询回复仅供参考,敬请考生以权威部门公布的正式信息和咨询为准!
关于我们 | 联系我们 | 人才招聘 | 网站声明 | 网站帮助 | 非正式的简要咨询 | 简要咨询须知 | 加入群交流 | 手机站点 | 投诉建议
工业和信息化部备案号:滇ICP备2023014141号-1 云南省教育厅备案号:云教ICP备0901021 滇公网安备53010202001879号 人力资源服务许可证:(云)人服证字(2023)第0102001523号
云南网警备案专用图标
联系电话:0871-65317125(9:00—18:00) 获取招聘考试信息及咨询关注公众号:hfpxwx
咨询QQ:526150442(9:00—18:00)版权所有:
云南网警报警专用图标
Baidu
map