jQuery弹出社交分享按钮js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery弹出社交分享按钮js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<html>
<head>
    <title>jQuery�����罻�����ť</title>
    <link rel="stylesheet" href="css/general.css" type="text/css" />
    <link rel="stylesheet" href="css/MySocialShare.css" type="text/css" />
    <!--[if IE 7]>
        <link rel="stylesheet" type="text/css" href="css/MySocialShare-ie7.css">
    <![endif]-->
    <script src="js/jquery.js" type="text/javascript"></script>
    <script src="js/MySocialShare.js" type="text/javascript"></script>
    <script src="js/general.js" type="text/javascript"></script>
</head>
<body>
    <div id="page_container">
        <a class="wecreate"><img src="images/we_create_logo.png" alt="WeCreate" width="97" height="89" /></a>
        <div class="plugin_container">
            <div class="mysocialshare right" data-orientation="line" data-picture="images/share_core_square.jpg" data-facebook-handle="robman" data-twitter-handle="wecre8" data-email-handle="codecanyon@wecreate.co.uk" data-pinterest-handle="sireid" data-instagram-handle="mikekus" data-networks="facebook,twitter,instagram,pinterest,email"></div>
            <div class="mysocialshare left" data-image-type="zzsc" data-picture="images/share_core_square.jpg" data-facebook-handle="robman" data-twitter-handle="wecre8" data-email-handle="codecanyon@wecreate.co.uk" data-pinterest-handle="sireid" data-instagram-handle="mikekus" data-networks="facebook,twitter,instagram,pinterest,email" data-arc-length="360"></div>
        </div>
    </div>
</body>
</html>

JS代码(MySocialShare.js):

if(typeof console=="undefined"){
	var console={
	log:function(){
}
}
}
MySocialShares=[];
	$(document).ready(function(){
	$("div.mysocialshare").each(function(){
	MySocialShares.push(new MySocialShare(this))}
)}
);
	MySocialShare=function(e){
	var t=this;
	var n=e;
	var r=[];
	var i=document.URL;
	var s="bubble";
	var o="arc";
	var u=0;
	var a=180;
	var f=80;
	var l=70;
	var c="none";
	var h="picture";
	if($(n).attr("data-url"))i=$(n).attr("data-url");
	if($(n).attr("data-networks"))r=$(n).attr("data-networks").toLowerCase().split(",");
	if($(n).attr("data-orientation"))o=$(n).attr("data-orientation").toLowerCase();
	if($(n).attr("data-arc-start"))u=parseInt($(n).attr("data-arc-start"));
	if($(n).attr("data-arc-length"))a=parseInt($(n).attr("data-arc-length"));
	if($(n).attr("data-radius"))f=parseInt($(n).attr("data-radius"));
	if($(n).attr("data-gap"))l=parseInt($(n).attr("data-gap"));
	if($(n).attr("data-picture"))c=$(n).attr("data-picture");
	if($(n).attr("data-image-type"))h=$(n).attr("data-image-type").toLowerCase();
	if(c=="none"){
	console.log("MySocialShare | ERROR:data-picture not provided");
	return}
var p=function(){
	if(!d[s]){
	console.log("MySocialShare | INFO:Invalid style supplied. Exiting.");
	return}
$(n).addClass(s);
	template=d[s];
	if(h=="facebook")c="https://graph.facebook.com/"+c+"/picture?type=large";
	$(n).html(template["holder"].replace(/\[IMAGE_URL\]/gi,c));
	var e=$(n).find(".msb_network_holder");
	for(var t=0;
	t<r.length;
	t++){
	var i=r[t];
	if(!m[i]){
	console.log('MySocialShare | WARNING:Unsupported Network "'+i+'" specified. Skipping.');
	continue}
var o=m[i];
	var u;
	if(o["profile_url"]&&$(n).attr("data-"+i+"-handle"))u=o["profile_url"].replace(/\[HANDLE\]/gi,$(n).attr("data-"+i+"-handle"));
	else continue;
	var a=template["network_button"].replace(/\[URL\]/gi,u).replace(/\[NAME\]/gi,o["name"]).replace(/\[NETWORK\]/gi,i);
	var f=$(a);
	e.append(f)}
if(v[s])v[s](template)}
;
	var d={
	bubble:{
	holder:'<a class="msb_main" title="My Networks" alt="My Networks">'+'<img src="[IMAGE_URL]" title="My Networks" alt="My Networks"/>'+"</a>"+'<div class="msb_network_holder"></div>',network_button:'<a class="msb_network_button [NETWORK]" target="_blank" href="[URL]" data-network="[NETWORK]">[NAME]</a>',orientations:{
	arc:function(){
	if($(this).hasClass("disabled"))return;
	var e=250;
	var t=250;
	var r=$(n).find(".msb_network_button").length;
	var i=e+(r-1)*t;
	var s=0;
	var o=$(this).outerWidth();
	var l=$(this).outerHeight();
	var c=$(n).find(".msb_network_button:eq(0)").outerWidth();
	var h=$(n).find(".msb_network_button:eq(0)").outerHeight();
	var p=(o-c)/2;
	var d=(l-h)/2;
	if(!$(this).hasClass("active")){
	$(this).addClass("disabled").delay(i).queue(function(e){
	$(this).removeClass("disabled").addClass("active");
	e()}
);
	var v=a/r;
	var m=u+v/2;
	$(n).find(".msb_network_button").each(function(){
	var n=m/180*Math.PI;
	var r=p+f*Math.cos(n);
	var i=d+f*Math.sin(n);
	$(this).css({
	display:"block",left:p+"px",top:d+"px"}
).stop().delay(t*s).animate({
	left:r+"px",top:i+"px"}
,e);
	m+=v;
	s++}
)}
else{
	s=r-1;
	$(this).addClass("disabled").delay(i).queue(function(e){
	$(this).removeClass("disabled").removeClass("active");
	e()}
);
	$(n).find(".msb_network_button").each(function(){
	$(this).stop().delay(t*s).animate({
	left:p,top:d}
,e);
	s--}
)}
}
,line:function(){
	if($(this).hasClass("disabled"))return;
	var e=500;
	var t=250;
	var r=$(n).find(".msb_network_button").length;
	var i=l;
	var s=e+(r-1)*t;
	var o=1;
	var a=$(this).outerWidth();
	var f=$(this).outerHeight();
	var c=$(n).find(".msb_network_button:eq(0)").outerWidth();
	var h=$(n).find(".msb_network_button:eq(0)").outerHeight();
	var p=(a-c)/2;
	var d=(f-h)/2;
	var v=u/180*Math.PI;
	if(!$(this).hasClass("active")){
	$(this).addClass("disabled").delay(s).queue(function(e){
	$(this).removeClass("disabled").addClass("active");
	e()}
);
	$(n).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()}
);
	$(n).find(".msb_network_button").each(function(){
	$(this).stop().delay(t*o).animate({
	left:p,top:d}
,e);
	o--}
)}
}
}
}
}
;
	var v={
	bubble:function(e){
	var t=e["orientations"]["arc"];
	if(e["orientations"][o])t=e["orientations"][o];
	$(n).find(".msb_main").click(t)}
}
;
	var m={
	facebook:{
	profile_url:"http://www.facebook.com/[HANDLE]",name:"Facebook"}
,google:{
	profile_url:"https://plus.google.com/[HANDLE]",name:"Google Plus",window:"width=600,height=330,scrollbars=no"}
,twitter:{
	profile_url:"https://twitter.com/[HANDLE]",name:"Twitter",window:"width=560,height=257,scrollbars=no"}
,pinterest:{
	profile_url:"http://pinterest.com/[HANDLE]",name:"Pinterest"}
,linkedin:{
	profile_url:"http://www.linkedin.com/profile/view?id=[HANDLE]",name:"LinkedIn",window:"width=520,height=570,scrollbars=no"}
,dribbble:{
	profile_url:"http://dribbble.com/[HANDLE]",name:"Dribbble"}
,email:{
	profile_url:"mailto:[HANDLE]",name:"Email"}
,instagram:{
	profile_url:"http://instagram.com/[HANDLE]",name:"Instagram"}
,vimeo:{
	profile_url:"http://vimeo.com/[HANDLE]",name:"Vimeo"}
,youtube:{
	profile_url:"http://www.youtube.com/user/[HANDLE]",name:"YouTube"}
}
;
	t.url=i;
	t.me=e;
	t.networks=r;
	p()}

