关于技术您现在的位置是:首页 > 关于技术

选中文字分享至微博

头像 2019-02-02 13:28:05 123 人已围观 0 条评论

简介

今天我们用JS简单地实现选中文字分享,比如分享到新浪微博。 我们要实现的效果呢,就是下面这样的: 简单分析下就 […]

今天我们用JS简单地实现选中文字分享,比如分享到新浪微博。

我们要实现的效果呢,就是下面这样的:

简单分析下就是,先选中文字(10个字以上,可以在js里设置最少选中字数),然后松开鼠标,在鼠标的位置显示一个微博小图标,点击小图标即可跳转到微博分享页面,然后登陆微博账号即可分享啦。

Html结构的话就是一个简单的p标签,一段文字而已。

页面结构CSS样式的话,自己按需定义就好了。

主要是JS的实现,原生JS简单实现:

window.onload = function(){
  // 获取选中文字
  function selectText(){
    if(document.selection){//ie
      return document.selection.createRange().text;
    }
    else{//标准
      return window.getSelection().toString();
    }
  }
  // 获取元素
  var oP = document.getElementById('p1');
  var oDiv = document.getElementById('div1');
  // 添加事件
  oP.onmouseup = function(ev){
    var ev = ev || window.event;
    var left = ev.clientX;
    var top = ev.clientY;
    // 如果选取文字长度大于10,显示新浪小图标,定位到鼠标的位置
    if(selectText().length > 10){
      setTimeout(function(){
      oDiv.style.display = 'block';
      oDiv.style.left = left + 'px';
      oDiv.style.top = top + 'px';
      },100);
    }
    else{
      oDiv.style.display = 'none'; // 否则不显示图标
    }
  };
  // 阻止事件冒泡
  oP.onclick = function(ev){
    var ev = ev || window.event;
    ev.cancelBubble = true;
  };
  // 点击页面其它地方隐藏小图标
  document.onclick = function(){
    oDiv.style.display = 'none';
  };
  // 点击小图标跳转网页至微博分享页面
  oDiv.onclick = function(){
    window.location.href = 'https://service.weibo.com/share/share.php?url=https://www.baidu.com/&title=' + selectText();
  };
}

以上就实现了,选中文字分享至新浪微博啦,想试一下手感的狠戳这里吧。相信大家还有很多好的方法,我们,加油!

Over~拜

文章评论


  • 0 条评论来说两句吧…  (* 为必填项,邮箱不会公开)

  •  *
  •  *
  • 提交评论

最停留-个人博客

友情推荐

  • 微信公众号:扫描加关注
  • 最停留-微信公众号