微信，QQ分享插件

最新推荐文章于 2024-05-29 13:08:32 发布

lucky芬

最新推荐文章于 2024-05-29 13:08:32 发布

阅读量3.6k

点赞数 3

分类专栏：练手小案例

练手小案例专栏收录该内容

42 篇文章 2 订阅

订阅专栏

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width,user-scalable=no" name="viewport">
<title>微信，QQ分享插件</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body>
<div class="kePublic">
    <div class="gb_resLay">
    	<div class="gb_res_t"><span>分享到</span><i></i></div>
    	<div class="bdsharebuttonbox">
    		<ul class="gb_resItms">
    			<li> <a title="分享到微信" href="#" class="bds_weixin" data-cmd="weixin" ></a>微信好友 </li>
    			<li> <a title="分享到QQ好友" href="#" class="bds_sqq" data-cmd="sqq" ></a>QQ好友 </li>
    			<li> <a title="分享到QQ空间" href="#" class="bds_qzone" data-cmd="qzone" ></a>QQ空间 </li>
    			<li> <a title="分享到腾讯微博" href="#" class="bds_tqq" data-cmd="tqq" ></a>腾讯微博 </li>
    			<li> <a title="分享到新浪微博" href="#" class="bds_tsina" data-cmd="tsina" ></a>新浪微博 </li>
    			<li> <a title="分享到人人网" href="#" class="bds_renren" data-cmd="renren" ></a>人人网 </li>
    		</ul>
    	</div>
    </div>
</div>
<script type="text/javascript">
//全局变量，动态的文章ID
var ShareURL = "";
//绑定所有分享按钮所在A标签的鼠标移入事件，从而获取动态ID
$(function () {
	$(".bdsharebuttonbox a").mouseover(function () {
		ShareURL = $(this).attr("data-url");
	});
});

/*
* 动态设置百度分享URL的函数,具体参数
* cmd为分享目标id,此id指的是插件中分析按钮的ID
*，我们自己的文章ID要通过全局变量获取
* config为当前设置，返回值为更新后的设置。
*/
function SetShareUrl(cmd, config) {
	if (ShareURL) {
		config.bdUrl = ShareURL;
	}
	return config;
}

//插件的配置部分，注意要记得设置onBeforeClick事件，主要用于获取动态的文章ID
window._bd_share_config = {
	"common": {
		onBeforeClick: SetShareUrl, "bdSnsKey": {}, "bdText": ""
		, "bdMini": "2", "bdMiniList": false, "bdPic": "http://assets.jq22.com/plugin/2017-05-24-18-14-49.png", "bdStyle": "0", "bdSize": "24"
	}, "share": {}
};
//插件的JS加载部分
with (document) 0[(getElementsByTagName('head')[0] || body)
	.appendChild(createElement('script'))
	.src = 'http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='
	+ ~(-new Date() / 36e5)];
</script>
<!--效果html结束-->
</body>
</html>

@charset "utf-8";
/* 全局样式 */
*, *:before, *:after { box-sizing: border-box; }
body, ul, dl, dd, dt, ol, li, p, h1, h2, h3, h4, h5, h6, textarea, form, select, fieldset, table, td, div, input { margin: 0; padding: 0; -webkit-text-size-adjust: none }
h1, h2, h3, h4, h5, h6 { font-size: 14px; font-weight: normal }
i, em { font-style: normal!important; }
body>div, form>div, body>section { margin: 0 auto }
div { text-align: left }
a img { border: 0 }
table { border-collapse: collapse; border-spacing: 0 }
select, input, textarea { outline: none }
body { color: #494949; font: 12px Arial, "微软雅黑"; min-width: 320px; margin: 0 auto; background: #efefef; }
ul, ol, li { list-style-type: none; vertical-align: 0 }
a { outline-style: none; color: #494949; text-decoration: none }
a, area { blr:expression(this.onFocus=this.blur())
}
:focus { -moz-outline-style: none }
.clear { clear: both; height: 0; overflow: hidden; visibility: hidden; }
.hidden, .hide { display: none }
.block, .show { display: block }
.fl { float: left }
.fr { float: right }
.fline { float: left; display: inline }
.clearfix:after { clear: both; content: "."; height: 0; display: block; visibility: hidden }

/*弹出层 CSS*/
.gb_resLay { background: #FFFFFF; height: 170px; width: 100%; max-width: 800px; margin: 0 auto; }
.gb_res_t { line-height: 58px; height: 58px; position: relative; font-size: 18px; text-align: center; }
.gb_res_t i { background: #FFEC94; height: 1px; overflow: hidden; left: 32px; top: 30px; right: 32px; position: absolute; }
.gb_res_t span { background: #FFF; display: inline-block; padding: 0px 6px; position: relative; z-index: 2; }
.gb_resItms { margin: 0px 4%; }
.gb_resItms li { text-align: center; float: left; width: 16.66%; padding-bottom: 15px; }
.gb_resA img { height: auto; width: 60px; margin-bottom: 10px; }

@media only screen and (max-width: 500px) {
.gb_resA img { width: 45px; margin-top: 5px; }
}

@media only screen and (max-width: 470px) {
.gb_resItms li { width: 33.333%; }
.gb_resLay { height: 290px; }
.gb_resA img { width: 60px; margin-top: 0 }
}