CSS代码(general.css):

html,body{width:100%;margin:0;padding:0;font-family:"HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;background:url(../images/bgPattern.jpg) repeat;}
.clear{clear:both;}
.header{display:block;width:100%;padding:20px;border-bottom:1px solid #333;}
.header h1{font-size:32px;text-transform:uppercase;text-align:center;}
#page_container{width:940px;display:block;margin:0 auto;}
.wecreate{background-image:url(../images/we_create_logo.png);width:97px;height:89px;display:block;margin:30px auto 25px;}
.wecreate img{width:97px;height:89px;display:block;}
.plugin_container{width:780px;height:285px;margin:0 auto;position:relative;box-shadow:0px 0px 5px #DDD;border-top-left-radius:3px;border-top-right-radius:3px;background:url(../images/heroBG.jpg) #FFF;}
img{display:block;float:left;}
.article_header{display:block;float:left;}
h2{color:#444;}
.meta{font-size:12px;text-transform:uppercase;font-weight:bold;color:#666;}
.title_bar{width:940px;height:120px;display:block;background-image:url(../images/title_banner.png);margin-top:-15px;position:relative;z-index:1;}
.title_bar h1{margin:0;text-align:center;line-height:90px;padding:15px 0;}
.paragraph_container{width:380px;background-color:#FFF;margin:20px 0;display:block;float:left;padding:40px;border-radius:3px;box-shadow:0px 0px 5px #DDD;}
.paragraph_container.full{clear:both;width:860px;margin-top:0;float:none;}
.paragraph_container h3{color:#414042;font-family:Helvetica,Arial,"Lucida Grande",sans-serif;font-weight:bold;font-size:24px;margin:0 0 20px;text-align:center;}
.paragraph_container p{font-family:Georgia,Times,"Times New Roman",serif;font-size:16px;line-height:30px;margin:0;color:#414042;text-align:center;}
.paragraph_container ul{font-family:Georgia,Times,"Times New Roman",serif;font-size:16px;line-height:30px;color:#414042;}
.paragraph_container.left{margin-left:0;margin-right:20px;}
.mysocialshare.bubble{position:absolute !important;top:50%;left:50%;margin-top:-46px;margin-left:-32px;}
.mysocialshare.bubble.left{left:200px;margin-left:0;}
.mysocialshare.bubble.right{left:auto;right:200px;margin-left:0;}

附件:下载该文件资源,减少时间成本(增值服务)