通常我们在阅读新浪博客的时候,当选中文章中的一段文字,会出现下面这一现象:
新浪选中文字分享
选中文字后,当我们抬起鼠标会出现一个新浪的分享按钮,这有利于我们很方便的将有用的文字信息分享到微博。那么这种效果是如何实现的?
首先想的是,如何把用户选中的文字保存下来呢?
在 javascript 中,它为我们提供 document.selection.createRange().text
这样一个方法,它返回的是一个字符串,但是只适用 ie。在其他的浏览器,则是用的 window.getSelection().toString()
。
于是我们封装这个函数,以便兼容多个浏览器:
function textSelect(){ if(document.selection){ // ie return document.selection.createRange().text; } else{ // 标准 return window.getSelection().toString(); } }
文字选中后,鼠标抬起分享按钮的出现?
我们在 html 中定义一个绝对定位的分享层:
<div id=”share” style=”position:absolute;display:none;”><img src=”../images/share.gif”></div>
接着,将鼠标的坐标点赋给分享层并显示这个层,在这里我们做了一个选中文字长度的条件限制,如果文字长度大于 10, 则分享层才显示。
oP.onmouseup = function(ev) { var oEvent = ev || event, left = oEvent.clientX, top = oEvent.clientY; if (textSelect().length > 10) { setTimeout(function(ev) { oShare.style.display = ”block”; oShare.style.left = left + ”px”; oShare.style.top = top + ”px”; }, 100) //100ms 后出现,防止在 IE 下触发太快,影响选中文字的范围 } else { oShare.style.display = ”none”; } }
最后,如何把选中的文字带到微博发布框?
文字分享发布
当我们点击分享按钮时,网页会跳到分享发布框页面,这乍一看是个很复杂的问题,的确,有些东西不知道就算你想破脑袋也无从入手。在这里,新浪给我们提供了一个分享接口,将分享发布框页面的网址拆分如下:
http://v.t.sina.com.cn/share/share.php?searchPic=false&title=‘+textSelect()+‘&url=window.location.href
红色部分是新浪分享发布页面的网址及相关参数,深蓝色部分是你的分享文字,绿色部分是你需要分享的网页地址(博文地址)。
于是就有:
oShare.onclick=function(){ window.open(‘http://v.t.sina.com.cn/share/share.php? searchPic=false&title=’+textSelect()+’&url=window.location.href’); }
以上就是分享文字效果的步骤讲解。
demo 的完整代码如下:
html:
<p id=”p1″> 本书从最早期 Netscape 浏览器中的 JavaScript 开始讲起,直到当前它对 XML 和 Web 服务的具体支持,内容主要涉及 JavaScript 的语言特点、JavaScript 与浏览器的交互、更高级的 JavaScript 技巧,以及与在 Web 应用程序中部署 JavaScript 解决方案有关的问题,如错误处理、调试、安全性、优化 / 混淆化、XML 和 Web 服务,最后介绍应用所有这些知识来创建动态用户界面。” 本书作者显然非常了解读者的需要,切中要害,信息密集。单单对客户端通信、Web 服务、正则表达式、DOM、XML 处理等现代 JavaScript 技术的详细讲解,就已经物超所值。”</p> <div id=”share” style=”position:absolute;display:none;”><img src=”../images/share.gif”></div>
javascript:
(function() { function textSelect() { // 核心函数 if (document.selection) { // ie return document.selection.createRange().text; } else { // 标准 return window.getSelection().toString(); } } var d = document, oP = d.getElementById(“p1″), oShare = d.getElementById(“share”); oP.onmouseup = function(ev) { var oEvent = ev || event, left = oEvent.clientX, top = oEvent.clientY; if (textSelect().length > 10) { setTimeout(function(ev) { oShare.style.display = ”block”; oShare.style.left = left + ”px”; oShare.style.top = top + ”px”; }, 100) //100ms 后出现,防止在 IE 下触发太快,影响选中文字的范围 } else { oShare.style.display = ”none”; } } oShare.onclick = function(ev) { // 阻止冒泡函数 var oEvent = ev || event; oEvent.cancelBubble = true; window.open('http://v.t.sina.com.cn/share/share.php?searchPic=false&title=' + textSelect() + '&url=http://baike.baidu.com/view/605930.htm'); // 这里的百度百科的网址,如果在服务器网页可以使用 window.location.href } document.onclick = function() { oShare.style.display = ”none”; } })();