新浦京81707con > 功能介绍 > js实现将选中内容分享到新浪或腾讯微博,js实现

原标题:js实现将选中内容分享到新浪或腾讯微博,js实现

浏览次数:66 时间:2019-09-04

一、作用简述
多亏乐乎如日中天的时节,其中各类和讯的享用效能是网址推广产品的好东东呀,此时如何方便火速的施用博客园的享用功效就呈现相比较关键了。作者的站点每篇小说的最底层有一对享受的链接:

js达成选中页面文字将其享用到腾讯网今日头条,js今日头条

一、功用简述
好在微博如火如荼的时令,个中各样和讯的享受作用是网址推广产品的好东东啊,此时怎么着方便急迅的施用搜狐的分享功效就显得很主要了。作者的站点每篇小说的尾部有部共享受的链接:

澳门新萄京赌场手机版 1

然则笔者以为这几个分享基本上便是聋子的耳根——安放。除非那篇小说惊天地、泣鬼神,痛彻心扉,穿越前世今生。可是,假若有越发方便连忙的共享情势,这种漠视得让人结霜的排场恐怕就不会经常出现。
相似翻译软件都有划词翻译成效,例如有道桌面词典的桌面划词翻译作用:

澳门新萄京赌场手机版 2 

启用后,随便选中那多个软件的一段文字,就可以出现就像这样子的改造提醒框:

澳门新萄京赌场手机版 3

在web页面上,我们也是能够兑现类似的效果的:划词→突显提醒→分享。那就是本文要体现的剧情。
 
二、效果与demo
demo页面包车型客车文字是自身点兵点将轻巧找的篇博客内容,纯粹示例。随意选拔一段文字,结果就会合世个今日头条的怪眼睛logo,如下图:

澳门新萄京赌场手机版 4

下一场,点击那多个晃啊晃的低俗的眼眸,就兑现了当选文字分享到网易和讯的意义啦——会展开个新页面——如下效果:

澳门新萄京赌场手机版 5

是或不是享受起来很轻松很有益于啊!
三、方法与代码 入选即享受的成效看上去比较高端,其实达成是一定轻便的。在那之中的会令人头大,普通人也不感兴趣的原理这里就一向跳过。那些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);   
    } 
  }; 
}; 

可以看出$sina迷你BlogShare方法有多少个参数,eleShare和eleContainer,个中,前三个参数是必需的,指的是文 字选中后边世的浮动层成分(在本文demo中正是乐乎眼睛Logo);前面贰个参数指文字选用的器皿成分,可选参数,假诺不安装则指document成分,也 正是整个页面文字选中都会触发共享的作用。
假如腾讯网网易分享Logo的HTML如下:

<img id="imgSinaShare" class="img_sina_share" title="将选中内容分享到新浪微博" src="http://www.bkjia.com/uploads/allimg/151110/01563aX9-5.gif" /> 

澳门新萄京赌场手机版,则直接:

$sinaMiniBlogShare(document.getElementById("imgSinaShare")); 

就达成了当选文字分享到网易乐乎的功力了。
此地的章程未有包容性难点,IE之流,firefox或是chrome浏览器能够轻便享受;其他,方法原生的javascript代码,不借助于任何库,所以,只要浏览器不禁止使用javascript,哪儿都得以选拔,真可谓方便急迅,无孔不入,网页开垦,必备良药。

实际上,此办法不但援助今日头条天涯论坛,支持企鹅今日头条(Tencent果壳网),狐狸和讯(腾讯网果壳网),也是足以的,只要依照各样今日头条分享页面包车型地铁API地址,将window.open()中的地址换换就ok了。
如上正是js达成选中页面文字将其享用到博客园今日头条的主意,时间仓促,才具有限,应接多多指正,我们共同升高。

一、作用简述 就是博客园如日方升的时节,个中各类博客园的享用功能是网址推广产品的好东...

和讯如日方升,大家都采纳用博客园带来社会化流量,顺便推广产品和网址,大概具备的网址都有分享到代码,可是还也有一种更加高速的享用情势,javascript就能够达成将选定内容轻易享受到乐乎今日头条和Tencent腾讯网,效果图如下:

澳门新萄京赌场手机版 6

澳门新萄京赌场手机版 7

可是本人感觉那一个分享基本上就是聋子的耳朵——安置。除非那篇作品惊天地、泣鬼神,痛彻心扉,穿越前世今生。但是,固然有更为方便急忙的享受情势,这种漠视得令人结霜的场面或者就不会通常现身。
诚如翻译软件皆有划词翻译功用,举个例子有道桌面词典的桌面划词翻译功效:

将当选的内容共享到和讯腾讯网,腾讯搜狐达成js代码如下:

澳门新萄京赌场手机版 8 

<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那样网址有着剧情都开展共享,而自己只是放在小说页面!

澳门新萄京赌场手机版 9

如上正是js完结将入选内容分享到腾讯网或Tencent今日头条的详实代码,希望对我们学习javascript程序设计具备协理。

在web页面上,我们也是足以兑现类似的效用的:划词→展现提醒→分享。那便是本文要显得的剧情。
 
二、效果与demo
demo页面包车型客车文字是自家点兵点将随便找的篇博客内容,纯粹示例。随意选取一段文字,结果就汇合世个新浪的怪眼睛logo,如下图:

你或许感兴趣的稿子:

  • 基于js完结微信发送老铁怎样享受到对象圈、腾讯网
  • js完成选中页面文字将其享用到博客园和讯
  • JavaScript兑现选普通话字提醒天涯论坛博客园分享功能

本文由新浦京81707con发布于功能介绍,转载请注明出处:js实现将选中内容分享到新浪或腾讯微博,js实现

关键词: 新浦京81707con

上一篇:JS实现超简单的鼠标拖动效果,JS实现的自定义网

下一篇:没有了