`
axl234
  • 浏览: 258191 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

页面选中文字分享到新浪微博

 
阅读更多

选中即分享的功能看上去比较高级,其实实现是相当简单的。其中的会让人头大,一般人也不感兴趣的原理这里就直接跳过。这个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代码,不依赖于任何库,

分享到:
评论

相关推荐

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

    NULL 博文链接:https://axl234.iteye.com/blog/1317778

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

    主要介绍了js实现选中页面文字将其分享到新浪微博,需要的朋友可以参考下

    WordPress将选中内容分享到新浪腾讯微博的方法

    选中即分享的功能看上去比较高级,其实实现是相当简单的,其中的会让人头大,一般人也不感兴趣的原理这里就直接跳过,这个js文字选中后分享到新浪微博的功能我简单的封装了下,方法名是:$sinaMiniBlogShare 实例代码如下:...

    新浪微博微过滤WeiGuoLv.zip

    新浪微博是一个无比方便的信息获取渠道,我们都喜欢刷微博。 “微过滤”的目的就是过滤掉无用的信息烟尘和令人反感的内容,让微博变得更“营养”。 微过滤提供了丰富的自定义选项: 黑白名单 - 用黑名单滤掉不想...

    jQuery实现鼠标选文字发新浪微博的方法

    最近注意到新浪博客有个小功能,就是当鼠标选中一段文字时会浮现一个小图片,点击这个图片可以把选中内容发送到新浪微博,一时兴起昨晚就写了一个Demo玩了一下,代码超简单,没优化,有兴趣的朋友可以自己改进。...

    新浪微博助手(&S)-crx插件

    动动鼠标即可把自己选中的图片、文字、以及视频的地址转播到新浪微博,您不必担心安全问题,因为这一切都是调用新浪微博官方API接口完成的.程序制作GodSon4.0.7.0(2014-2-07)chrome更新API4.0.7.0(2014-2-07)...

    jspmysql基于ssm框架的校园微博的设计与实现.zip

    用户在进入自己的微博信息系统之后,可以在微博发布框中输入想发布的内容发布微博,可以是纯文字微博或带有图片的微博。同时可以选择原创微博或转发他人微博 2.2微博撤销 用户可点击删除按钮对自身最新发布的微博...

    Android仿新浪微博发布微博界面设计(5)

    本教程为大家分享了Android发布微博、添加表情等功能的具体代码,供大家参考,具体内容如下 发布一条新微博接口:http://open.weibo.com/wiki/2/statuses/update 上传图片并发布一条新微博接口:...

    Discuz!X1.5安装分享插件.rar

    以X1.5版本与此步骤相同 ...5、进行上述操作后,您就可以在您的论坛页面中看到百度分享按钮,并通过该按钮方便的分享内容到人人网、开心网、QQ空间、新浪微博等一系列SNS站点。下图为默认设置下的分享按钮示例。

    octoman-weibo-backup:Octoman微博备份工具

    在PC版新浪微博页面点击扩展图标,出现的拖放列表中选择需要保存的用户,然后点击保存按钮 扩展使用示图 保存后生成的文件示图 生成HTML文件CSS样式与图片是在线的,如想完全离线使用,可将HTML文件Chrome打开后快捷...

    有图电子书制作软件 v4.0.zip

    用户可以将设计作品一键分享到新浪微博、腾讯微博、人人网……创意在分享中互动,在互动中升华。   一张照片只能代表生活的点滴,而一本画册能串成没有断点的记忆……有图,伴您成长:无论孩子的出生和成长、婚礼...

    国人原创多风格自适应wordpress主题:youleb

    11,社交功能:新浪微博,腾讯微博,微信,RSS订阅。 12,丰富的广告位:LOGO右侧位置,文章内页标题下和评论上。侧栏和底栏有内置广告小工具。 13,文章目录,在文章内容页显示文章目录。 特色点在哪儿: 1,内置...

    云边轻博客(开源轻博客) v0.5 beta.rar

    3、支持发帖同步到新浪微博,支持QQ、微博头像同步到云边。 4、支持关注、喜欢(收藏)、评论等交互性的操作。 5、发布音乐类型可以使用外部地址的方式,比虾米、优酷,等网站。 6、发布图片类型使用flash上传组件,...

    微过滤-crx插件

    语言:中文 (简体) 新浪微博过滤器,根据自定义规则,将不想看到的...目前只实现了 Chrome 扩展和新浪微博的过滤,欢迎有兴趣的朋友参与开发,将其移植到其他浏览器和其他微博。详情见主页http://weiguolv.sinaapp.com/

    小刀娱乐网源码2018版 v4.17.rar

    在选中复选框或单选框时,为了增加鼠标点选的方便性,点击其后面的文字同样能够起到选择复选框或单选框的作用。 4、弹窗对话框: 弹窗对话框是系统对管理员做出操作的回应,通常情况下可点击弹窗对话框上面的确定...

    酷播(极酷)跨平台多终端网页播放器 v4.0.zip

    13、支持视频分享,支持微博分享(新浪微博/腾讯微博/百度收藏/人人网 分享),支持分享模式控制; 14、支持普通 / 高清视频切换;支持视频模式切换(等比模式/拉伸模式/4:3比例/16:9比例 ); 15、支持Logo...

Global site tag (gtag.js) - Google Analytics