您的位置：首页 > 编程技术 > js  >  js实现选中页面文字将其分享到新浪微博

js实现选中页面文字将其分享到新浪微博

 更新时间：2015年11月8日 20:27  点击：2869

一、功能简述
正是微博如火如荼的时节，其中各个微博的分享功能是网站推广产品的好东东啊，此时如何方便快捷的使用微博的分享功能就显得比较重要了。我的站点每篇文章的底部有一些分享的链接：


不过我觉得这些分享基本上就是聋子的耳朵――摆设。除非这篇文章惊天地、泣鬼神，痛彻心扉，穿越前世今生。但是，如果有更加方便快捷的分享方式，这种冷淡得让人结冰的场面或许就不会经常出现。
一般翻译软件都有划词翻译功能，例如有道桌面词典的桌面划词翻译功能：

 

启用后，随便选中那个软件的一段文字，就会出现类似这样子的浮动提示框：

在web页面上，我们也是可以实现类似的效果的：划词→显示提示→分享。这就是本文要展示的内容。
 
二、效果与demo
demo页面的文字是我点兵点将随机找的篇博客内容，纯粹示例。随便选择一段文字，结果就会出现个新浪的怪眼睛logo，如下图：


然后，点击那个晃啊晃的猥琐的眼睛，就实现了选中文字分享到新浪微博的功能啦――会打开个新页面――如下效果：

是不是分享起来很简单很方便啊！
三、方法与代码
选中即分享的功能看上去比较高级，其实实现是相当简单的。其中的会让人头大，一般人也不感兴趣的原理这里就直接跳过。这个js文字选中后分享到新浪 微博的功能我简单的封装了下，方法名是：$sinaMiniBlogShare，当然，您不喜欢可以换掉，甚至不要，此方法完整代码如下：

