可实现行内和侧边2种方式。
var wmShare = (function(){
return {
//初始值
skin : 'slide_black',
url : encodeURIComponent(top.location.href),
title : encodeURIComponent(top.document.title),
pic : '',
//获取参数方法
getParameter : function(){
var scripts = document.getElementsByTagName('script'),
script = scripts[scripts.length - 1];
return {
share : script.getAttribute('share')
}
},
//载入样式方法
addStyle : function(skin){
var style = document.createElement('link');
style.setAttribute('type','text/css');
style.setAttribute('rel', 'stylesheet');
style.setAttribute('href','style/'+skin+'.css');
document.getElementsByTagName('head')[0].appendChild(style);
},
//逐渐展开与收缩方法
showShare : function(el, allW){
var currentW = el.offsetWidth;
function slideShow(){
if(currentW < allW){
currentW += 16;
el.style.width = currentW + 'px';
var setSlideShow = setTimeout(slideShow, 20);
}else{
el.style.width = allW + 'px';
clearTimeout(setSlideShow);
}
}
slideShow();
},
hideShare : function(el, btnW){
var currentW = el.offsetWidth;
function slideHide(){
if(currentW > btnW){
currentW -= 36;
el.style.width = currentW + 'px';
var setSlideHide = setTimeout(slideHide, 20);
}else{
el.style.width = btnW + 'px';
clearTimeout(setSlideHide);
}
}
slideHide();
},
//分享方法
qqZone : function(url,title,pic){
window.open('http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=' + url + '&title=' + title + '&pics=' + pic);
},
sinaT : function(url,title,pic){
window.open('http://v.t.sina.com.cn/share/share.php?url=' + url + '&title=' + title + '&pic=' + pic);
},
qqT : function(url,title,pic){
window.open('http://v.t.qq.com/share/share.php?url=' + url + '&title=' + title + '&pic=' + pic);
},
renren : function(url){
window.open('http://share.renren.com/share/buttonshare.do?link=' + url);
},
kaixin : function(url,title){
window.open('http://www.kaixin001.com/repaste/share.php?rtitle=' + title + '&rurl=' + url);
},
douban : function(url,title){
window.open("http://www.douban.com/recommend/?url=" + url + "&title=" + title);
},
baiduT : function(url){
window.open("http://tieba.baidu.com/i/app/open_share_api?link=" + url);
},
//加入收藏方法
addFav : function(){
var favUrl = top.location.href;
var favName = top.document.title;
try{window.external.AddFavorite(favUrl,favName);}
catch(e){
try{window.sidebar.addPanel(favName,favUrl,"");}
catch(e){alert("使用快捷键 Ctrl+D 或 Cmd+D 来收藏此页！");}
}
}
}
})();
//创建边栏side方法
function createSlide(skin){
wmShare.addStyle(skin);
var btnW = 24, allW = 120, allH = 218;
//创建内容
var shareBox = document.createElement('div');
shareBox.setAttribute('id','share_slide');
shareBox.innerHTML = '<div id=\"share_slide_btn\"></div>\
<div id=\"share_slide_cont\">\
<div class=\"share_slide_title\">分享到</div>\
<ul id=\"share_slide_ul\">\
<li id=\"slide_qqZone\"><a href=\"javascript:wmShare.qqZone(wmShare.url, wmShare.title, wmShare.pic)\">QQ空间</a></li>\
<li id=\"slide_sinaT\"><a href=\"javascript:wmShare.sinaT(wmShare.url, wmShare.title, wmShare.pic)\">新浪微博</a></li>\
<li id=\"slide_qqT\"><a href=\"javascript:wmShare.qqT(wmShare.url, wmShare.title, wmShare.pic)\">腾讯微博</a></li>\
<li id=\"slide_renren\"><a href=\"javascript:wmShare.renren(wmShare.url)\">人人网</a></li>\
<li id=\"slide_kaixin\"><a href=\"javascript:wmShare.kaixin(wmShare.url, wmShare.title)\">开心网</a></li>\
<li id=\"slide_douban\"><a href=\"javascript:wmShare.douban(wmShare.url, wmShare.title)\">豆瓣网</a></li>\
<li id=\"slide_baiduT\"><a href=\"javascript:wmShare.baiduT(wmShare.url)\">百度贴吧</a></li>\
</ul>\
</div>';
shareBox.style.width = btnW + 'px'
document.getElementsByTagName('body')[0].appendChild(shareBox);
//鼠标操作
shareBox.onmouseover = function(){
wmShare.showShare(shareBox, allW);
}
function getEvent(event){
return event ? event : window.event;
}
document.onmousemove = function(event){
event = getEvent(event);
var eX = event.clientX,
eY = event.clientY;
if((document.documentElement.clientWidth - allW) > eX || (document.documentElement.clientHeight - allH)/2 > eY ||
(document.documentElement.clientHeight + allH)/2 < eY){
wmShare.hideShare(shareBox, btnW)
}
}
}
//行内line方法-短
function createLineShort(){
wmShare.addStyle('line');
//创建页面
var lineBox = document.getElementById('share_line');
lineBox.innerHTML = '<ul class=\"share_line_ul clearfix\">\
<li class=\"share_line_title\">分享到：</li>\
<li><a class=\"share_line_qqZone\" href=\"javascript:wmShare.qqZone(wmShare.url, wmShare.title, wmShare.pic)\" title=\"分享到QQ空间\">QQ空间</a></li>\
<li><a class=\"share_line_sinaT\" href=\"javascript:wmShare.sinaT(wmShare.url, wmShare.title, wmShare.pic)\" title=\"分享到新浪微博\">新浪微博</a></li>\
<li><a class=\"share_line_qqT\" href=\"javascript:wmShare.qqT(wmShare.url, wmShare.title, wmShare.pic)\" title=\"分享到腾讯微博\">腾讯微博</a></li>\
<li><a class=\"share_line_renren\" href=\"javascript:wmShare.renren(wmShare.url)\" title=\"分享到人人网\">人人网</a></li>\
<li><a class=\"share_line_kaixin\" href=\"javascript:wmShare.kaixin(wmShare.url, wmShare.title)\" title=\"分享到开心网\">开心网</a></li>\
<li><a class=\"share_line_douban\" href=\"javascript:wmShare.douban(wmShare.url, wmShare.title)\" title=\"分享到豆瓣网\">豆瓣网</a></li>\
<li><a class=\"share_line_baiduT\" href=\"javascript:wmShare.baiduT(wmShare.url)\" title=\"分享到百度贴吧\">百度贴吧</a></li>\
</ul>';
}
//行内长
function createLineLong(){
wmShare.addStyle('line');
var lineBox = document.getElementById('share_line');
lineBox.innerHTML = '<ul class=\"share_line_ul floatL clearfix\">\
<li class=\"share_line_title\">分享到：</li>\
<li><a class=\"share_line_qqZone\" href=\"javascript:wmShare.qqZone(wmShare.url, wmShare.title, wmShare.pic)\" title=\"分享到QQ空间\">QQ空间</a></li>\
<li><a class=\"share_line_sinaT\" href=\"javascript:wmShare.sinaT(wmShare.url, wmShare.title, wmShare.pic)\" title=\"分享到新浪微博\">新浪微博</a></li>\
<li><a class=\"share_line_qqT\" href=\"javascript:wmShare.qqT(wmShare.url, wmShare.title, wmShare.pic)\" title=\"分享到腾讯微博\">腾讯微博</a></li>\
<li><a class=\"share_line_renren\" href=\"javascript:wmShare.renren(wmShare.url)\" title=\"分享到人人网\">人人网</a></li>\
<li><a class=\"share_line_kaixin\" href=\"javascript:wmShare.kaixin(wmShare.url, wmShare.title)\" title=\"分享到开心网\">开心网</a></li>\
<li><a class=\"share_line_douban\" href=\"javascript:wmShare.douban(wmShare.url, wmShare.title)\" title=\"分享到豆瓣网\">豆瓣网</a></li>\
<li><a class=\"share_line_baiduT\" href=\"javascript:wmShare.baiduT(wmShare.url)\" title=\"分享到百度贴吧\">百度贴吧</a></li>\
</ul>\
<div id=\"fav_box\">|<span onclick=\"wmShare.addFav()\">添加到收藏夹</span>|</div>\
<p id=\"jieshi\">本活动最终解释权归完美世界（北京）网络技术有限公司所有</p>';
}
if(wmShare.getParameter().share == null){
createSlide(wmShare.skin);
}else{
var shareObject = eval('('+wmShare.getParameter().share+')');
wmShare.skin = shareObject.skin || wmShare.skin;
wmShare.url = shareObject.url || wmShare.url;
wmShare.title = shareObject.title || wmShare.title;
wmShare.pic = shareObject.pic || wmShare.pic;
if(shareObject.type == undefined || shareObject.type == 'slide'){
createSlide(wmShare.skin);
}
if(shareObject.type == 'lineShort'){
createLineShort();
}
if(shareObject.type == 'lineLong'){
createLineLong();
}
}
1、边栏模式slide
调用方法：<script type="text/javascript" src="http://www.wanmei.com/public/js/wmshare.js"></script>
2、行内模式（长）用于专题底部
<script type="text/javascript" src="http://www.wanmei.com/public/js/wmshare.js" share="{type:'lineLong'}"></script>
3、行内模式（短）用于专题顶部或中部，新闻内页等
<script type="text/javascript" src="http://www.wanmei.com/public/js/wmshare.js" share="{type:'lineShort'}"></script>
【参数详细说明】
share参数对象的属性：
外观属性
type:'slide || lineLong || lineShort'（选择边栏和行内分享）
skin:'slide_black || slide_green'（改变边栏样式，可加多个样式）
分享转贴属性
url：分享哪个网址，默认为top.location.href，一般时候用不到，基本都用默认值。<script type="text/javascript" src="http://www.wanmei.com/public/js/wmshare.js" share="{url:'http://www.wanmei.com'}"></script>
title：分享标题，默认为top.document.title（人人和百度贴吧不支持此参数，取的是url的title）。<script type="text/javascript" src="http://www.wanmei.com/public/js/wmshare.js" share="{title:'我是标题'}"></script>
pic：分享的缩略图（腾讯和新浪支持，由于新浪只支持一个传图片，故此参数传一个图片地址）<script type="text/javascript" src="http://www.wanmei.com/public/js/wmshare.js" share="{'pic:'http://www.wanmei.com/public/images/logo/wulin2/wulin23.png'}"></script>
边栏模式slide
如果选择了边栏模式，就可以使用另一个样式参数skin：
<script type="text/javascript" src="http://www.wanmei.com/public/js/wmshare.js" share="{type:'slide',skin:'slide_green'}"></script>，其中type:'slide'可以省略。通过样式表可以改变“分享”按钮的背景图和分享框颜色、背景图等样式，目前就写了2个样式slide_black（默认）和slide_green。