一、功能概述：
正是微博如火如荼的时节，其中各个微博的分享功能是网站推广产品的好东东啊，此时如何方便快捷的使用微博的分享功能就显得比较重要了。
每个网站上面几乎都能见到分享到微博的功能。
Q-share是腾讯微博的一款分享插件，通过JS实现，可以去腾讯的Q_Share官方网站获取代码添加到你的网站。
先介绍一下Q-Share：
使用Q-Share分享按钮后，用户在访问你网站时，只要选中功能区域中的任何一段文本，并点击“分享到微博”，就可以转播选中内容，分享到腾讯微 博。如果你的 网页中含有图片，程序会自动抓取功能区域中的所有图片供用户选择，默认使用第一张图片。安装此应用到你的网站中，为你的网站带来更多的粉丝和访问流量。
Q-Share腾讯官方代码获取：http://open.t.qq.com/apps/qshare/explain.php
再来说说我这个扩展版的JS代码，它是对于Q-Share(腾讯微博选中文字分享按钮)的扩展，对腾讯官方的js代码进行了扩展，加上了新浪微博分享的实现。
我这里对Q_Share按钮的代码进行了修改，使其支持腾讯微博以及新浪微博，本想连搜狐微博，网易微博也扩展进来，不过4个按钮会显得很长，所以暂时只扩展了新浪微博。
二、 效果与demo
扩展后的效果：
选中一段文字：
鼠标移动到图片上：
demo效果预览：http://www.devexplore.com
效果预览可以移步至本人的博客任意页面选中一段文字，选中文字大于5个字即可出现分享至微博按钮，Q-Share默认是10个字，我修改为了5个字。
三、JS代码和使用方法：
<script> /*自定义变量*/ var bg_img='http://www.admin5.com/upimg/allimg/120413/-1-12041313524U10.png';//分享按钮背景图标文件地址 //地址数组，这些地址抓图为网站logo，注意主页后面的'/'不要漏了 var excludePages=new Array('http://www.devexplore.com/','http://www.devexplore.com/contact'); var areas;//抓图的区域，是一个DOM数组 for(var i=0;i<excludePages.length;i++){ if(window.location==excludePages[i]){//主页抓图为网站logo areas=new Array(document.body||document.documentElement); break; } } //文章页面抓图避免logo，抓取文章内容的图片 if(!areas) areas=new Array(document.getElementById('content'));</p> <p>var _share_tencent_weibo = function() { var share_btn = function(_arr) { if (_arr[0]) { return _arr[0]; } else { var o = document.createElement("a"), _ostyle = "width:24px;height:24px;margin:0 1px;background:url("+bg_img+") no-repeat left -24px;display:inline-block;"; o.setAttribute("style", _ostyle); o.style.cssText = _ostyle; o.setAttribute("href", "javascript:;"); o.setAttribute("id", 'weibo-share-t'); var os = document.createElement("a"), _ostyle = "width:24px;height:24px;margin:0 1px;background:url("+bg_img+") no-repeat left top;display:inline-block;"; os.setAttribute("style", _ostyle); os.style.cssText = _ostyle; os.setAttribute("href", "javascript:;"); os.setAttribute("id", 'weibo-share-s'); var di=document.createElement('div'); di.setAttribute("style", 'height:24px;position:absolute;display:none;z-index:9999999;'); di.style.cssText = 'height:24px;position:absolute;display:none;z-index:9999999;'; di.appendChild(o); di.appendChild(os); document.body.appendChild(di); //alert(di.childNodes[0].tagName); return di; } } (arguments); var share_area = function(_arr) { if (_arr[1]) { if ((typeof _arr[1] == "object" && _arr[1].length) || (_arr[1].constructor == Array)) { return _arr[1]; } else { return [_arr[1]]; } } else { return areas;//[document.body]; } } (arguments); var current_area = share_area[0]; var _site = ""; //你的网站地址 var _appkey = "801103182"; //你从腾讯微博开放平台获得的appkey var _web = { "name": document.title || "", "href": location.href, "hash": location.hash, "target": "toolbar=0,status=0,resizable=1,left="+((screen.width-613)>>1)+",top="+((screen.height-460)>>1) }; var _pic = function(area) { var _imgarr = area.getElementsByTagName("img"); var _srcarr = []; for (var i = 0; i < _imgarr.length; i++) { _srcarr.push(_imgarr[i].src); } return _srcarr;//.join("|"); }; //图片地址 var _u = "http://v.t.qq.com/share/share.php?url=$url$&appkey=" + _appkey + "&site=" + _site + "&title=$title$&pic=$pic$"; var _select = function() { return (document.selection ? document.selection.createRange().text: document.getSelection()).toString().replace(/[\s\n]+/g, " "); }; var show = function(e, x, y) { with(share_btn.style) { display = "inline-block"; left = x + "px"; top = y + "px"; position = "absolute"; zIndex = "999999"; } } var hide = function(e) { e.style.display = "none"; }; if ( !! window.find) { HTMLElement.prototype.contains = function(B) { return this.compareDocumentPosition(B) - 19 > 0 } } String.prototype.elength = function() { return this.replace(/[^\u0000-\u00ff]/g, "aa").length; } String.prototype.tripurl = function() { return this.replace(new RegExp("((news|telnet|nttp|file|http|ftp|https)://){1}(([-A-Za-z0-9]+(\\.[-A-Za-z0-9]+)*(\\.[-A-Za-z]{2,5}))|([0-9]{1,3}(\\.[0-9]{1,3}){3}))(:[0-9]*)?(/[-A-Za-z0-9_\\$\\.\\+\\!\\*\\(\\),;:@&=\\?/~\\#\\%]*)*", "gi"), new Array(12).join("aa")); } document.onmouseup = function(e) { e = e || window.event; var o = e.target || e.srcElement; for (var i = 0; i < share_area.length; i++) { if (share_area[i].contains(o) || share_area[i] == o) { var _e = { "x": e.clientX, "y": e.clientY }; var _o = { "w": share_btn.clientWidth, "h": share_btn.clientHeight }; var _d = window.pageYOffset || (document.documentElement || document.body).scrollTop || 0; var x = (_e.x - _o.w < 0) ? _e.x + _o.w: _e.x - _o.w, y = (_e.y - _o.h < 0) ? _e.y + _d - _o.h: _e.y + _d; if (_select() && _select().length >= 5) { show(share_btn, x - 5, y); current_area = share_area[i]; break; } else { hide(share_btn); }</p> <p> } else { hide(share_btn); } } }; document.onmouseover = function(e) { var curtarget = (e && e.target) || (window.event && window.event.srcElement); if (curtarget.tagName.toLowerCase() == "img") { var erect = curtarget.getBoundingClientRect(); if (curtarget.clientWidth >= 150 && curtarget.clientHeight >= 50) { show(share_btn, erect.right - 140, erect.bottom + document.body.scrollTop + document.documentElement.scrollTop - 40); share_btn.setAttribute("shareimg", curtarget.src); //alert(share_btn.getAttribute("shareimg")); } } else if (curtarget != share_btn&&curtarget.parentNode!=share_btn) { share_btn.removeAttribute("shareimg"); hide(share_btn); } } share_btn.onclick = function(e) { e = e || window.event; var o = e.target || e.srcElement; if(o.id&&o.id=='weibo-share-s')//新浪微博分享接口 _u = "http://v.t.sina.com.cn/share/share.php?url=$url$&title=$title$&pic=$pic$"; else if(o.id&&o.id=='weibo-share-t')//腾讯微博分享接口 _u = "http://v.t.qq.com/share/share.php?url=$url$&appkey=" + _appkey + "&site=" + _site + "&title=$title$&pic=$pic$"; var shareimg = o.parentNode.getAttribute("shareimg"); if (shareimg != null) { window.open(_u.replace("$title$", encodeURIComponent(_web.name)).replace("$url$", encodeURIComponent(_web.href)).replace("$pic$", encodeURIComponent(shareimg)).substr(0,2048), 'null', _web.target); return; } var _str = _select(); var _strmaxlen = 257 - _web.name.tripurl().elength(); var _resultstr = _str.slice(0,(_strmaxlen-4)>>1); if (_str.elength() > _strmaxlen) { _strmaxlen = _strmaxlen - 3; for (var i = _strmaxlen >> 1; i <= _strmaxlen; i++) { if ((_str.slice(0, i)).tripurl().elength() >= _strmaxlen) { break; } else { _resultstr = _str.slice(0, i); } } _resultstr += "..."; } else { _resultstr = _str; } if (_str) { if(o.id&&o.id=='weibo-share-t'){//腾讯微博分享接口 var url = _u.replace("$title$", encodeURIComponent(_resultstr + " " + _web.name)).replace("$pic$", _pic(current_area).join('|')); } else//新浪微博分享接口 var url = _u.replace("$title$", encodeURIComponent(_resultstr + " " + _web.name)).replace("$pic$", _pic(current_area)[0]); url = url.replace("$url$", encodeURIComponent(_web.href.replace(_web.hash, "") + "#" + (current_area["name"] || current_area["id"] || ""))).substr(0, 2048); window.open(url, 'null', _web.target); } }; }; _share_tencent_weibo(); //_share_tencent_weibo(share_btn,share_area);如须自定义功能，share_btn,share_area自己设置,其中share_area可以是一个DOM数组 </script>
使用方法：将上面的代码复制粘贴至网页body标签之间，一般放在页面最下方靠近html标签的地方。
用到的图标文件(鼠标右键另存为),可下载放到自己的服务器里，然后修改自定义变量bg_img为新的图片地址：