最近注意到新浪博客有个小功能，就是当鼠标选中一段文字时会浮现一个小图片，点击这个图片可以把选中内容发送到新浪微博，一时兴起昨晚就写了一个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="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/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用鼠标选文字来发新浪微博的更多相关文章

  1. jQuery实现鼠标选中文字后弹出提示窗口效果

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  2. jQuery鼠标悬停文字渐隐渐现动画效果

    jQuery鼠标悬停文字渐隐渐现动画效果 当时是做项目的时候用到的所以图片有些大,九张,真正要做图片不需要这么大 css样式 <style> *{ margin: 0; padding: ...

  3. Jquery CheckBox复选框 全选/取消全选 最佳实现方式 参考案例

    <input id="chkAll" type="checkbox" />全选/取消全选</div> <asp:Repeater ...

  4. 基于jQuery图片遮罩滑动文字切换特效

    基于jQuery图片遮罩滑动文字切换特效.这是一款jquery hover鼠标滑动选项卡切换透明背景遮罩文字显示特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  5. js进阶 12-1 jquery的鼠标事件有哪些

    js进阶 12-1 jquery的鼠标事件有哪些 一.总结 一句话总结:1+3*2+1+1,其中里面有两组移入移出,一组和click,总结就是click(3个),hover(5个),mousemove ...

  6. 对jquery操作复选框

    摘要:jquery操作复选框.使用更简洁易懂,思路清晰,逻辑更明了,很实用 <!DOCTYPE html> <html> <head> <meta chars ...

  7. jQuery css3鼠标悬停图片显示遮罩层动画特效

    jQuery css3鼠标悬停图片显示遮罩层动画特效 效果体验:http://hovertree.com/texiao/jquery/39/ 效果图: 源码下载:http://hovertree.co ...

  8. jQuery实现鼠标经过图片变亮效果

    在线体验效果:http://hovertree.com/texiao/jquery/1.htm 以下是完整源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD ...

  9. jQuery实现全选效果【转】

    这是一段用jquery实现全选的代码,主要思路如下: 1.所有的复选框都有单击事件,所有效果都是在单击事件下实现的 2.全选复选框所实现的功能与其他复选选项实现的功能不同,所有在单击事件内做一个判断, ...

随机推荐

  1. python学习——基本数据类型

    一.运算符 1.算术运算: 2.比较运算 3.赋值运算 4.逻辑运算 5.成员运算 二.基本数据类型 1.数字 1.1 整形数字和长整形数字:在32位机器上,整数的位数为32位,取值范围为-2**31 ...

  2. 网站title标题被改并被百度网址安全中心提醒的解决办法

    国庆假日期间我们Sine安全接到众多网站站长求助网站标题被改导致在百度搜索中百度安全中心提醒被拦截,导致网站正常用户无法浏览网站被跳转到一些菠菜du博网站,而且很明显的一个特征就是在百度中搜索关键词的 ...

  3. Go搭建一个Web服务器

    package main import ( "fmt" "net/http" "strings" "log" ) fun ...

  4. （杭电 1097）A hard puzzle

    A hard puzzle Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total ...

  5. 插头DP(基于连通性状态压缩的动态规划问题）（让你从入门到绝望）

    今天,我,Monkey king 又为大家带来大(ju)佬(ruo)的算法啦!--插头DP 例题(菜OJ上的网址:http://caioj.cn/problem.php?id=1489): 那么,这道 ...

  6. 常用数字信号的产生（C实现）-ARMA模型数据生成

    ARMA模型属于信号现代谱估计的范畴,AR模型常用于信号的线性预测.AR模型最后归结为线性方程,MA最后为非线性方程,因此,AR模型使用较多. AR模型最后归结为解Yule-Walker方程,对应矩阵 ...

  7. linux下磁盘分区、格式化、挂载

    (1)fdisk /dev/sdb进行分区 (2)选择n表示添加一个分区,选择d表示删除一个分区.可通过m获取帮助信息 (3)选择p表示主分区,然后输入分区大小 (4)分区完成后,可通过fdisk - ...

  8. (3)分布式下的爬虫Scrapy应该如何做-递归爬取方式，数据输出方式以及数据库链接

    放假这段时间好好的思考了一下关于Scrapy的一些常用操作,主要解决了三个问题: 1.如何连续爬取 2.数据输出方式 3.数据库链接 一,如何连续爬取: 思考:要达到连续爬取,逻辑上无非从以下的方向着 ...

  9. 小旭讲解 LeetCode 53. Maximum Subarray 动态规划 分治策略

    原题 Given an integer array nums, find the contiguous subarray (containing at least one number) which ...

  10. React远程服务

    http://web1.dev5.net:3002/cloud/start?server=exf2&name=zhangxiaocong http://web1.dev5.net:3002/c ...