支持https的js分享插件 (QQ空间,微信,新浪微博。。。)

现在网站支持https访问的越来越多,但由于目前各大社会化分享按钮(百度分享、JiaThis、bShare。。。)均不支持https,所以我只好求助度娘了。
功夫不负有心人,终于在CSDN博客上找到了一个可用的代码,分享原文如下:


 

 

功夫不负有心人,终于在CSDN博客上找到了一个可用的代码,分享原文如下:

废话不多说,传送门:http://download.csdn.net/detail/cometwo/9620943

支持https:https://www.aishandian.com/news-631.html

参考文章:http://www.cnblogs.com/hooray/archive/2011/09/10/2172946.html

 

这里写图片描述

动画效果

展开

  1. $(document).on("click"".msb_main", function() {  
  2.             if($(this).hasClass("disabled")) return;  
  3.             var e = 500; //动画时间  
  4.             var t = 250; //延迟时间  
  5.             var r = $(this).parent().find(".msb_network_button").length; //分享组件的个数  
  6.             var i = 60;  
  7.             var s = e + (r - 1) * t;  
  8.             var o = 1;  
  9.             var a = $(this).outerWidth();  
  10.             var f = $(this).outerHeight();  
  11.             var c = $(this).parent().find(".msb_network_button:eq(0)").outerWidth();  
  12.             var h = $(this).parent().find(".msb_network_button:eq(0)").outerHeight();  
  13.             var p = (a - c) / 2; //起始位置  
  14.             var d = (f - h) / 2; //起始位置  
  15.             var v = 0 / 180 * Math.PI;  
  16.             if(!$(this).hasClass("active")) {  
  17.                 $(this).addClass("disabled").delay(s).queue(function(e) {  
  18.                     $(this).removeClass("disabled").addClass("active");  
  19.                     e()  
  20.                 });  
  21.                 $(this).parent().find(".msb_network_button").each(function() {  
  22.                     var n = p + (p + i * o) * Math.cos(v)*0.8; //结束位置  
  23.                     var r = d + (d + i * o) * Math.sin(v); //结束位置  
  24.                     $(this).css({  
  25.                         display"block",  
  26.                         left: p + "px",  
  27.                         top: d + "px"  
  28.                     }).stop().delay(t * o).animate({  
  29.                         left: n + "px",  
  30.                         top: r + "px"  
  31.                     }, e);  
  32.                     o++  
  33.                 })  
  34.             } else {  
  35.                 o = r;  
  36.                 $(this).addClass("disabled").delay(s).queue(function(e) {  
  37.                     $(this).removeClass("disabled").removeClass("active");  
  38.                     e()  
  39.                 });  
  40.                 $(this).parent().find(".msb_network_button").each(function() {  
  41.                     $(this).stop().delay(t * o).animate({  
  42.                         left: p,  
  43.                         top: d  
  44.                     }, e);  
  45.                     o--  
  46.                 })  
  47.             }  
  48.         });  
  49.   
  50.     }  

微信分享效果

微信分享效果

QQ空间分享效果

QQ空间分享效果

HTML

