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俄罗斯方块,包含完整的设计理念
Dec 11 Javascript
利用javascript实现web页面中指定区域打印
Oct 30 Javascript
Javascript排序算法之计数排序的实例
Apr 05 Javascript
jquery自定义下拉列表示例
Apr 25 Javascript
javascript结合canvas实现图片旋转效果
May 03 Javascript
jQuery实现图像旋转动画效果
May 29 Javascript
jquery实现图片放大点击切换
Jun 06 jQuery
通过 JS 判断页面是否有滚动条的实现方法
Apr 05 Javascript
vue-cli构建项目下使用微信分享功能
May 28 Javascript
详解webpack之图片引入-增强的file-loader:url-loader
Oct 08 Javascript
JavaScript实现与web通信的方法详解
Aug 07 Javascript
JavaScript实现移动小精灵的案例代码
Dec 12 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
论坛头像随机变换代码
2006/10/09 PHP
基于Discuz security.inc.php代码的深入分析
2013/06/03 PHP
浅谈php中mysql与mysqli的区别分析
2013/06/10 PHP
thinkPHP下的widget扩展用法实例分析
2015/12/26 PHP
js URL参数的拼接方法比较
2012/02/15 Javascript
jQuery 联动日历实现代码
2012/05/31 Javascript
JavaScript函数的4种调用方法详解
2014/04/22 Javascript
js星星评分效果
2014/07/24 Javascript
Javascript闭包实例详解
2015/11/29 Javascript
JS函数定义方式的区别介绍
2016/03/22 Javascript
jQuery实现鼠标经过时高亮,同时其他同级元素变暗的效果
2016/09/18 Javascript
JavaScript中浅讲ajax图文详解
2016/11/11 Javascript
vue+vux实现移动端文件上传样式
2017/07/28 Javascript
详解vue2.0 不同屏幕适配及px与rem转换问题
2018/02/23 Javascript
详解vue中使用protobuf踩坑记
2019/05/07 Javascript
Vue分页器实现原理详解
2019/06/28 Javascript
解决vue 退出动画无效的问题
2020/08/09 Javascript
返回上一个url并刷新界面的js代码
2020/09/12 Javascript
jquery实现简易验证插件封装
2020/09/13 jQuery
[01:35]2014DOTA2西雅图邀请赛 专访狐狸妈青春献给刀塔
2014/07/08 DOTA
[03:06]2018年度CS GO最具人气解说-完美盛典
2018/12/16 DOTA
简单介绍Python中的几种数据类型
2016/01/02 Python
Django使用unittest模块进行单元测试过程解析
2019/08/02 Python
使用Pyinstaller转换.py文件为.exe可执行程序过程详解
2019/08/06 Python
感知器基础原理及python实现过程详解
2019/09/30 Python
详解pyinstaller生成exe的闪退问题解决方案
2020/06/19 Python
实例讲解使用HTML5 Canvas绘制阴影效果的方法
2016/03/25 HTML / CSS
工程师岗位职责
2013/11/08 职场文书
旅游管理毕业生自荐书
2014/02/02 职场文书
老公给老婆的保证书
2014/04/28 职场文书
党员争先创优承诺书
2015/01/20 职场文书
2015年民主评议党员工作总结
2015/05/19 职场文书
党支部半年考察意见
2015/06/01 职场文书
《比的意义》教学反思
2016/02/18 职场文书
golang 如何用反射reflect操作结构体
2021/04/28 Golang
Java实现学生管理系统(IO版)
2022/02/24 Java/Android