分享插件 - 好文

内容来自jQuery插件库

只需要引入share.css和share.js文件即可。

页面内容使用非常简单。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=
"http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content=
"text/html; charset=utf-8" /> <title>jQuery弹出社交分享按钮</title> <link rel=
"stylesheet" href="css/share.css" type="text/css" /> <script src=
"js/jquery1.8.2.min.js" type="text/javascript"></script> <script src=
"js/share.js" type="text/javascript"></script> </head> <body> <h1>分享组件</h1> <div
id="socialShare"></div> <h1>单独使用</h1> <a id="shareQQ">分享到QQ空间</a> <script> $(
function() { $("#socialShare").socialShare({ content: '', url:'', titile:'' });
}); $("#shareQQ").on("click",function(){ $(this).socialShare("tQQ"); }) </script
> </body> </html>
share.css文件
@charset "utf-8"; .socialShare { display: block; width: 54px; height: 54px;
position: relative; z-index: 1; } .socialShare .msb_main { display: block; width
: 46px; height: 46px; position: absolute; top: 0; left: 0; z-index: 2; cursor:
pointer; text-indent: -9999px; border: 4px solid #FFF; box-shadow: 0 0 5px #DDD;
border-radius: 36px; } .socialShare .msb_main:hover { box-shadow: 0 0 5px #BBB;
} .socialShare .msb_main img { width: 46px; height: 46px; cursor: pointer;
border-radius: 23px; border: none; float: left } .socialShare
.msb_network_button { width: 31px; height: 31px; position: absolute; top: 9px;
left: 92px; z-index: 1; cursor: pointer; text-indent: -9999px; display: none;
background: no-repeat; border: 6px solid #f5f5f5; border-radius: 50%; }
.socialShare .msb_network_button.sina { background: url(../images/social.png)
no-repeat -130px -87px; } .socialShare .msb_network_button.tQQ { background:
url(../images/social.png) no-repeat -185px -20px; } .socialShare
.msb_network_button.qZone { background: url(../images/social.png) no-repeat -73
px -20px; } .socialShare .msb_network_button.douban { background:
url(../images/social.png) no-repeat -130px -151px; } .socialShare
.msb_network_button.weixin { background: url(../images/social.png) no-repeat -73
px -87px; } .socialShare .msb_network_button:hover{transition: -moz-transform 2
s ease-out0s;border: 6px solid #eee;}
share.js文件如下：
/* * @Author:L.Tap * @Description: 社会化分享 */ ; (function($, window, document,
undefined) { //插件初始化 function init(target, options) { var settings =
$.extend({}, $.fn.socialShare.defaults, options);//初始化各个组件 var $msb_main = "<a
class='msb_main'><img title='分享' src='images/share_core_square.jpg'></a>"; var
$social_group ="<div class='social_group'>" + "<a target='_blank'
class='msb_network_button weixin'>weixin</a>" + "<a target='_blank'
class='msb_network_button sina'>sina</a>" + "<a target='_blank'
class='msb_network_button tQQ'>tQQ</a>" + "<a target='_blank'
class='msb_network_button qZone'>qZone</a>" + "<a target='_blank'
class='msb_network_button douban'>douban</a>" + "</div>";
$(target).append($msb_main); $(target).append($social_group);
$(target).addClass("socialShare"); //添加腾讯微博分享事件 $(document).on("click",
".msb_network_button.tQQ",function(){ tQQ(this,settings); }); //添加QQ空间分享事件
$(document).on("click",".msb_network_button.qZone",function(){ qZone(this
,settings); });//添加新浪微博分享事件 $(document).on("click",".msb_network_button.sina",
function(){ sinaWeibo(this,settings); }); //添加豆瓣分享事件 $(document).on("click",
".msb_network_button.douban",function(){ doubanShare(this,settings); });
//添加微信分享事件 $(document).on("click",".msb_network_button.weixin",function(){
weixinShare(this,settings); }); $(document).on("click",".msb_main",function(){
if ($(this).hasClass("disabled")) return; var e = 500;//动画时间 var t = 250;//延迟时间
var r = $(this).parent().find(".msb_network_button").length; //分享组件的个数 var i =
60; var s = e + (r - 1) * t; var o = 1; var a = $(this).outerWidth(); var f = $(
this).outerHeight(); var c = $(this).parent().find(".msb_network_button:eq(0)"
).outerWidth();var h = $(this).parent().find(".msb_network_button:eq(0)"
).outerHeight();var p = (a - c) / 2; //起始位置 var d = (f - h) / 2; //起始位置 var v =
0 / 180 * Math.PI; if (!$(this).hasClass("active")) { $(this).addClass(
"disabled").delay(s).queue(function(e) { $(this).removeClass("disabled"
).addClass("active"); e() }); $(this).parent().find(".msb_network_button").each(
function() { var n = p + (p + i * o) * Math.cos(v); //结束位置 var r = d + (d + i *
o) *Math.sin(v); //结束位置 $(this).css({ display: "block", left: p + "px", top: d +
"px" }).stop().delay(t * o).animate({ left: n + "px", top: r + "px" }, e); o++
}) }else { o = r; $(this).addClass("disabled").delay(s).queue(function(e) { $(
this).removeClass("disabled").removeClass("active"); e() }); $(this
).parent().find(".msb_network_button").each(function() { $(this).stop().delay(t
* o).animate({ left: p, top: d }, e); o-- }) } }); }function replaceAPI
(api,options) { api = api.replace('{url}', options.url); api = api.replace(
'{title}', options.title); api = api.replace('{content}', options.content); api
= api.replace('{pic}', options.pic); return api; } function tQQ(target,options){
var options = $.extend({}, $.fn.socialShare.defaults, options);
window.open(replaceAPI(tqq,options)); }function qZone(target,options){ var
options = $.extend({}, $.fn.socialShare.defaults, options);
window.open(replaceAPI(qzone,options)); }function sinaWeibo(target,options){ var
options = $.extend({}, $.fn.socialShare.defaults, options);
window.open(replaceAPI(sina,options)); }function doubanShare(target,options){
window.open(replaceAPI(douban,$.extend({},$.fn.socialShare.defaults,options)));
}function weixinShare(target,options){
window.open(replaceAPI(weixin,$.extend({},$.fn.socialShare.defaults,options)));
} $.fn.socialShare =function(options, param) { if(typeof options == 'string'){
var method = $.fn.socialShare.methods[options]; if(method) return method(this
,param); }else init(this,options); } //插件默认参数 $.fn.socialShare.defaults = {
url: window.location.href, title: document.title, content:'', pic: '' } //插件方法
$.fn.socialShare.methods = {//初始化方法 init:function(jq,options){ return jq.each(
function(){ init(this,options); }); }, tQQ:function(jq,options){ return jq.each(
function(){ tQQ(this,options); }) }, qZone:function(jq,options){ return jq.each(
function(){ qZone(this,options); }) }, sinaWeibo:function(jq,options) { return
jq.each(function(){ sinaWeibo(this,options); }); }, doubanShare:function
(jq,options) { return jq.each(function(){ doubanShare(this,options); }); },
weixinShare:function(jq,options){ return jq.each(function(){ weixinShare(this
,options); }); } }//分享地址 var qzone =
'http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url={url}&title={title}&pics={pic}&summary={content}'
;var sina =
'http://service.weibo.com/share/share.php?url={url}&title={title}&pic={pic}&searchPic=false'
;var tqq =
'http://share.v.t.qq.com/index.php?c=share&a=index&url={url}&title={title}&appkey=801cf76d3cfc44ada52ec13114e84a96'
;var douban =
'http://www.douban.com/share/service?href={url}&name={title}&text={content}&image={pic}'
;var weixin = 'http://qr.liantu.com/api.php?text={url}'; })(jQuery, window,
document);
并引入jquery.js即可。
页面效果如下：

点击不同的图标可以进行分享。
感谢jQuery插件库的团队成员。

专业墙纸贴纸厨房用具装饰出售，本人网店经营

博客对你有用记得访问下哦，增加下访问量，如有需要可以下单购买哦^_^。
https://item.taobao.com/item.htm?id=569617707364
<https://item.taobao.com/item.htm?id=569617707364>

热门工具换一换