冰冰的小屋

路漫漫其修远兮,吾将上下而求索

“文字选中分享到” 简单实现


通常我们在阅读新浪博客的时候,当选中文章中的一段文字,会出现下面这一现象:

新浪选中文字分享

新浪选中文字分享

选中文字后,当我们抬起鼠标会出现一个新浪的分享按钮,这有利于我们很方便的将有用的文字信息分享到微博。那么这种效果是如何实现的?

首先想的是,如何把用户选中的文字保存下来呢?

在 javascript 中,它为我们提供 document.selection.createRange().text 这样一个方法,它返回的是一个字符串,但是只适用 ie。在其他的浏览器,则是用的 window.getSelection().toString() 。

于是我们封装这个函数,以便兼容多个浏览器:

文字选中后,鼠标抬起分享按钮的出现?

我们在 html 中定义一个绝对定位的分享层:

接着,将鼠标的坐标点赋给分享层并显示这个层,在这里我们做了一个选中文字长度的条件限制,如果文字长度大于 10, 则分享层才显示。

最后,如何把选中的文字带到微博发布框?

文字分享发布

文字分享发布

当我们点击分享按钮时,网页会跳到分享发布框页面,这乍一看是个很复杂的问题,的确,有些东西不知道就算你想破脑袋也无从入手。在这里,新浪给我们提供了一个分享接口,将分享发布框页面的网址拆分如下:

红色部分是新浪分享发布页面的网址及相关参数,深蓝色部分是你的分享文字,绿色部分是你需要分享的网页地址(博文地址)。

于是就有:

以上就是分享文字效果的步骤讲解。

demo 的完整代码如下:

html:

javascript:

 

点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注