直播视频app源码的分享功能，是这样实现的

最新推荐文章于 2022-11-23 14:14:55 发布

云豹科技晓彤

最新推荐文章于 2022-11-23 14:14:55 发布

阅读量1.7k

点赞数

分类专栏：直播平台源码文章标签： html html5 css

原文链接：https://blog.csdn.net/weixin_33747129/article/details/93170252?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522163040013916780271532842%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=163040013916780271532842&biz_id=0&utm

版权

直播平台源码专栏收录该内容

205 篇文章 2 订阅

订阅专栏

直播视频app源码拥有大量的用户和直播内容，为了方便用户分享平台内容，直播视频app源码实现了分享到第三方的功能，下面就是直播视频app源码实现分享功能的代码。

<!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>

直播视频app源码还可以通过接入第三方接口的方式，来实现分享功能，有兴趣的伙伴可以去了解下。

声明：本文由云豹科技转发自weixin_33747129博客，如有侵权请联系作者删除

云豹科技晓彤

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
直播视频app源码的分享功能，是这样实现的

直播视频app源码拥有大量的用户和直播内容，为了方便用户分享平台内容，直播视频app源码实现了分享到第三方的功能，下面就是直播视频app源码实现分享功能的代码。<!doctype html><html> <head> <meta charset="utf-8"> <meta content="width=device-width,user-scalable=no" name="viewport"> <tit
复制链接

扫一扫