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 相关文章推荐
经典的解除许多网站无法复制文字的绝招
Dec 31 Javascript
javascript实现上传图片前的预览(TX的面试题)
Aug 20 Javascript
jquery中object对象循环遍历的方法
Dec 18 Javascript
浅谈javascript 函数表达式和函数声明的区别
Jan 05 Javascript
jQuery validate插件实现ajax验证重复的2种方法
Jan 22 Javascript
深入理解jQuery 事件处理
Jun 14 Javascript
Bootstrap源码解读导航条(7)
Dec 23 Javascript
浅谈struts1 &amp; jquery form 文件异步上传
May 25 jQuery
原生JS实现轮播图效果
Oct 12 Javascript
vue操作动画的记录animate.css实例代码
Apr 26 Javascript
微信小程序修改数组长度的问题的解决
Dec 17 Javascript
在vant中使用时间选择器和popup弹出层的操作
Nov 04 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
Can't create/write to file 'C:\WINDOWS\TEMP\...MYSQL报错解决方法
2011/06/30 PHP
php中curl、fsocket、file_get_content三个函数的使用比较
2014/05/09 PHP
写一段简单的PHP建立文件夹代码
2015/01/06 PHP
使用phpstorm和xdebug实现远程调试的方法
2015/12/29 PHP
php实现不通过扩展名准确判断文件类型的方法【finfo_file方法与二进制流】
2017/04/18 PHP
PHP rmdir()函数的用法总结
2019/07/02 PHP
js下关于onmouseout、事件冒泡的问题经验小结
2010/12/09 Javascript
js特殊字符转义介绍
2013/11/05 Javascript
NodeJS的url截取模块url-extract的使用实例
2013/11/18 NodeJs
JavaScript中的数组操作介绍
2014/12/30 Javascript
JavaScript实现的多种鼠标拖放效果
2015/11/03 Javascript
使用递归遍历对象获得value值的实现方法
2016/06/14 Javascript
js选择器全面解析
2016/06/27 Javascript
jQuery插件学习教程之SlidesJs轮播+Validation验证
2016/07/12 Javascript
js复制内容到剪贴板代码,js复制代码的简单实例
2016/10/27 Javascript
详解最新vue-cli 2.9.1的webpack存在问题
2017/12/16 Javascript
详解React项目的服务端渲染改造(koa2+webpack3.11)
2018/03/19 Javascript
JavaScript类数组对象转换为数组对象的方法实例分析
2018/07/24 Javascript
用图片替换checkbox原始样式并实现同样的功能
2018/11/15 Javascript
VsCode与Node.js知识点详解
2019/09/05 Javascript
小程序的上传文件接口的注意要点解析
2019/09/17 Javascript
React+Redux实现简单的待办事项列表ToDoList
2019/09/29 Javascript
[04:19]DOTA2完美大师赛第四天精彩集锦
2017/11/26 DOTA
python实现提取百度搜索结果的方法
2015/05/19 Python
python 调用有道api接口的方法
2019/01/03 Python
python opencv 批量改变图片的尺寸大小的方法
2019/06/28 Python
Django DRF认证组件流程实现原理详解
2020/08/17 Python
python 5个实用的技巧
2020/09/27 Python
广州某公司软件工程师面试题
2014/12/22 面试题
厨师岗位职责
2013/11/12 职场文书
机电专业个人求职信范文
2013/12/30 职场文书
迎元旦广播稿
2014/02/22 职场文书
2014报到证办理个人委托书
2014/10/08 职场文书
会议主持人开场白台词
2015/05/28 职场文书
利用python调用摄像头的实例分析
2021/06/07 Python
python树莓派通过队列实现进程交互的程序分析
2021/07/04 Python