展开

  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4.     <head>  
  5.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  6.         <title>jQuery弹出社交分享按钮</title>  
  7.         <link rel="stylesheet" href="css/share.css" type="text/css" />  
  8.         <script src="js/jquery-2.1.4.js" type="text/javascript"></script>  
  9.         <script src="js/share.js" type="text/javascript"></script>  
  10.     </head>  
  11.   
  12.     <body>  
  13.         <h1>分享插件</h1>  
  14.         <p>你是我的夏元小米苹果</p>  
  15.         <div id="socialShare"></div>  
  16.         <h2>分享QQ</h2>  
  17.         <a id="shareQQ">分享到QQ空间</a>  
  18.         <button id="main">我类个去</button>  
  19.         <script>  
  20.             $(function() {  
  21.                 $("#socialShare").socialShare({  
  22.                     content: $("p").text().trim(),  
  23.                     url: "http://blog.csdn.net/libin_1/article/details/51935944",  
  24.                     titile: $("h1").text().trim()  
  25.                 });  
  26.                 $(".msb_main").trigger('click');  
  27.             });  
  28.   
  29.             $("#shareQQ").on("click", function() {  
  30.                 $(this).socialShare("tQQ");  
  31.             })  
  32.   
  33.             $("#main").click(function() {  
  34.                 var openUrl = "https://www.baidu.com"; //弹出窗口的url  
  35.                 var iWidth = 630; //弹出窗口的宽度;  
  36.                 var iHeight = 580; //弹出窗口的高度;  
  37.                 var iTop = (window.screen.availHeight - 30 - iHeight) / 2; //获得窗口的垂直位置;  
  38.                 var iLeft = (window.screen.availWidth - 10 - iWidth) / 2; //获得窗口的水平位置;  
  39.                 window.open(openUrl, "", "height=" + iHeight + "width=" + iWidth + "top=" + iTop + "left=" + iLeft + "" + ",toolbar=nomenubar=noscrollbars=noresizable=nolocation=nostatus=no");  
  40.                 //window.open('page.html', 'newwindow', 'height=580width=650top=0left=0toolbar=nomenubar=noscrollbars=noresizable=nolocation=nostatus=no');  
  41.             });  
  42.             $(function() {  
  43.                 function autocenter() {  
  44.                     var bodyW = parseInt(document.documentElement.clientWidth);  
  45.                     var bodyH = parseInt(document.documentElement.clientHeight);  
  46.                     var elW = $("#weixin").width();  
  47.                     var elH = $("#weixin").height();  
  48.                     console.log((bodyW - elW) / 2);  
  49.                     $("#weixin").css("left", (bodyW - elW) / 2);  
  50.                     $("#weixin").css("top", (bodyH - elH) / 2);  
  51.                 }  
  52.                 window.onresize = function() {  
  53.                     autocenter();  
  54.                 };  
  55.             });  
  56.         </script>  
  57.   
  58.     </body>  
  59.   
  60. </html>  

JS

