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 相关文章推荐
js 纯数字不重复排列的另类方法
Jul 17 Javascript
JavaScript常用对象的方法和属性小结
Jan 24 Javascript
JQuery实现用户名无刷新验证的小例子
Mar 22 Javascript
javascript同页面多次调用弹出层具体实例代码
Aug 16 Javascript
js 动态为textbox添加下拉框数据源的方法
Apr 24 Javascript
javaScript如何处理从java后台返回的list
Apr 24 Javascript
javascript中apply、call和bind的使用区别
Apr 05 Javascript
VC调用javascript的几种方法(推荐)
Aug 09 Javascript
JavaScript中关键字 in 的使用方法详解
Oct 17 Javascript
对VUE中的对象添加属性
Sep 18 Javascript
layui前端时间戳转化实例
Nov 15 Javascript
JavaScript中break、continue和return的用法区别实例分析
Mar 02 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
PHP 杂谈《重构-改善既有代码的设计》之五 简化函数调用
2012/05/07 PHP
php 创建以UNIX时间戳命名的文件夹(示例代码)
2014/03/08 PHP
PHP中定义数组常量(array常量)的方法
2014/11/17 PHP
PHP实用函数分享之去除多余的0
2015/02/06 PHP
PHP基于DateTime类解决Unix时间戳与日期互转问题【针对1970年前及2038年后时间戳】
2018/06/13 PHP
PHP使用SOAP调用API操作示例
2018/12/25 PHP
Laravel5.1 框架Middleware中间件基本用法实例分析
2020/01/04 PHP
javascript实现轮显新闻标题链接
2007/08/13 Javascript
Javascript实现跑马灯效果的简单实例
2016/05/31 Javascript
JavaScript基于DOM操作实现简单的数学运算功能示例
2017/01/16 Javascript
小程序开发实战:实现九宫格界面的导航的代码实现
2017/01/19 Javascript
bootstrap+jQuery实现的动态进度条功能示例
2017/05/25 jQuery
js数字滑动时钟的简单实现(示例讲解)
2017/08/14 Javascript
理解javascript async的用法
2017/08/22 Javascript
详解Vue-cli中的静态资源管理(src/assets和static/的区别)
2018/06/19 Javascript
Intellij IDEA搭建vue-cli项目的方法步骤
2018/10/20 Javascript
从0到1构建vueSSR项目之node以及vue-cli3的配置
2019/03/07 Javascript
如何使用pm2快速将项目部署到远程服务器
2019/03/12 Javascript
Python实现抓取页面上链接的简单爬虫分享
2015/01/21 Python
Python计算两个矩形重合面积代码实例
2019/09/16 Python
python实现两个字典合并,两个list合并
2019/12/02 Python
pytorch实现对输入超过三通道的数据进行训练
2020/01/15 Python
Python class的继承方法代码实例
2020/02/14 Python
Python读取Excel一列并计算所有对象出现次数的方法
2020/09/04 Python
HTML5 File API改善网页上传功能
2009/08/19 HTML / CSS
北美Newegg打造的全球尖货海购平台:tt海购
2018/09/28 全球购物
空字符串(“”)和null的区别
2012/11/13 面试题
什么是继承
2013/12/07 面试题
实习自我鉴定范文
2013/10/30 职场文书
幼儿园教师个人反思
2014/01/30 职场文书
旅游管理毕业生自荐信范文
2014/03/19 职场文书
领导干部查摆“四风”问题自我剖析材料思想汇报
2014/10/05 职场文书
2014年售票员工作总结
2014/11/19 职场文书
2014年项目工作总结
2014/11/24 职场文书
2014年安全管理工作总结
2014/12/01 职场文书
django上传文件的三种方式
2021/04/29 Python