var $sinaMiniBlogShare = function(eleShare, eleContainer) {   var eleTitle = document.getElementsByTagName("title")[0];   eleContainer = eleContainer || document;   var funGetSelectTxt = function() {     var txt = "";     if(document.selection) {       txt = document.selection.createRange().text;  // IE     } else {       txt = document.getSelection();     }     return txt.toString();   };   eleContainer.onmouseup = function(e) {     e = e || window.event;     var txt = funGetSelectTxt(), sh = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;     var left = (e.clientX - 40 < 0) ? e.clientX + 20 : e.clientX - 40, top = (e.clientY - 40 < 0) ? e.clientY + sh + 20 : e.clientY + sh - 40;     if (txt) {       eleShare.style.display = "inline";       eleShare.style.left = left + "px";       eleShare.style.top = top + "px";     } else {       eleShare.style.display = "none";     }   };   eleShare.onclick = function() {     var txt = funGetSelectTxt(), title = (eleTitle && eleTitle.innerHTML)? eleTitle.innerHTML : "未命名页面";     if (txt) {       window.open('http://v.t.sina.com.cn/share/share.php?title=' + txt + '→来自页面"' + title + '"的文字片段&url=' + window.location.href);       }   }; };

可以看到$sinaMiniBlogShare方法有两个参数，eleShare和eleContainer，其中，前一个参数是必须的，指的是文 字选中后出现的浮动层元素（在本文demo中就是新浪眼睛图标）；后面一个参数指文字选择的容器元素，可选参数，如果不设置则指document元素，也 就是整个页面文字选中都会触发分享的功能。
假设新浪微博分享图标的HTML如下：

<img id="imgSinaShare" class="img_sina_share" title="将选中内容分享到新浪微博" src="http://simg.sinajs.cn/blog7style/images/common/share.gif" />

则直接：

$sinaMiniBlogShare(document.getElementById("imgSinaShare"));

就实现了选中文字分享到新浪微博的功能了。
这里的方法没有兼容性问题，IE之流，firefox或是chrome浏览器可以轻松分享；另外，方法原生的javascript代码，不依赖于任何库，所以，只要浏览器不禁用javascript，哪里都可以使用，真可谓方便快捷，无孔不入，网页开发，必备良药。

其实，此方法不仅支持新浪微博，支持企鹅微博（腾讯微博），狐狸微博（搜狐微博），也是可以的，只要根据各个微博分享页面的API地址，将window.open()中的地址换换就ok了。
以上就是js实现选中页面文字将其分享到新浪微博的方法，时间仓促，技术有限，欢迎多多指正，大家共同进步。

[!--infotagslink--]

相关文章

  • Photoshop火龙变冰龙制作教程分享

    今天小编在这里就来给Photoshop的这一款软件的使用者们来说下火龙变冰龙的制作教程，各位想知道具体的制作步骤的使用者们，那么下面就快来跟着小编一起看看制作教程吧。...2016-09-14

  • Illustrator渐变网格工具绘制可爱的卡通小猪教程分享

    今天小编在这里就来给Illustrator的这一款软件的使用者们来说一说渐变网格工具绘制可爱的卡通小猪的教程，各位想知道具体制作方法的使用者们，那么下面就快来跟着小编一...2016-09-14

  • Photoshop功夫熊猫电影海报制作步骤分享

    不知不觉功夫熊猫这部电影已经出到3了，今天小编在这里要教大家的是用Photoshop制作功夫熊猫3的海报，各位想知道制作方法的，那么下面就来跟着小编一起看看吧。 给各...2016-09-14

  • photoshop日系小清新通透人像调色教程分享

    今天小编在这里就来给photoshop的这一款软件的使用者们来说一说日系小清新通透人像的调色教程，各位想知道具体的调色步骤的使用者们，那么下面就快来跟着小编一起看一看...2016-09-14

  • PHP+Mysql+jQuery实现发布微博程序 php篇

    先还是要说明本例的业务流程： 1、前端用户输入内容，并对输入的内容字数进行实时统计。 2、用户提交数据，jQuery实现通过Ajax向后台发送数据。 3、后台PHP接收提交表单的数据，并对数据进行必要的安全过滤。 4、后台PHP连接...2015-10-21

  • CI框架开发新浪微博登录接口源码完整版

    首先来看下流程：流程原理： 1.通过code获得access_token通过授权，并获取用户的信息（包括用户u_id）(这个u_id在后面的第三方登录表里面叫sina_id，那个表是需要自己建的) 2.查询第三方登录表，如果不存在用户sina_id,分2...2014-05-31

  • php威盾解密的例子分享

    下面来给大家分享两个关于php威盾解密的例子，一个是批量解密一个是超级算法的解密都非常的好，大家有举的进入参考。 例子，批量解密 代码如下 复制代码 ...2016-11-25

  • PHP mysql与mysqli事务使用说明 分享

    mysqli封装了诸如事务等一些高级操作，同时封装了DB操作过程中的很多可用的方法。应用比较多的地方是 mysqli的事务。...2013-10-02

  • php实例分享之html转为rtf格式

    核心代码： 复制代码 代码如下:<!--?php$html2RTFCom = new COM("HTML2RTF.Converter");$html2RTFCom--->PreserveImages = true;$html2RTFCom->PageNumbers = 1;$html2RTFCom->PageNumbersAlignH = 1;$html2RTFCom->Pa...2014-06-07

  • 美图秀秀制作卡通全家福教程分享

    今天小编在这里就来给美图秀秀的这一款软件的使用者们来说下制作卡通全家福的教程，各位想知道具体制作方法的使用者们，那么下面就快来跟着小编一起看一看教程吧。 ...2016-09-14

  • 微信小程序实现canvas分享朋友圈海报

    这篇文章主要为大家详细介绍了微信小程序实现canvas分享朋友圈海报，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2020-06-21

  • vue如何调用浏览器分享功能详解

    这篇文章主要给大家介绍了关于vue如何调用浏览器分享的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-03-20

  • js实现选中页面文字将其分享到新浪微博

    一、功能简述 正是微博如火如荼的时节，其中各个微博的分享功能是网站推广产品的好东东啊，此时如何方便快捷的使用微博的分享功能就显得比较重要了。我的站点每篇文章的底部有一些分享的链接： 不过我觉得这些分享基本上...2015-11-08

  • 纯JS代码实现一键分享功能

    在qq空间，新浪微博，人人网等网络平台大家经常可以看到一键分享功能，那么基于js代码是如何实现一键分享的呢？下面脚本之家小编给大家介绍js实现一键分享功能的代码，需要的朋友参考下吧...2016-04-22

  • PHP+memcache实现消息队列案例分享

    memche消息队列的原理就是在key上做文章，用以做一个连续的数字加上前缀记录序列化以后消息或者日志。然后通过定时程序将内容落地到文件或者数据库。php实现消息队列的用处比如在做发送邮件时发送大量邮件很费时间的问...2014-05-31

  • MySQL 5.5主从同步设置笔记分享

    先修改Master（10.1.123.197）的 my.cnf 配置在 [mysqld] 中新增以下内容:复制代码 代码如下:log-bin=mysql-binlog-bin-index=mysql-bin.indexserver-id = 1sync_binlog=1binlog_format=mixed然后指定要做同步的数据库，并...2014-05-31

  • Photoshop曲线基本功能解析分享

    今天小编在这里就来给Photoshop的这一款软件的使用者们来说一说曲线的基本功能，各位想知道具体信息的使用者，那么下面就快来跟着小编一起看一看教程吧。 给各位Pho...2016-09-14

  • Painter基础教程之图像水管分享

    今天小编在这里就来给Painter的这一款软件的使用者们来说下基础教程之图像水管，各位想知道的使用者们，那么下面就快来跟着小编一起看看吧。 给各位Painter软件的使...2016-09-14

  • 美图秀秀怎么制作LOMO效果 LOMO效果制作教程分享

    今天小编在这里就来给美图秀秀的这一款软件的使用者们来说下LOMO效果的制作教程，各位想知道具体制作方法的使用者们，那么下面就快来跟着小编一起看一看教程吧。 给...2016-09-14

  • 美图秀秀怎么制作发光字 发光字制作教程分享

    今天小编在这里就来给美图秀秀的这一款软件的使用者们来说下发光字的制作教程，各位想知道具体制作步骤的，那么下面就快来跟着小编一起看一看教程吧。 给各位美图秀...2016-09-14