html微博分享功能,js页面文字选中后分享到新浪微博实现
一、功能简述
正是微博如火如荼的时节,其中各个微博的分享功能是网站推广产品的好东东啊,此时如何方便快捷的使用微博的分享功能就显得比较重要了。我的站点每篇文章的底部有一些分享的链接:
不过我觉得这些分享基本上就是聋子的耳朵——摆设。除非这篇文章惊天地、泣鬼神,痛彻心扉,穿越前世今生。但是,如果有更加方便快捷的分享方式,这种冷淡得让人结冰的场面或许就不会经常出现。
一般翻译软件都有划词翻译功能,例如有道桌面词典的桌面划词翻译功能:
启用后,随便选中那个软件的一段文字,就会出现类似这样子的浮动提示框:
在web页面上,我们也是可以实现类似的效果的:划词→显示提示→分享。这就是本文要展示的内容。
二、效果与demo
demo页面的文字是我点兵点将随机找的篇博客内容,纯粹示例。随便选择一段文字,结果就会出现个新浪的怪眼睛logo,如下图:
然后,点击那个晃啊晃的猥琐的眼睛,就实现了选中文字分享到新浪微博的功能啦——会打开个新页面——如下效果:
是不是分享起来很简单很方便啊!
其实呢,本篇文章所在的页面本身就是个demo,你使用鼠标选中一段文字看看,哦呵呵,是不是有反应啊,不要犹豫,果断分享吧。//zxx:如果您发现并没有此效果,同时您没有禁用javascript,那么,您可能是在rss阅读器中或是在其他邪门歪道的网站上阅读本文,点击或浏览器地址栏中输入以下地址http://www.zhangxinxu.com/wordpress/?p=1428可以看到分享功能。
三、方法与代码
选中即分享的功能看上去比较高级,其实实现是相当简单的。其中的会让人头大,一般人也不感兴趣的原理这里就直接跳过。这个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如下:
则直接:
$sinaMiniBlogShare(document.getElementById("imgSinaShare"));
就实现了选中文字分享到新浪微博的功能了。
这里的方法没有兼容性问题,IE之流,firefox或是chrome浏览器可以轻松分享;另外,方法原生的javascript代码,不依赖于任何库,所以,只要浏览器不禁用javascript,哪里都可以使用,真可谓方便快捷,无孔不入,网页开发,必备良药。
四、结语及补充
其实呢,此方法不仅支持新浪微博,支持企鹅微博(腾讯微博),狐狸微博(搜狐微博),也是可以的,只要根据各个微博分享页面的API地址,将window.open()中的地址换换就可以了,我想,应该很简单的。您要是有兴致,可以把这些乱七八糟的分享都集合到一个方法中,做出插件性质的,各个网站任意分享,通过参数接口灵活控制,估计会流行的。不过我个人不太喜欢选中一段文字后面跟着个浮动的跟屁虫,尤其是大大的跟屁虫,看着眼烦,无兴趣,所以,我是不会去整一个分享集合的插件的。
时间仓促,技术有限,文中出现表述不准确的地方在所难免,欢迎指正。
(本篇完)
html微博分享功能,js页面文字选中后分享到新浪微博实现相关推荐
- js页面文字选中后分享到新浪微博实现
一.功能简述 正是微博如火如荼的时节,其中各个微博的分享功能是网站推广产品的好东东啊,此时如何方便快捷的使用微博的分享功能就显得比较重要了.我的站点每篇文章的底部有一些分享的链接: 不过我觉得这些分享 ...
- Android实现相册分享功能,Android系统自带分享功能的实现(可同时分享文字和图片)...
/** * 分享功能 * * @param context * 上下文 * @param activityTitle * Activity的名字 * @param msgTitle * 消息标题 ...
- android视频分享功能吗,Unity 调用 Android 分享功能(基于ShareRec SDK视频分享)
需求 Mob 平台是一个强大的提供分享功能的平台,为移动开发者提供 ShareSDK 社交分享.ShareREC 手游录像分享.短信验证码 SDK 及 BigApp 等免费服务. Unity 使用 S ...
- 微信小程序/uniapp分享功能-代码封装与使用(分享好友或朋友圈-两种方式)
官方地址:分享 | uni-app官网 一.分享朋友圈-详见uni-app官方文档 注意:更多注意事项见uni-app文档 结果展示: 二.分享好友或者朋友圈-详见微信开放文档 先展示: 实现分享 ...
- Vue.js页面跳转后返回上一页面记录上一页面select选定的值
在当前页面中,选中了某个标签中的问题,然后跳转到问题页面,按返回按钮返回到当前页面,继续选中之前的选中标签 实现效果如下图: 实现逻辑如下: 进入当前页面的时候,页面路由为http://localho ...
- js 页面所有超链接后加随机数 基于jquery
避免了页面缓存问题. rand = Math.random(); $("a").each(function () { ...
- android 调用原生分享功能,调用Android 系统自带分享功能
1. 设置Intent的action为Intent.ACTION_SEND. 2. 把要分享的数据通过.putExtra()传入intent. 3. 设置类型.setType(). 4.startAc ...
- 页面文字增加后,字体变大
在移动端添加很多文字时,文字被放大,可以给p标签添加 max-height: 9999px 解决
- html字数省略号代替,html文字两行后,就用省略号代替剩下的
html文字两行后,就用省略号代替剩下的 一.总结 一句话总结: 实现原理很简单,将box的高度设置为行高的两倍,超出之后隐藏,这样就只有两行了,然后再用after属性绝对定位在第二行后面加几个点 . ...
- 一、功能简述 正是微博如火如荼的时节,其中各个微博的分享功能是网站推广产品的好东东啊,此时如何方便快捷的使用微博的分享功能就显得比较重要了。我的站点每篇文章的底部有一些分享的链接: 不过我觉得这些分享
一.功能简述 正是微博如火如荼的时节,其中各个微博的分享功能是网站推广产品的好东东啊,此时如何方便快捷的使用微博的分享功能就显得比较重要了.我的站点每篇文章的底部有一些分享的链接: 不过我觉得这些分享 ...
最新文章
- VC++多文档实例编程分析
- 【原创】存储器设计思想——冯诺依曼结构和哈佛结构
- SQL的OPENROWSET开启和使用方法
- php正则匹配价格,关于php:Laravel正则表达式验证价格或空
- 乐玩插件和大漠插件哪个好_用好这5款Chrome插件,大幅提升你的生产力
- python scrapy教程实例_Python之scrapy实例1
- 微信小程序—智能小蜜(基于智能语义解析olami开放平台)
- 【Educational Codeforces Round 48 (Rated for Div. 2) D】Vasya And The Matrix
- 深度学习之常用优化方法篇
- TCP三次握手连接和TCP四次挥手及大量TIME_WAIT解决方法:
- c语言谭浩强第八章函数PPT,清华谭浩强C语言 第8章 函数.ppt
- Vue uniapp省份城市列表选择、省市选择
- 迅雷后门 迅雷签名可疑文件 请大家关注 内部邮件大爆料 过全部杀毒软件
- 微信、手Q、QQ浏览器userAgent记录
- python编程价格_Python基础练习实例46(查询价格)
- C语言递归实现四色定理,实现四色定理的C++程序
- CSP-S 2022游记
- Kylin (四) --------- Kylin 4.0 查询引擎
- miui系统小米手机应用双开默认登陆设置修改方法步骤
- 近1、2年来设计的几个飞机构型