第三方分享功能

時間 2019-12-05
標籤第三方分享功能简体版
原文原文鏈接
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta content="width=device-width,user-scalable=no" name="viewport">
    <title>微信，QQ分享插件</title>
    <style>
        @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
        }

        .chgBtn {
            cursor: pointer
        }

        .fwr {
            font-family: "微軟雅黑"
        }

        .far {
            font-family: Arial
        }

        .fb {
            font-weight: bold
        }

        .auto {
            margin-left: auto !important;
            margin-right: auto !important
        }

        .cor_red {
            color: #ff0000
        }

        .cor_org {
            color: #FF4400;
        }

        .cor_bs,
        .cor_bs:hover {
            color: #fff
        }

        .autoImg img {
            height: auto;
            width: 100%;
            display: block;
        }

        .button {
            display: inline-block;
            zoom: 1;
            *display: inline;
            vertical-align: baseline;
            margin: 0 2px;
            outline: none;
            cursor: pointer;
            text-align: center;
            text-decoration: none;
            font: 14px/100% Arial, Helvetica, sans-serif;
            padding: 0.25em 0.6em 0.3em;
            text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
            -webkit-border-radius: .5em;
            -moz-border-radius: .5em;
            border-radius: .5em;
            -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
            -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
            box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
        }

        .red {
            color: #faddde;
            border: solid 1px #980c10;
            background: #d81b21;
            background: -webkit-gradient(linear, left top, left bottom, from(#ed1c24), to(#A51715));
            background: -moz-linear-gradient(top, #ed1c24, #A51715);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24', endColorstr='#aa1317');
        }

        .red:hover {
            background: #b61318;
            background: -webkit-gradient(linear, left top, left bottom, from(#c9151b), to(#a11115));
            background: -moz-linear-gradient(top, #c9151b, #a11115);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c9151b', endColorstr='#a11115');
            color: #fff;
        }

        .red:active {
            color: #de898c;
            background: -webkit-gradient(linear, left top, left bottom, from(#aa1317), to(#ed1c24));
            background: -moz-linear-gradient(top, #aa1317, #ed1c24);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#aa1317', endColorstr='#ed1c24');
        }

        .cor_bs,
        .cor_bs:hover {
            color: #ffffff;
        }

        .mKeBanner,
        .mKeBanner div {
            text-align: center;
        }

        /*彈出層 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
            }
        }
    </style>
    <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
</head>

<body>
    <div class="kePublic">
        <!--效果html開始-->
        <style type="text/css"> .bdsharebuttonbox a { width: 60px !important; height: 60px !important; margin: 0 auto 10px !important; float: none !important; padding: 0 !important; display: block; } .bdsharebuttonbox a img { width: 60px; height: 60px; } .bdsharebuttonbox .bds_tsina { background: url(images/gbRes_6.png) no-repeat center center/60px 60px; } .bdsharebuttonbox .bds_qzone { background: url(images/gbRes_4.png) no-repeat center center/60px 60px; } .bdsharebuttonbox .bds_tqq { background: url(images/gbRes_5.png) no-repeat center center/60px 60px; } .bdsharebuttonbox .bds_weixin { background: url(images/gbRes_2.png) no-repeat center center/60px 60px; } .bdsharebuttonbox .bds_sqq { background: url(images/gbRes_3.png) no-repeat center center/60px 60px; } .bdsharebuttonbox .bds_renren { background: url(images/gbRes_1.png) no-repeat center center/60px 60px; } .bd_weixin_popup .bd_weixin_popup_foot { position: relative; top: -12px; }
        </style>
        <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>
        <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結束-->
        <div class="clear"></div>
    </div>
    <style>
        a {
            color: #fff;
        }
    </style>

</body>

</html>
複製代碼
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。