鼠标选中的文字分享到微博

原文地址：http://www.rainweb.cn/article/mouse-selection-weibo.html

腾讯新闻、新浪新闻有一个常见功能，就是当鼠标选中一段文字时会浮现一个小图片，点击这个图片可以把选中内容发送到微博，原理很简单，先获得鼠标选 中文字，然后调用博客中提供的页面，把文字作为参数传过去就OK了。【有个小问题就是，选中的文字有特殊字符会报错，需要过滤一下】

分三步走：

1、文字的选中

区分document.selection和window.getSelection();

document.selection只有IE支持，而对于window.getSelection()，查了一些资料：FireFox和  Safari支持，都不是标准语法，但我在 opera与chrom里都测试通过。原来网上的好多也不靠谱，自己测试才是王道。

其中selection 对象代表了当前激活选中区，即高亮文本块，或文档中用户可执行某些操作的其它元素。selection   对象的典型用途是作为用户的输入，以便识别正在对文档的哪一部分正在处理，或者作为某一操作的结果输出给用户。

监听实现文字选中代码：

JavaScript代码

1. if (document.selection) {  
2.      r = document.selection.createRange().text;  
3. }  
4. else if (window.getSelection()) {  
5.      r = window.getSelection();  
6. }  

 

2、tip显示

对于tip的显示不做多解释，这没什么可说的，即鼠标选中后弹出tip提示

JavaScript代码

1. var bowen = "发送到新浪微博";  
2. var tooltip = "<div id='tooltip' class='tooltip'><span onclick=ask('"+r+"')>" + bowen + "</span></div>";  
3. $("body").append(tooltip);  
4. $("#tooltip").css({  
5.     "top": (e.pageY + y) + "px",  
6.     "left": (e.pageX + x) + "px",  
7.     "position": "absolute"  
8. }).show("fast").mouseout(function(){  
9.          $(this).remove();  
10. });  

CSS代码

1.      .tooltip  
2.      {  
3.          width:120px;  
4.          height:23px;  
5.          line-height:23px;  
6.          background-color:#CCCCCC;  
7. cursor:pointer;  
8.      }  
9.      .tooltip span  
10.      {  
11.          color: #333333;  
12.          display: block;  
13.          font-size: 12px;  
14.          font-weight: bold;  
15.          text-indent: 10px;  
16.      }  

 

3、选中的文字作为参数提交给微博提供的接口

这里以新浪微博做例子：

XML/HTML代码

1. function ask(r) {  
2.         r=r.replace(/\s/g,"");  
3.         r=r.replace(/\n/g,"");  
4.            if (r != "") {  
5.                window.location.href="http://v.t.sina.com.cn/share/share.php?searchPic=false&title="+r+"&url=http://www.rainweb.cn";  
6.            }  
7.        }  

 

查看实例

你好你好你好你好你好你好你好你好【选中我测试】【选中我测试】【选中我测试】【选中我测试】。