js实现将选中内容分享到新浪或腾讯微博


Posted in Javascript onDecember 16, 2015

微博如火如荼,大家都选择用微博带来社会化流量,顺便推广产品和网站,几乎所有的网站都有分享到代码,但是还有一种更快捷的分享方式,javascript就可以实现将选定内容轻松分享到新浪微博和腾讯微博,效果图如下:

js实现将选中内容分享到新浪或腾讯微博

将选中的内容分享到新浪微博,腾讯微博实现js代码如下:

<STYLE>
.img_sina_share {
DISPLAY: none; CURSOR: pointer; POSITION: absolute
}
.img_qq_share {
DISPLAY: none; CURSOR: pointer; POSITION: absolute
}
</STYLE>
<IMG
class=img_sina_share id=imgSinaShare title=将选中内容分享到新浪微博
src="http://www.phpddt.com/usr/themes/dddefault/images/sina.gif">
<IMG
class=img_qq_share id=imgQqShare title=将选中内容分享到腾讯微博
src="http://www.phpddt.com/usr/themes/dddefault/images/qq.gif">
<SCRIPT>
var eleImgShare = document.getElementById("imgSinaShare"); /
var eleImgShare2 = document.getElementById("imgQqShare"); 
 
var $miniBlogShare = function(eleShare,eleShare2,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";
eleShare2.style.display = "inline";
eleShare2.style.left = left + 30 + "px";
eleShare2.style.top = top + "px";
} else {
eleShare.style.display = "none";
eleShare2.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 + '','微博分享','width=700, height=580, top=320, left=180, toolbar=no, menubar=no, scrollbars=no, location=yes, resizable=no, status=no');
}
};
eleShare2.onclick = function() { //点击腾讯微博图标
var txt = funGetSelectTxt(), title = (eleTitle && eleTitle.innerHTML)? eleTitle.innerHTML : "未命名页面";
if (txt) {
window.open( 'http://v.t.qq.com/share/share.php?title=' + encodeURIComponent(txt + ' ' + title + ' ') + '&url=' + window.location.href + '','微博分享','width=700, height=580, top=320, left=180, toolbar=no, menubar=no, scrollbars=no, location=yes, resizable=no, status=no');
}
};
}(eleImgShare,eleImgShare2);
</SCRIPT>

将以上的代码黏贴到你想要进行内容分享的页面,要注意的是,最好不要放在header.php或者footer.php这样网站所有内容都进行分享,而我只是放在文章页面!

以上就是js实现将选中内容分享到新浪或腾讯微博的详细代码,希望对大家学习javascript程序设计有所帮助。

Javascript 相关文章推荐
javascript预览上传图片发现的问题的解决方法
Nov 25 Javascript
js隐藏与显示回到顶部按钮及window.onscroll事件应用
Jan 25 Javascript
纯JS实现根据CSS的class选择DOM
Mar 22 Javascript
jquery实现在光标位置插入内容的方法
Feb 05 Javascript
基于jQuery通过jQuery.form.js插件使用ajax提交form表单
Aug 17 Javascript
浅析JavaScript 箭头函数 generator Date JSON
May 23 Javascript
JavaScript数据类型学习笔记分享
Sep 01 Javascript
jQuery动态创建元素以及追加节点的实现方法
Oct 20 Javascript
详解Js中的模块化是如何实现的
Oct 18 Javascript
JavaScript中字符串的常用操作方法及特殊字符
Mar 18 Javascript
Vue两个版本的区别和使用方法(更深层次了解)
Feb 16 Javascript
JavaScript的一些小技巧分享
Jan 06 Javascript
JavaScript运行过程中的“预编译阶段”和“执行阶段”
Dec 16 #Javascript
Sublime Text 3常用插件及安装方法
Dec 16 #Javascript
基于MVC4+EasyUI的Web开发框架形成之旅之界面控件的使用
Dec 16 #Javascript
基于JavaScript获取鼠标位置的各种方法
Dec 16 #Javascript
javascript基于prototype实现类似OOP继承的方法
Dec 16 #Javascript
javascript数组克隆简单实现方法
Dec 16 #Javascript
Perl Substr()函数及函数的应用
Dec 16 #Javascript
You might like
php配置php-fpm启动参数及配置详解
2013/11/04 PHP
PHP FATAL ERROR: CALL TO UNDEFINED FUNCTION BCMUL()解决办法
2014/05/04 PHP
初识PHP
2014/09/28 PHP
php函数传值的引用传递注意事项分析
2016/06/25 PHP
javascript实现playfair和hill密码算法
2014/12/07 Javascript
JavaScript设置body高度为浏览器高度的方法
2015/02/09 Javascript
Jquery网页内滑动缓冲导航的实现代码
2015/04/05 Javascript
CSS3 3D 技术手把手教你玩转
2016/09/02 Javascript
js实现表单提交后不重新刷新当前页面
2016/11/30 Javascript
JS通过调用微信API实现微信支付功能的方法示例
2017/06/29 Javascript
jQuery层级选择器_动力节点节点Java学院整理
2017/07/04 jQuery
vue组件父子间通信之综合练习(聊天室)
2017/11/07 Javascript
Vue动态获取width的方法
2018/08/22 Javascript
JS集合set类的实现与使用方法示例
2019/02/01 Javascript
解决vue-router 嵌套路由没反应的问题
2020/09/22 Javascript
[06:16]第十四期-国士无双绝地翻盘之撼地神牛
2014/06/24 DOTA
Python def函数的定义、使用及参数传递实现代码
2014/08/10 Python
python中单下划线_的常见用法总结
2018/07/10 Python
python3.7 sys模块的具体使用
2019/07/22 Python
pygame实现俄罗斯方块游戏(基础篇1)
2019/10/29 Python
使用tensorflow进行音乐类型的分类
2020/08/14 Python
HTML5通过调用canvas对象的getContext()方法来获取绘图环境
2014/06/23 HTML / CSS
ALDI奥乐齐官方海外旗舰店:德国百年超市
2017/12/27 全球购物
美国滑雪和滑雪板商店:Buckman
2018/03/03 全球购物
设计4个线程,其中两个线程每次对j增加1,另外两个线程对j每次减少1。写出程序。
2014/12/30 面试题
【魔兽争霸3重制版】原版画面与淬火MOD画面对比
2021/03/26 魔兽争霸
升国旗演讲稿
2014/09/05 职场文书
2014大学生中国梦主题教育学习思想汇报
2014/09/10 职场文书
个人整改措施书面材料
2014/10/24 职场文书
2015年七一建党节演讲稿
2015/03/19 职场文书
2015年青年志愿者协会工作总结
2015/04/27 职场文书
党支部考察鉴定意见
2015/06/02 职场文书
创业计划书之美甲店
2019/09/20 职场文书
教你用Java在个人电脑上实现微信扫码支付
2021/06/13 Java/Android
Netty结合Protobuf进行编解码的方法
2021/06/26 Java/Android
详解Mysq MVCC多版本的并发控制
2022/04/29 MySQL