jQuery实现鼠标选文字发新浪微博的方法


Posted in Javascript onApril 02, 2016

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
[原创]用javascript实现检测指定目录是否存在的方法
Jan 12 Javascript
jQuery之选择组件的深入解析
Jun 19 Javascript
JQuery.validate在ie8下不支持的快速解决方法
May 18 Javascript
JavaScript 身份证号有效验证详解及实例代码
Oct 20 Javascript
基于ajax与msmq技术的消息推送功能实现代码
Dec 26 Javascript
JavaScript实现星级评分
Jan 12 Javascript
jQuery内容筛选选择器实例代码
Feb 06 Javascript
使用AngularJS编写多选按钮选中时触发指定方法的指令代码详解
Jul 24 Javascript
express默认日志组件morgan的方法
Apr 05 Javascript
QQ跳转支付宝并自动领红包脚本(最新)
Jun 22 Javascript
微信小程序导航栏跟随滑动效果的实现代码
May 14 Javascript
JS PHP字符串截取函数实现原理解析
Aug 29 Javascript
JQuery解析XML的方法小结
Apr 02 #Javascript
javascript HTML5文件上传FileReader API
Mar 27 #Javascript
JavaScript中文件上传API详解
Apr 01 #Javascript
jquery表单验证插件formValidator使用方法
Apr 01 #Javascript
jquery分页插件jquery.pagination.js实现无刷新分页
Apr 01 #Javascript
jquery分页插件jquery.pagination.js使用方法解析
Apr 01 #Javascript
jQuery实现下拉加载功能实例代码
Apr 01 #Javascript
You might like
无线电广播的开始
2002/01/30 无线电
德生PL450的电路分析和低放电路的改进办法
2021/03/02 无线电
用Apache反向代理设置对外的WWW和文件服务器
2006/10/09 PHP
PHP备份数据库生成SQL文件并下载的函数代码
2012/02/05 PHP
解析PHP中如何将数组变量写入文件
2013/06/06 PHP
codeigniter框架批量插入数据
2014/01/09 PHP
php遍历CSV类实例
2015/04/14 PHP
PHP中生成UUID自定义函数分享
2015/06/10 PHP
php生成txt文件实例代码介绍
2016/04/28 PHP
PHP基于mssql扩展远程连接MSSQL的简单实现方法
2016/10/08 PHP
解决laravel 5.1报错:No supported encrypter found的办法
2017/06/07 PHP
PHP实现网站访问量计数器
2017/10/27 PHP
Laravel框架查询构造器 CURD操作示例
2019/09/04 PHP
jQuery插件实现屏蔽单个元素使用户无法点击
2013/04/12 Javascript
JavaScript中setAttribute用法介绍
2013/07/20 Javascript
js中创建对象的几种方式示例介绍
2014/01/26 Javascript
jQuery实现的输入框选择时间插件用法实例
2015/02/28 Javascript
vue component组件使用方法详解
2017/07/14 Javascript
使用vue-resource进行数据交互的实例
2017/09/02 Javascript
Angularjs按需查询实例代码
2017/10/30 Javascript
angularJs在多个控制器中共享服务数据的方法
2018/09/30 Javascript
mpvue+vuex搭建小程序详细教程(完整步骤)
2018/09/30 Javascript
js中数组常用方法总结(推荐)
2019/04/09 Javascript
vue spa应用中的路由缓存问题与解决方案
2019/05/31 Javascript
[04:13]2014DOTA2国际邀请赛 专访DC目前形势不容乐观
2014/07/12 DOTA
python使用递归解决全排列数字示例
2014/02/11 Python
深入讲解Python中的迭代器和生成器
2015/10/26 Python
使用Python的Twisted框架编写非阻塞程序的代码示例
2016/05/25 Python
python判断数字是否是超级素数幂
2018/09/27 Python
python实现学生成绩测评系统
2020/06/22 Python
python 爬虫如何正确的使用cookie
2020/10/27 Python
德国的大型美妆个护电商:Flaconi
2020/06/26 全球购物
委托公证书
2014/04/08 职场文书
情人节寄语大全
2014/04/11 职场文书
纪念九一八事变演讲稿:青少年应树立远大理想
2014/09/14 职场文书
JS前端可扩展的低代码UI框架Sunmao使用详解
2022/07/23 Javascript