选中即分享的功能看上去比较高级,其实实现是相当简单的。其中的会让人头大,一般人也不感兴趣的原理这里就直接跳过。这个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代码,不依赖于任何库,
分享到:
相关推荐
NULL 博文链接:https://axl234.iteye.com/blog/1317778
主要介绍了js实现选中页面文字将其分享到新浪微博,需要的朋友可以参考下
选中即分享的功能看上去比较高级,其实实现是相当简单的,其中的会让人头大,一般人也不感兴趣的原理这里就直接跳过,这个js文字选中后分享到新浪微博的功能我简单的封装了下,方法名是:$sinaMiniBlogShare 实例代码如下:...
新浪微博是一个无比方便的信息获取渠道,我们都喜欢刷微博。 “微过滤”的目的就是过滤掉无用的信息烟尘和令人反感的内容,让微博变得更“营养”。 微过滤提供了丰富的自定义选项: 黑白名单 - 用黑名单滤掉不想...
最近注意到新浪博客有个小功能,就是当鼠标选中一段文字时会浮现一个小图片,点击这个图片可以把选中内容发送到新浪微博,一时兴起昨晚就写了一个Demo玩了一下,代码超简单,没优化,有兴趣的朋友可以自己改进。...
动动鼠标即可把自己选中的图片、文字、以及视频的地址转播到新浪微博,您不必担心安全问题,因为这一切都是调用新浪微博官方API接口完成的.程序制作GodSon4.0.7.0(2014-2-07)chrome更新API4.0.7.0(2014-2-07)...
用户在进入自己的微博信息系统之后,可以在微博发布框中输入想发布的内容发布微博,可以是纯文字微博或带有图片的微博。同时可以选择原创微博或转发他人微博 2.2微博撤销 用户可点击删除按钮对自身最新发布的微博...
本教程为大家分享了Android发布微博、添加表情等功能的具体代码,供大家参考,具体内容如下 发布一条新微博接口:http://open.weibo.com/wiki/2/statuses/update 上传图片并发布一条新微博接口:...
以X1.5版本与此步骤相同 ...5、进行上述操作后,您就可以在您的论坛页面中看到百度分享按钮,并通过该按钮方便的分享内容到人人网、开心网、QQ空间、新浪微博等一系列SNS站点。下图为默认设置下的分享按钮示例。
在PC版新浪微博页面点击扩展图标,出现的拖放列表中选择需要保存的用户,然后点击保存按钮 扩展使用示图 保存后生成的文件示图 生成HTML文件CSS样式与图片是在线的,如想完全离线使用,可将HTML文件Chrome打开后快捷...
用户可以将设计作品一键分享到新浪微博、腾讯微博、人人网……创意在分享中互动,在互动中升华。 一张照片只能代表生活的点滴,而一本画册能串成没有断点的记忆……有图,伴您成长:无论孩子的出生和成长、婚礼...
11,社交功能:新浪微博,腾讯微博,微信,RSS订阅。 12,丰富的广告位:LOGO右侧位置,文章内页标题下和评论上。侧栏和底栏有内置广告小工具。 13,文章目录,在文章内容页显示文章目录。 特色点在哪儿: 1,内置...
3、支持发帖同步到新浪微博,支持QQ、微博头像同步到云边。 4、支持关注、喜欢(收藏)、评论等交互性的操作。 5、发布音乐类型可以使用外部地址的方式,比虾米、优酷,等网站。 6、发布图片类型使用flash上传组件,...
语言:中文 (简体) 新浪微博过滤器,根据自定义规则,将不想看到的...目前只实现了 Chrome 扩展和新浪微博的过滤,欢迎有兴趣的朋友参与开发,将其移植到其他浏览器和其他微博。详情见主页http://weiguolv.sinaapp.com/
在选中复选框或单选框时,为了增加鼠标点选的方便性,点击其后面的文字同样能够起到选择复选框或单选框的作用。 4、弹窗对话框: 弹窗对话框是系统对管理员做出操作的回应,通常情况下可点击弹窗对话框上面的确定...
13、支持视频分享,支持微博分享(新浪微博/腾讯微博/百度收藏/人人网 分享),支持分享模式控制; 14、支持普通 / 高清视频切换;支持视频模式切换(等比模式/拉伸模式/4:3比例/16:9比例 ); 15、支持Logo...