pc端常用的分享QQ、QQ空间、微信、微博、复制链接

网上太多的关于这个的了，但是都没有符合我要求的插件。只好自己写，顺带分享出来给小白们

直接上代码了用的是最基础的代码

这个下载好放到对应的位置

qrcode.min.js（./js/qrcode.min.js）

代码块

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>分享</title><style type="text/css">.share-area { padding: 30px 0 40px 90px; }.share-area .label { float: left; line-height: 54px; }.share-area ul { overflow: hidden; display: inline-block; }.share-area ul li { float: left; margin-right: 10px; }.share-area ul li a{ display: inline-block; width: 50px; height: 50px; }.share-tx-weChat { background: url(../img/share_btns/icon_weixin_normal.png) no-repeat center; width: 50px; height: 50px; border: 1px solid red; }.share-tx-weChat:hover { background: url(../img/share_btns/icon_weixin_pressed.png) no-repeat center; width: 50px; height: 50px; border: 1px solid red; }.share-qq { background: url(../img/share_btns/icon_QQ__normal.png) no-repeat center; width: 50px; height: 50px; border: 1px solid red; }.share-qq:hover { background: url(../img/share_btns/icon_QQ_pressed.png) no-repeat center; width: 50px; height: 50px; border: 1px solid red; }.share-qzone { background: url(../img/share_btns/icon_QQkongjian_normal.png) no-repeat center; width: 50px; height: 50px; border: 1px solid red; }.share-qzone:hover { background: url(../img/share_btns/icon_QQkongjian_press.png) no-repeat center; width: 50px; height: 50px; border: 1px solid red; }.share-xl-weiBo { background: url(../img/share_btns/icon_weibo_normal.png) no-repeat center; width: 50px; height: 50px; border: 1px solid red; }.share-xl-weiBo:hover { background: url(../img/share_btns/icon_weibo_press.png) no-repeat center; width: 50px; height: 50px; border: 1px solid red; }.share-link-url { background: url(../img/share_btns/icon_fuzhilianjie_normal.png) no-repeat center; width: 50px; height: 50px; border: 1px solid red; }.share-link-url:hover { background: url(../img/share_btns/icon_fuzhilianjie_press.png) no-repeat center; width: 50px; height: 50px; border: 1px solid red; }</style>
</head>
<body><div class="share-area"><div class="label">分享到：</div><ul><li class="share-code"><a class="share-tx-weChat"></a><div id="layerWxcode" class="towdimcodelayer js-transition"><div id="shareUrl"></div><div>打开微信扫一扫</div></div></li><li title="分享到QQ"><a class="share-qq"></a></li><li title="分享到QQ空间"><a class="share-qzone"></a></li><li title="分享到新浪微博"><a class="share-xl-weiBo"></a></li><li title="复制链接"><a class="share-link-url"></a></li></ul><textarea id="requestLink" style="position: absolute;top: 0;left: 0;opacity: 0;z-index: -10;">这是幕后黑手</textarea></div><script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script><script type="text/javascript" src="./js/qrcode.min.js"></script><script type="text/javascript">(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);}elseinit(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 = 'https://connect.qq.com/widget/shareqq/index.html?url={url}&showcount=0&desc={content}&summary=&title={title}&pics=&style=203&width=19&height=22';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);</script><script type="text/javascript">$(function() {var shareUrl = window.location.href;//这里注意请使用线上地址随便什么地址，本地是没有效果的var content = "这里就是分享的文章的简单介绍";var title = "标题不用说了吧";var pic = "默认文章第一张图片";new QRCode(document.getElementById("shareUrl"), {text: shareUrl,width: 100,height: 100,});  // 设置要生成二维码的链接$(".share-tx-weChat").mouseover(function(){$("#layerWxcode").show();}).mouseout(function(){$("#layerWxcode").hide();})$(".share-qq").on("click",function(){$(this).socialShare("tQQ", {url: shareUrl,title: title,content: content});})$(".share-qzone").on("click",function(){$(this).socialShare("qZone", {url: shareUrl,title: title,content: content,pic: pic});})$(".share-xl-weiBo").on("click",function(){$(this).socialShare("sinaWeibo");})$(".share-link-url").on("click",function(){var input = document.getElementById("requestLink");input.value = shareUrl; // 修改文本框的内容input.select(); // 选中文本document.execCommand("copy"); alert("复制成功");})});</script>
</body>
</html>

欢迎优化代码
我太懒了
冗余代码就不删了
优化好了@我
部分引用他人的代码http://sc.chinaz.com/jiaobendemo.aspx?downloadid=9201782938822
拿去好好用吧��
转载请注明出处

pc端常用的分享QQ、QQ空间、微信、微博、复制链接相关推荐

PC端实现浏览器点击分享到QQ好友,空间,微信,微博等
网上现在比较流行的是JIaThis,但是测试的时候,不能分享给QQ好友,一直卡在输入验证码,以下代码亲测有效,可直接使用 <%@ page language="java" c ...
pc端常用电脑屏幕媒体查询尺寸
pc端常用电脑屏幕 ((响应式PC端媒体查询)电脑屏幕分辨率尺寸大全) PC端************ 按屏幕宽度大小排序(主流的用橙色标明) 分辨率比例 | 设备尺寸 1024*500 (8. ...
Vue UI 组件库（移动端常用 UI 组件库，PC 端常用 UI 组件库，Element UI基本使用，Element UI按需引入）
文章目录 Vue UI 组件库 7.1 移动端常用 UI 组件库 7.2 PC 端常用 UI 组件库 7.3 Element UI基本使用 7.4 Element UI按需引入 Vue UI 组件库 ...
web端网页qq好友 qq空间微信微博分享
1.分享给qq好友 window.open("http://connect.qq.com/widget/shareqq/index.html?url=" +encodeURICom ...
微信又更新了，这次在PC端塞下了一整个QQ游戏！（附内测地址）
近日,腾讯微信PC版迎来了2.9.0.测试版.相信很多人都会爱上这个功能!毕竟我怀疑是为上班摸鱼的那些小伙伴的开发的.... 此次更新增添了不少新功能.最引人注目的也是我期待已久的功能就是微信PC版小 ...
计算机常用屏幕分辨率,pc端常用电脑屏幕（(响应式PC端媒体查询)电脑屏幕分辨率尺寸大全）...
PC端************ 按屏幕宽度大小排序(主流的用橙色标明) 分辨率比例 | 设备尺寸 1024*500 (8.9寸) 1024*768 (比例4:3 | 10.4寸.12.1寸.1 ...
新闻资讯类网站的PC端前台模板分享
PC端新闻资讯模板背景效果图技术方案选型过程方案敲定结语背景我同学公司需要开发一个pc端的新闻咨询网址,后端和app端都有了,具体一点就是已经有了后台监控和发布系统,并且实现了手机app ...
现在计算机常用的分辨率,pc端常用电脑屏幕（(响应式PC端媒体查询)电脑屏幕分辨率尺寸大全）...
PC端************ 按屏幕宽度大小排序(主流的用橙色标明) 分辨率比例 | 设备尺寸 1024*500 (8.9寸) 1024*768 (比例4:3 | 10.4寸.12.1寸.1 ...
html电脑屏幕尺寸,pc端常用电脑屏幕（(响应式PC端媒体查询)电脑屏幕分辨率尺寸大全）...
PC端************ 按屏幕宽度大小排序(主流的用橙色标明) 分辨率比例 | 设备尺寸 1024*500 (8.9寸) 1024*768 (比例4:3 | 10.4寸.12.1寸.1 ...

pc端常用的分享QQ、QQ空间、微信、微博、复制链接

pc端常用的分享QQ、QQ空间、微信、微博、复制链接

qrcode.min.js（./js/qrcode.min.js）

代码块

pc端常用的分享QQ、QQ空间、微信、微博、复制链接相关推荐

最新文章

热门文章