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

 更新时间:2015年12月16日 16:01:09   投稿:lijiao  
这篇文章主要介绍了js实现将选中内容分享到新浪或腾讯微博,需要的朋友可以参考下

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

将选中的内容分享到新浪微博,腾讯微博实现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模仿淘宝信用评价实例(附源码)

    这篇文章主要介绍了Javascript模仿淘宝信用评价功能实现方法,以完整实例形式分析了JavaScript响应鼠标事件动态改变页面元素的相关技巧,并附带了完整的实例代码供读者下载参考,需要的朋友可以参考下
    2015-11-11
  • 小程序自定义组件实现城市选择功能

    小程序自定义组件实现城市选择功能

    这篇文章主要介绍了小程序自定义组件实现城市选择功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-07-07
  • JavaScript中this详解

    JavaScript中this详解

    都说 JavaScript 是一种很灵活的语言,这其实也可以说它是一个混乱的语言。它把函数式编程和面向对象编程糅合一起,再加上动态语言特性,简直强大无比,下面小编给大家介绍Javascript中this详解,需要的小伙伴可以来参考下
    2015-09-09
  • canvas绘制一个常用的emoji表情

    canvas绘制一个常用的emoji表情

    本文主要介绍了canvas绘制一个常用的emoji表情的示例代码。具有很好的参考价值,下面跟着小编一起来看下吧
    2017-03-03
  • 浅谈addEventListener和attachEvent的区别

    浅谈addEventListener和attachEvent的区别

    下面小编就为大家带来一篇浅谈addEventListener和attachEvent的区别。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07
  • 解决Babylon.js中AudioContext was not allowed to start异常问题

    解决Babylon.js中AudioContext was not allowed&nbs

    这篇文章主要介绍了解决Babylon.js中AudioContext was not allowed to start异常问题方法详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-04-04
  • 微信通过页面(H5)直接打开本地app的解决方法

    微信通过页面(H5)直接打开本地app的解决方法

    这篇文章主要为大家详细介绍了微信通过页面(H5)直接打开本地app的解决方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-09-09
  • JavaScript sleep睡眠函数的使用

    JavaScript sleep睡眠函数的使用

    JavaScript是单线程运行的,没有内置的sleep函数,那么JavaScript sleep睡眠函数是怎样实现的,感兴趣的小伙伴们可以参考一下
    2021-07-07
  • 关于window.pageYOffset和document.documentElement.scrollTop

    关于window.pageYOffset和document.documentElement.scrollTop

    window.pageYOffset:Netscape属性,指的是滚动条顶部到网页顶部的距离
    2011-04-04
  • 详细聊聊TypeScript中any unknown never和void的区别

    详细聊聊TypeScript中any unknown never和void的区别

    这篇文章主要给大家聊聊TypeScript 中 any、unknown、never 和 void 有什么区别,文中有详细的代码实例讲解,具有一定的参考价值,需要的朋友可以参考下
    2023-07-07

最新评论