展开

  1. /* 
  2.  * @Description: 分享插件 
  3.  */  
  4. ;  
  5. (function($, window, document, undefined) {  
  6.     //插件初始化  
  7.     function init(target, options) {  
  8.         var settings = $.extend({}, $.fn.socialShare.defaults, options);  
  9.         //初始化各个组件  
  10.         console.log(settings);  
  11.         var $msb_main = "<a class='msb_main'><img title='分享' src='images/share_core_square.jpg'></a>";  
  12.         var $social_group = "<div class='social_group'>" +  
  13.             "<a class='msb_network_button weixin'>weixin</a>" +  
  14.             "<a class='msb_network_button sina'>sina</a>" +  
  15.             "<a class='msb_network_button tQQ'>tQQ</a>" +  
  16.             "<a class='msb_network_button qZone'>qZone</a>" +  
  17.             "<a class='msb_network_button douban'>douban</a>" +  
  18.             "</div>";  
  19.         $(target).append($msb_main);  
  20.         $(target).append($social_group);  
  21.         $(target).addClass("socialShare");  
  22.   
  23.         //添加腾讯微博分享事件  
  24.         $(document).on("click"".msb_network_button.tQQ"function() {  
  25.             tQQ(this, settings);  
  26.         });  
  27.         //添加QQ空间分享事件  
  28.         $(document).on("click"".msb_network_button.qZone"function() {  
  29.             qZone(this, settings);  
  30.         });  
  31.         //添加新浪微博分享事件  
  32.         $(document).on("click"".msb_network_button.sina"function() {  
  33.             sinaWeibo(this, settings);  
  34.         });  
  35.         //添加豆瓣分享事件  
  36.         $(document).on("click"".msb_network_button.douban"function() {  
  37.             doubanShare(this, settings);  
  38.         });  
  39.         //添加微信分享事件  
  40.         $(document).on("click"".msb_network_button.weixin"function() {  
  41.             weixinShare(this, settings);  
  42.         });  
  43.         $(document).on("click"".msb_main"function() {  
  44.             if($(this).hasClass("disabled")) return;  
  45.             var e = 500; //动画时间  
  46.             var t = 250; //延迟时间  
  47.             var r = $(this).parent().find(".msb_network_button").length; //分享组件的个数  
  48.             var i = 60;  
  49.             var s = e + (r - 1) * t;  
  50.             var o = 1;  
  51.             var a = $(this).outerWidth();  
  52.             var f = $(this).outerHeight();  
  53.             var c = $(this).parent().find(".msb_network_button:eq(0)").outerWidth();  
  54.             var h = $(this).parent().find(".msb_network_button:eq(0)").outerHeight();  
  55.             var p = (a - c) / 2; //起始位置  
  56.             var d = (f - h) / 2; //起始位置  
  57.             var v = 0 / 180 * Math.PI;  
  58.             if(!$(this).hasClass("active")) {  
  59.                 $(this).addClass("disabled").delay(s).queue(function(e) {  
  60.                     $(this).removeClass("disabled").addClass("active");  
  61.                     e()  
  62.                 });  
  63.                 $(this).parent().find(".msb_network_button").each(function() {  
  64.                     var n = p + (p + i * o) * Math.cos(v)*0.8; //结束位置  
  65.                     var r = d + (d + i * o) * Math.sin(v); //结束位置  
  66.                     $(this).css({  
  67.                         display: "block",  
  68.                         left: p + "px",  
  69.                         top: d + "px"  
  70.                     }).stop().delay(t * o).animate({  
  71.                         left: n + "px",  
  72.                         top: r + "px"  
  73.                     }, e);  
  74.                     o++  
  75.                 })  
  76.             } else {  
  77.                 o = r;  
  78.                 $(this).addClass("disabled").delay(s).queue(function(e) {  
  79.                     $(this).removeClass("disabled").removeClass("active");  
  80.                     e()  
  81.                 });  
  82.                 $(this).parent().find(".msb_network_button").each(function() {  
  83.                     $(this).stop().delay(t * o).animate({  
  84.                         left: p,  
  85.                         top: d  
  86.                     }, e);  
  87.                     o--  
  88.                 })  
  89.             }  
  90.         });  
  91.   
  92.     }  
  93.   
  94.     function replaceAPI(api, options) {  
  95.         api = api.replace('{url}', options.url);  
  96.         api = api.replace('{title}', options.title);  
  97.         api = api.replace('{content}', options.content);  
  98.         api = api.replace('{pic}', options.pic);  
  99.         return api;  
  100.     }  
  101.   
  102.     function OPenWindow(URL) {  
  103.         var openUrl = URL; //弹出窗口的url  
  104.         var iWidth = 630; //弹出窗口的宽度;  
  105.         var iHeight = 580; //弹出窗口的高度;  
  106.         var iTop = (window.screen.availHeight - 30 - iHeight) / 2; //获得窗口的垂直位置;  
  107.         var iLeft = (window.screen.availWidth - 10 - iWidth) / 2; //获得窗口的水平位置;  
  108.         window.open(openUrl, """height=" + iHeight + ", width=" + iWidth + ", top=" + iTop + ", left=" + iLeft + "" + ",toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no");  
  109.         //window.open('page.html', 'newwindow', 'height=580, width=650, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no');  
  110.     }  
  111.   
  112.     function tQQ(target, options) {  
  113.         var options = $.extend({}, $.fn.socialShare.defaults, options);  
  114.         OPenWindow(replaceAPI(tqq, options));  
  115.         //      window.open(replaceAPI(tqq, options));  
  116.     }  
  117.   
  118.     function qZone(target, options) {  
  119.         var options = $.extend({}, $.fn.socialShare.defaults, options);  
  120.         OPenWindow(replaceAPI(qzone, options));  
  121.         //  window.open(replaceAPI(qzone, options));  
  122.     }  
  123.   
  124.     function sinaWeibo(target, options) {  
  125.         var options = $.extend({}, $.fn.socialShare.defaults, options);  
  126.         OPenWindow(replaceAPI(sina, options));  
  127.         //  window.open(replaceAPI(sina, options));  
  128.     }  
  129.   
  130.     function doubanShare(target, options) {  
  131.         var options = $.extend({}, $.fn.socialShare.defaults, options);  
  132.         OPenWindow(replaceAPI(douban, options));  
  133.         //  window.open(replaceAPI(douban, ));  
  134.     }  
  135.   
  136.     function weixinShare(target, options) {  
  137.         var options = $.extend({}, $.fn.socialShare.defaults, options);  
  138.         console.log(options);  
  139.         showWX(replaceAPI(weixin, options));  
  140.   
  141.         //  window.open(replaceAPI(weixin, ));  
  142.     }  
  143.   
  144.     function autocenter() {  
  145.         var bodyW = parseInt(document.documentElement.clientWidth);  
  146.         var bodyH = parseInt(document.documentElement.clientHeight);  
  147.         var elW = $("#weixin").width();  
  148.         var elH = $("#weixin").height();  
  149.         console.log((bodyW - elW) / 2);  
  150.         $("#weixin").css("left", (bodyW - elW) / 2);  
  151.         $("#weixin").css("top", (bodyH - elH) / 2);  
  152.     }  
  153.   
  154.     function showWX(url) {  
  155.         var weixing = '<div id="weixin">' +  
  156.             '<div class="bd_weixin_popup_head">' +  
  157.             '<span>分享到微信朋友圈</span>' +  
  158.             '<a href="#" id="close" class="bd_weixin_popup_close">×</a>' +  
  159.             '</div>' +  
  160.             '<div class="erweima">' +  
  161.             '<img class="erweimas" src="" />' +  
  162.             '</div>' +  
  163.             '<p class="msgs">打开微信,点击右上角的  + ,<br/> 使用“扫一扫”即可将网页分享至朋友圈。</p>' +  
  164.             '</div>';  
  165.         $("body").append(weixing);  
  166.         $(".erweimas").attr('src', url);  
  167.         autocenter();  
  168.         $("#weixin").show();  
  169.     }  
  170.     $(document).on('click', "#close"function() {  
  171.         $("#weixin").hide();  
  172.     });  
  173.     $.fn.socialShare = function(options, param) {  
  174.         if(typeof options == 'string') {  
  175.             var method = $.fn.socialShare.methods[options];  
  176.             if(method)  
  177.                 return method(this, param);  
  178.         } else  
  179.             init(this, options);  
  180.     }  
  181.   
  182.     //插件默认参数  
  183.     $.fn.socialShare.defaults = {  
  184.         url: window.location.href,  
  185.         title: document.title,  
  186.         content: '',  
  187.         pic: ''  
  188.     }  
  189.   
  190.     //插件方法  
  191.     $.fn.socialShare.methods = {  
  192.         //初始化方法  
  193.         init: function(jq, options) {  
  194.             return jq.each(function() {  
  195.                 init(this, options);  
  196.             });  
  197.         },  
  198.         tQQ: function(jq, options) {  
  199.             return jq.each(function() {  
  200.                 tQQ(this, options);  
  201.             })  
  202.         },  
  203.         qZone: function(jq, options) {  
  204.             return jq.each(function() {  
  205.                 qZone(this, options);  
  206.             })  
  207.         },  
  208.         sinaWeibo: function(jq, options) {  
  209.             return jq.each(function() {  
  210.                 sinaWeibo(this, options);  
  211.             });  
  212.         },  
  213.         doubanShare: function(jq, options) {  
  214.             return jq.each(function() {  
  215.                 doubanShare(this, options);  
  216.             });  
  217.         },  
  218.         weixinShare: function(jq, options) {  
  219.             return jq.each(function() {  
  220.                 weixinShare(this, options);  
  221.             });  
  222.         }  
  223.     }  
  224.   
  225.     //分享地址  
  226.     var qzone = 'http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url={url}&title={title}&pics={pic}&summary={content}';  
  227.     var sina = 'http://service.weibo.com/share/share.php?url={url}&title={title}&pic={pic}&searchPic=false';  
  228.     var tqq = 'http://share.v.t.qq.com/index.php?c=share&a=index&url={url}&title={title}&appkey=801cf76d3cfc44ada52ec13114e84a96';  
  229.     var douban = 'http://www.douban.com/share/service?href={url}&name={title}&text={content}&image={pic}';  
  230.     var weixin = 'http://qr.liantu.com/api.php?text={url}'; //接受URL返回图片  
  231.   
  232. })(jQuery, window, document);  

CSS

展开

  1. @charset "utf-8";  
  2. .socialShare {  
  3.     displayblock;  
  4.     width54px;  
  5.     height54px;  
  6.     positionrelative;  
  7.     z-index: 1;  
  8. }  
  9.   
  10. .socialShare .msb_main {  
  11.     displayblock;  
  12.     width46px;  
  13.     height46px;  
  14.     positionabsolute;  
  15.     top: 0;  
  16.     left: 0;  
  17.     z-index: 2;  
  18.     cursorpointer;  
  19.     text-indent: -9999px;  
  20.     border4px solid #FFF;  
  21.     box-shadow: 0 0 5px #DDD;  
  22.     border-radius: 36px;  
  23. }  
  24.   
  25. .socialShare .msb_main:hover {  
  26.     box-shadow: 0 0 5px #BBB;  
  27. }  
  28.   
  29. .socialShare .msb_main img {  
  30.     width46px;  
  31.     height46px;  
  32.     cursorpointer;  
  33.     border-radius: 23px;  
  34.     bordernone;  
  35.     floatleft  
  36. }  
  37.   
  38. .socialShare .msb_network_button {  
  39.     width31px;  
  40.     height31px;  
  41.     positionabsolute;  
  42.     top9px;  
  43.     left92px;  
  44.     z-index: 1;  
  45.     cursorpointer;  
  46.     text-indent: -9999px;  
  47.     displaynone;  
  48.     backgroundno-repeat;  
  49.     border6px solid #f5f5f5;  
  50.     border-radius: 50%;  
  51. }  
  52.   
  53. .socialShare .msb_network_button.sina {  
  54.     backgroundurl(../images/social.png) no-repeat -130px -87px;  
  55. }  
  56.   
  57. .socialShare .msb_network_button.tQQ {  
  58.     backgroundurl(../images/social.png) no-repeat -185px -20px;  
  59. }  
  60.   
  61. .socialShare .msb_network_button.qZone {  
  62.     backgroundurl(../images/social.png) no-repeat -73px -20px;  
  63. }  
  64.   
  65. .socialShare .msb_network_button.douban {  
  66.     backgroundurl(../images/social.png) no-repeat -130px -151px;  
  67. }  
  68.   
  69. .socialShare .msb_network_button.weixin {  
  70.     backgroundurl(../images/social.png) no-repeat -73px -87px;  
  71. }  
  72.   
  73. .socialShare .msb_network_button:hover {  
  74.     transition: -moz-transform 2s ease-out 0s;  
  75.     border6px solid #eee;  
  76. }  
  77. /*自定义*/  
  78.   
  79. #weixin {  
  80.     width262px;  
  81.     height317px;  
  82.     bordersolid 1px #d8d8d8;  
  83.     z-index: 1000000;  
  84.     positionfixed;  
  85.     top0px;  
  86.     left0px;  
  87.     backgroundwhite;  
  88.     displaynone;  
  89. }  
  90.   
  91. #weixin .bd_weixin_popup_head {  
  92.     font-size12px;  
  93.     font-weightbold;  
  94.     text-alignleft;  
  95.     line-height16px;  
  96.     height16px;  
  97.     positionrelative;  
  98.     color#000;  
  99.     width: 90%;  
  100.     margin10px auto;  
  101. }  
  102.   
  103. #weixin .bd_weixin_popup_head .bd_weixin_popup_close {  
  104.     width16px;  
  105.     height16px;  
  106.     positionabsolute;  
  107.     rightright: 0;  
  108.     top: 0;  
  109.     color#999;  
  110.     text-decorationnone;  
  111.     font-size16px;  
  112. }  
  113.   
  114. #weixin .erweima {  
  115.     width: 90%;  
  116.     heightauto;  
  117.     margin: 0 auto;  
  118. }  
  119.   
  120. #weixin .erweima .erweimas {  
  121.     width: 100%;  
  122.     displayblock;  
  123. }  
  124.   
  125. #weixin .msgs {  
  126.     width: 90%;  
  127.     margin: 0 auto;  
  128.     font-size12px;  
  129.     text-alignleft;  
  130.     line-height22px;  
  131.     color#666;  
  132. }  

资源打包:

历史上的今天:

文件下载

  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 我的微信公众号扫一扫
  • weinxin
avatar
十年·肖申克的救赎影评
命运爱情之六 战友
埃微I5plus
十年沉船,苍苔不生。

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:4   其中:访客  4   博主  0

    • avatar 是是是 0

      热门广告联盟诚邀各类优质网站长合作。承接CPC,CPV,CPM,CPA,CPS等类型广告,帮你做各类产品推广,拥有十万网站主加盟,千万级流量,CTR防作弊检测,让客户更加放心。热门广告联盟 http://www.remenad.com 扒搬窝资源网为您提供各类精品网站源码,棋牌源码,游戏源码,软件源码,商业教程 扒搬窝资源网 http://www.pabanwo.com/

      • avatar 枫叶 1

        鸟哥主题不是有自带的吗

        • avatar 从良未遂 2

          不错,收藏

          • avatar 新闻头条 0

            文章不错支持一下吧