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页面跳转常用的几种方式
Nov 25 Javascript
在iframe里的页面编写js,实现在父窗口上创建动画效果展开和收缩的div(不变动iframe父窗口代码)
Dec 20 Javascript
JavaScript调试工具汇总
Dec 23 Javascript
JavaScript实现数组随机排序的方法
Jun 26 Javascript
jQuery mobile 移动web(6)
Dec 20 Javascript
JavaScript的Backbone.js框架的一些使用建议整理
Feb 14 Javascript
Node.js插件安装图文教程
May 06 Javascript
KnockoutJS 3.X API 第四章之数据控制流with绑定
Oct 10 Javascript
jQuery基本筛选选择器实例代码
Feb 06 Javascript
JavaScript基本语法_动力节点Java学院整理
Jun 26 Javascript
使用JS中的Replace()方法遇到的问题小结
Oct 20 Javascript
实例讲解React 组件
Jul 07 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+SQLite存储方案
2010/09/04 PHP
PHP经典面试题集锦
2015/03/19 PHP
yii2项目实战之restful api授权验证详解
2017/05/20 PHP
jQuery 全选/反选以及单击行改变背景色实例
2013/07/02 Javascript
ExtJS DOM元素操作经验分享
2013/08/28 Javascript
jquery 获取dom固定元素 添加样式的简单实例
2014/02/04 Javascript
使用js检测浏览器是否支持html5中的video标签的方法
2014/03/12 Javascript
nodejs中使用monk访问mongodb
2014/07/06 NodeJs
jQuery+css实现的tab切换标签(兼容各浏览器)
2016/01/28 Javascript
从零开始学习Node.js系列教程一:http get和post用法分析
2017/04/13 Javascript
Angular.js中ng-include用法及多标签页面的实现方式详解
2017/05/07 Javascript
详解微信小程序 通过控制CSS实现view隐藏与显示
2017/05/24 Javascript
js浏览器滚动条卷去的高度scrolltop(实例讲解)
2017/07/07 Javascript
详解使用vue-admin-template的优化历程
2018/05/20 Javascript
微信小程序表单验证form提交错误提示效果
2020/06/19 Javascript
JavaScript实现新年倒计时效果
2018/11/17 Javascript
js代码实现轮播图
2020/05/04 Javascript
原生js+canvas实现贪吃蛇效果
2020/08/02 Javascript
[01:55]《走出家门看比赛》——DOTA2 2015国际邀请赛同城线下观战
2015/07/18 DOTA
[03:12]完美世界DOTA2联赛PWL DAY9集锦
2020/11/10 DOTA
python使用PIL模块实现给图片打水印的方法
2015/05/22 Python
详解Python各大聊天系统的屏蔽脏话功能原理
2016/12/01 Python
Python 实现中值滤波、均值滤波的方法
2019/01/09 Python
Python 通过打码平台实现验证码的实现
2019/05/13 Python
python GUI库图形界面开发之PyQt5美化窗体与控件(异形窗体)实例
2020/02/25 Python
OpenCV4.1.0+VS2017环境配置的方法步骤
2020/07/09 Python
python 实现性别识别
2020/11/21 Python
HTML5 Canvas阴影使用方法实例演示
2013/08/02 HTML / CSS
英国著名国际平价时尚男装品牌:Topman
2016/08/27 全球购物
关键字throw与throws的用法差异
2016/11/22 面试题
玩具公司的创业计划书
2013/12/31 职场文书
双十佳事迹材料
2014/01/29 职场文书
2014三八妇女节活动总结范文四篇
2014/03/09 职场文书
体现团队精神的口号
2014/06/06 职场文书
质量整改通知单
2015/04/21 职场文书
java实现对Hadoop的操作
2021/07/01 Java/Android