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 05 Javascript
jQuery Tips 为AJAX回调函数传递额外参数的方法
Dec 28 Javascript
js获取单选框或复选框值及操作
Dec 18 Javascript
javascript 获取函数形参个数
Jul 31 Javascript
Bootstrap基本插件学习笔记之Alert警告框(20)
Dec 08 Javascript
jQuery网页定位导航特效实现方法
Dec 19 Javascript
鼠标点击input,显示瞬间的边框颜色,对之修改与隐藏实例
Dec 26 Javascript
Javascript中 带名 匿名 箭头函数的重要区别(推荐)
Jan 29 Javascript
微信小程序 出现47001 data format error原因解决办法
Mar 10 Javascript
jQuery中过滤器的基本用法示例
Oct 11 jQuery
vue控制多行文字展开收起的实现示例
Oct 11 Javascript
vue父子模板传值问题解决方法案例分析
Feb 26 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 文件上传系统手记
2009/10/26 PHP
PHP采集相关教程之一 CURL函数库
2010/02/15 PHP
原生php实现excel文件读写的方法分析
2018/04/25 PHP
关于IFRAME 自适应高度的研究
2006/07/20 Javascript
做网页的一些技巧(续)
2007/02/01 Javascript
Jquery实现带动画效果的经典二级导航菜单
2013/03/22 Javascript
jquery ajax 简单范例(界面+后台)
2013/11/19 Javascript
href下载文件根据id取url并下载
2014/05/28 Javascript
小结Node.js中非阻塞IO和事件循环
2014/09/18 Javascript
JavaScript动态改变div属性的实现方法
2015/07/22 Javascript
微信小程序 欢迎页面的制作(源码下载)
2017/01/09 Javascript
React组件生命周期详解
2017/07/03 Javascript
node.js中grunt和gulp的区别详解
2017/07/17 Javascript
基于vue.js中事件修饰符.self的用法(详解)
2018/02/23 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(下)
2018/04/18 Javascript
js实现橱窗展示效果
2020/01/11 Javascript
vue 百度地图(vue-baidu-map)绘制方向箭头折线实例代码详解
2020/04/28 Javascript
Node.js 中如何收集和解析命令行参数
2021/01/08 Javascript
[04:26]DOTA2上海特锦赛小组赛第二日 TOP10精彩集锦
2016/02/27 DOTA
[30:00]完美世界DOTA2联赛PWL S2 Rebirth vs LBZS 第二场 11.28
2020/12/01 DOTA
Python中使用glob和rmtree删除目录子目录及所有文件的例子
2014/11/21 Python
30分钟搭建Python的Flask框架并在上面编写第一个应用
2015/03/30 Python
用python的requests第三方模块抓取王者荣耀所有英雄的皮肤实例
2017/12/14 Python
python机器学习之神经网络(一)
2017/12/20 Python
python实现一行输入多个值和一行输出多个值的例子
2019/07/16 Python
Python 中使用 PyMySQL模块操作数据库的方法
2019/11/10 Python
html5版canvas自由拼图实例
2014/10/15 HTML / CSS
如何用canvas实现在线签名的示例代码
2018/07/10 HTML / CSS
KLOOK客路:发现更好玩的世界,预订独一无二的旅行体验
2016/12/16 全球购物
英国电信商店:BT Shop
2019/12/17 全球购物
工作求职信
2014/07/04 职场文书
2014年党员自我剖析材料
2014/10/07 职场文书
2015公务员年度考核评语
2015/03/25 职场文书
小学数学教师研修日志
2015/11/13 职场文书
社区志愿者服务心得体会
2016/01/22 职场文书
导游词之藏龙百瀑景区
2019/12/30 职场文书