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 相关文章推荐
自用js开发框架小成 学习js的朋友可以看看
Nov 16 Javascript
你可能不知道的JavaScript的new Function()方法
Apr 17 Javascript
Egret引擎开发指南之编译项目
Sep 03 Javascript
浅谈javascript中字符串String与数组Array
Dec 31 Javascript
JavaScript 学习笔记之基础中的基础
Jan 13 Javascript
react实现pure render时bind(this)隐患需注意!
Mar 09 Javascript
js计算两个日期间的天数月的实例代码
Sep 20 Javascript
JS html事件冒泡和事件捕获操作示例
May 01 Javascript
小程序实现悬浮搜索框
Jul 12 Javascript
javascript使用链接跨域下载图片
Nov 01 Javascript
electron 如何将任意资源打包的方法步骤
Apr 16 Javascript
Laravel 如何在blade文件中使用Vue组件的示例代码
Jun 28 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
了解咖啡雨林联盟认证 什么是雨林认证 雨林认证是什么意思
2021/03/05 新手入门
ThinkPHP中类的构造函数_construct()与_initialize()的区别详解
2017/03/13 PHP
源码分析 Laravel 重复执行同一个队列任务的原因
2017/12/25 PHP
js、css、img等浏览器缓存问题的2种解决方案
2013/10/23 Javascript
javascript 用函数语句和表达式定义函数的区别详解
2014/01/06 Javascript
ExtJS4利根据登录后不同的角色分配不同的树形菜单
2014/05/02 Javascript
jQuery设置和获取HTML、文本和值示例
2014/07/08 Javascript
原生JS和JQuery动态添加、删除表格行的方法
2015/05/28 Javascript
Jquery实现$.fn.extend和$.extend函数
2016/04/14 Javascript
jQuery中队列queue()函数的实例教程
2016/05/03 Javascript
javascript另类方法实现htmlencode()与htmldecode()函数实例分析
2016/11/17 Javascript
详解JavaScript中数组的reduce方法
2016/12/02 Javascript
关于Bootstrap按钮组件消除黄框的方法
2017/05/19 Javascript
js原生实现移动端手指滑动轮播图效果的示例
2018/01/02 Javascript
微信开发之企业付款到银行卡接口开发的示例代码
2018/09/18 Javascript
微信小程序学习笔记之表单提交与PHP后台数据交互处理图文详解
2019/03/28 Javascript
使用vue-cli3新建一个项目并写好基本配置(推荐)
2019/04/24 Javascript
JS实现排行榜文字向上滚动轮播效果
2019/11/26 Javascript
Vue.js获取手机系统型号、版本、浏览器类型的示例代码
2020/05/10 Javascript
前端使用crypto.js进行加密的函数代码
2020/08/16 Javascript
[08:56]DOTA2-DPC中国联赛2月23日Recap集锦
2021/03/11 DOTA
在Python中处理字符串之ljust()方法的使用简介
2015/05/19 Python
python实现矩阵乘法的方法
2015/06/28 Python
scrapy spider的几种爬取方式实例代码
2018/01/25 Python
python实现windows下文件备份脚本
2018/05/27 Python
python通过paramiko复制远程文件及文件目录到本地
2019/04/30 Python
Python编写打字训练小程序
2019/09/26 Python
Python 实现自动完成A4标签排版打印功能
2020/04/09 Python
TensorFlow的reshape操作 tf.reshape的实现
2020/04/19 Python
html5的canvas实现3d雪花飘舞效果
2013/12/27 HTML / CSS
什么是smarty? Smarty的优点是什么?
2013/08/11 面试题
质量承诺书格式
2014/05/20 职场文书
学生评语集锦
2015/01/04 职场文书
放假通知
2015/04/14 职场文书
三八节活动主持词
2015/07/04 职场文书
js前端图片加载异常兜底方案
2022/06/21 Javascript