jQurry实现PC详情页分享到微信、朋友圈、QQ空间、微博

本文主要实现详情页分享功能，分享到微信、朋友圈、QQ空间、微博，以及打印和收藏功能。

一、效果图

二、相关代码

2.1html

<div class="share-wrapper clear">
	<div class="share-left clear">
		<span class="share-name">分享到：</span>
		<div class="share-box bdsharebuttonbox bdshare-button-style1-32 clear">
			<a href="" class="bds_weixin" class="bds_weixin" data-cmd="weixin"></a>
			<a href="" class="bds_tsina" data-cmd="tsina"></a>
			<a href="" class="bds_sqq" data-cmd="sqq"></a>
			<a href="" class="bds_qzone" data-cmd="qzone"></a>
		</div>
	</div>
	<div class="share-right clear">
		<a href="javascript:AddFavorite(location.href,document.title)" class="collectIcon"></a>
		<a href="javascript:window.print();" class="printIcon"></a>
	</div>
</div>

2.2less样式

注：图片需要自己找哦，此处没有提供资源

.share-wrapper {
  padding: 20px 40px;
  line-height: 24px;
  font-size: 14px;

  .share-left {
    float: left;
    .share-name {
      float: left;
    }

    .share-box {
      float: left;

      a {
        width: 24px;
        height: 24px;
        background: url(../../img/ar_icon.png) no-repeat;
        float: left;
        margin: 0 8px;
      }

      .bds_weixin {
        background-position: 0px 0px;
      }

      .bds_tsina {
        background-position: 0px -40px;
      }

      .bds_sqq {
        background-position: 0px -80px;
      }

      .bds_qzone {
        background-position: 0px -120px;
      }
    }
  }

  .share-right {
    float: right;

    a {
      width: 24px;
      height: 24px;
      background: url(../../img/ar_icon.png) no-repeat;
      float: left;
      margin-left: 16px;
    }

    .collectIcon {
      background-position: -40px 0px;
    }

    .printIcon {
      background-position: -40px -40px;
    }
  }

}

2.3JS逻辑

function AddFavorite(title, url) {
		try { window.external.addFavorite(url, title); }
		catch (e) {
			try {
				window.sidebar.addPanel(title, url, "");
			}
			catch (e) {
				alert("抱歉，您所使用的浏览器无法完成此操作。\n\n请使用快捷键Ctrl+D进行添加！");
			}
		}
	}
	window._bd_share_config = { "common": { "bdSnsKey": {}, "bdText": "", "bdMini": "2", "bdMiniList": false, "bdPic": "", "bdStyle": "1", "bdSize": "32" }, "share": {} }; 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)];

三、over~