现在的位置: 首页 > web前端 > 正文

分享至微博有什么方法

2020年07月21日 web前端 ⁄ 共 1244字 ⁄ 字号 评论关闭

  正是微博如火如荼的时节,其中各个微博的分享功能是网站推广产品的好东东啊,此时如何方便快捷的使用微博的分享功能就显得比较重要了。我的站点每篇文章的底部有一些分享的链接:


  分享至微博功能


  不过我觉得这些分享基本上就是聋子的耳朵——摆设。除非这篇文章惊天地、泣鬼神,痛彻心扉,穿越前世今生。但是,如果有更加方便快捷的分享方式,这种冷淡得让人结冰的场面或许就不会经常出现。


  一般翻译软件都有划词翻译功能,例如有道桌面词典的桌面划词翻译功能:


  启用后,随便选中那个软件的一段文字,就会出现类似这样子的浮动提示框:


  在web页面上,我们也是可以实现类似的效果的:划词→显示提示→分享。这就是本文要展示的内容。


  分享至微博效果与demo


  demo页面的文字是我点兵点将随机找的篇博客内容,纯粹示例。随便选择一段文字,结果就会出现个新浪的怪眼睛logo,如下图:


  然后,点击那个晃啊晃的猥琐的眼睛,就实现了选中文字分享到新浪微博的功能啦——会打开个新页面——如下效果:


  是不是分享起来很简单很方便啊!


  分享至微博方法与代码


  选中即分享的功能看上去比较高级,其实实现是相当简单的。其中的会让人头大,一般人也不感兴趣的原理这里就直接跳过。这个js文字选中后分享到新浪微博的功能我简单的封装了下,方法名是:$sinaMiniBlogShare,当然,您不喜欢可以换掉,甚至不要,此方法完整代码如下:


  var$sinaMiniBlogShare=function(eleShare,eleContainer){


  vareleTitle=document.getElementsByTagName("title")[0];


  eleContainer=eleContainer||document;


  varfunGetSelectTxt=function(){


  vartxt="";


  if(document.selection){


  txt=document.selection.createRange().text;//IE


  }else{


  txt=document.getSelection();


  }


  returntxt.toString();


  };


  eleContainer.onmouseup=function(e){


  e=e||window.event;


  vartxt=funGetSelectTxt(),sh=window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0;


  varleft=(e.clientX-40<0)?e.clientX+20:e.clientX-40,top=(e.clientY-40<0)?e.clientY+sh+20:e.clientY+sh-40;


  总之,分享至微博给大家简单的介绍了一些,希望大家多看看。


  

抱歉!评论已关闭.