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程序设计有所帮助。

(0)

相关推荐

  • JavaScript实现选中文字提示新浪微博分享效果

    本文实例为大家分享了JS新浪微博分享功能,供大家参考,具体内容如下 <!DOCTYPE html> <html xmlns:wb="http://open.weibo.com/wb"> <head> <meta charset="utf-8"> <title>javaScript实现选中文字提示新浪微博分享的效果</title> <style type="text/css&quo

  • 基于js实现微信发送好友如何分享到朋友圈、微博

    微信浏览器内置了javascript私有对象WeixinJSBridge,可以实现发送给朋友.分享到朋友圈.分享到微博等功能. <script> var imgUrl = "图片地址"; var lineLink = "当前网址"; var descContent = "描述"; var shareTitle = '标题'; var appid = ''; function shareFriend() { WeixinJSBridge

  • js实现选中页面文字将其分享到新浪微博

    一.功能简述 正是微博如火如荼的时节,其中各个微博的分享功能是网站推广产品的好东东啊,此时如何方便快捷的使用微博的分享功能就显得比较重要了.我的站点每篇文章的底部有一些分享的链接: 不过我觉得这些分享基本上就是聋子的耳朵--摆设.除非这篇文章惊天地.泣鬼神,痛彻心扉,穿越前世今生.但是,如果有更加方便快捷的分享方式,这种冷淡得让人结冰的场面或许就不会经常出现. 一般翻译软件都有划词翻译功能,例如有道桌面词典的桌面划词翻译功能: 启用后,随便选中那个软件的一段文字,就会出现类似这样子的浮动提示框:

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

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

  • Java模拟新浪和腾讯自动登录并发送微博

    Java模拟新浪和腾讯自动登录并发送微博功能分享给大家,供大家参考,具体内容如下 1.准备工作 只是登录无需申请新浪和腾迅的开发者账号,如果需要发送微博功能,需要申请一个新浪和腾迅的开发者账号,并添加一个测试应用. 过程请参考官方帮助文档,申请地址:新浪:http://open.weibo.com    腾迅:http://dev.t.qq.com/ 我们需要的是App Key和App Secre及redirect_URI,源代码中已经包含了我申请的测试key,但由于限制直接用我的key你们的账

  • iOS新浪微博、腾讯微博分享功能实例

    一个是新浪微博,腾讯微博的分享按钮,一个是他们的绑定情况(其实就是是否授权).点击微博分享中新浪或腾讯按钮,就进行相应的授权(若没授权),显示微博内容,而后发布微博.设置界面中的绑定,就是相关的应用授权. 呵呵,其实也蛮简单滴. 首先分别从新浪微博开放平台(http://open.weibo.com/).腾讯微博开放平台(http://dev.t.qq.com/)中注册应用,获取到Appkey,AppSecret和AppURL(其中 AppURL是要自己填写的). 然后分别下载相关的SDK. h

  • js实现鼠标点击文本框自动选中内容的方法

    本文实例讲述了js实现鼠标点击文本框自动选中内容的方法.分享给大家供大家参考.具体如下: 这里使用JS实现鼠标点击时自动选中文本框文本的效果,相信许多朋友都遇到这种功能的,就是当我们点击文本框的时候,文本框中默认的文字会被全部选中,这样当你输入的时候不用再去选择,省去了一些麻烦,提高了输入效率,用户肯定会喜欢这功能,那么实现的方法是怎么样呢?通过本代码你就搞明白了. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/js-mouse-click

  • angular或者js怎么确定选中ul中的哪几个li

    刚来新公司接到新的需求做一个知识库页面 红色的是单选 蓝色的是多选 这些都是需要传递到后台的 开始不知道如何解决 下班后在家想到一个很巧妙的办法 不多说上代码 箭头所指就是在li里写一个隐藏的radio标签,把后台需要的id字段绑定到这个隐藏的radio上选中的时候传这个选中的radio的value就行 以上这篇angular或者js怎么确定选中ul中的哪几个li就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • js + css实现标签内容切换功能(实例讲解)

    先附上效果图和代码: html 文档: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="../js/tabs_function.js"></scri

  • 基于twbsPagination.js分页插件使用心得(分享)

    项目中之前需要分页插件,以前用的都是单纯叫做pagenation.js的插件,但是这次集成的时候,项目组一个孩纸用了这个插件,结合网上的例子琢磨了一把.其实大致流程都是相同的,主要将我在用这个分页插件的一些心得分享出来: 1.分页插件引入html中需要: bootstrap.css 分页插件js 自己写的分页的样式css[如果不用,也可以直接用bootstrap所带的分页css.] 使用jquery可以引入jquery.js html中: <script type="text/javasc

  • Js得到radiobuttonlist选中值的两种方法(推荐)

    如下所示: <%@ Page language="c#" Codebehind="WebForm1.aspx.cs" AutoEventWireup="false" Inherits="ajaxselect.OnmouseTitle.WebForm1" %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >

  • JS版微信6.0分享接口用法分析

    本文实例讲述了JS版微信6.0分享接口用法.分享给大家供大家参考,具体如下: 为了净化网络,整顿诱导分享及诱导关注行为,微信于2014年12月30日发布了<微信公众平台关于整顿诱导分享及诱导关注行为的公告>,微信平台开发者发现,原有的微信分享功能不能用了.正在苦于微信分享该怎么解决时,微信于2015年1月10日即时发布了开放JS-SDK,为微信网站的开发提供了强大的js功能. 注: 1.微信JS-SDK,提供的分享接口仅是监听分享事件触发时,修改分享的标题.链接等.不能自定义触发分享事件 2.

  • js实现Select列表内容自动滚动效果代码

    本文实例讲述了js实现Select列表内容自动滚动效果.分享给大家供大家参考.具体如下: 这里演示的Select列表内容自动滚动效果,文字可自动滚屏,当网页加载完毕后,Select中的内容会一个接一个向上滚动,当然,滚动的参数和速度是可以调节的.或许你会用得上. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-select-font-scroll-codes/ 具体代码如下: <html> <head> <title&g

随机推荐