自定义页面微信、微博、QQ分享效果

几行简单的分享代码既可以实现，先看下效果：

 

第一步：页面因为结构代码

<div id="freebtn">
    <ul>
        <li class="wx"><div class="wxcodeimg" style="display:none;"><img src="https://api.qrserver.com/v1/create-qr-code/?size=100x100&data=@Request.Url" /></div></li>
        <li class="qq"></li>
        <li class="wb"></li>
        <li class="qz"></li>
        <li class="to_top"></li>
    </ul>
</div>

第二步：引入页面样式

<!--分享-->
<style>
    li {
        cursor: pointer;
        width: 60px;
        height: 60px;
        margin-top: 5px;
    }

    #freebtn {
        position: fixed;
        bottom: 50px;
        right: 50px;
        z-index: 99;
    }
    .wxcodeimg {
        position: relative;
        bottom: 20px;
        right: 120px;
        z-index: 99;
    }
        .wxcodeimg img {
            border: 2px solid #CCCCCC;
            border-radius:2px;
        }
    .wx {
        background-image: url(https://weixin1@3x.png);
    }

        .wx:hover {
            background-image: url(https://weixin@3x.png);
        }

    .qq {
        background-image: url(https:/qq1@3x.png);
    }

        .qq:hover {
            background-image: url(https://qq@3x.png);
        }

    .wb {
        background-image: url(https:///weibo1@3x.png);
    }

        .wb:hover {
            background-image: url(https://weibo@3x.png);
        }

    .qz {
        width: 60px;
        height: 60px;
        background-image: url(https://qqk1@3x.png);
        margin-top: 5px;
    }

        .qz:hover {
            background-image: url(https://qqk@3x.png);
        }

    .to_top {
        background-image: url(https://top1@3x.png);
        margin-top: 20px;
    }

    .to_top:hover {
        background-image: url(https://top@3x.png);
        margin-top: 20px;
    }
</style>

此处图片链接不能公开，还望谅解。。

第三步：JS引入

<script type="text/javascript">
//分享相关
    $(".wx").mouseover(function () {
        $(".wxcodeimg").show();
    });
    $(".wx").mouseout(function () {
        $(".wxcodeimg").hide();
    });
    $(".qq").click(function () {
        window.open("https://connect.qq.com/widget/shareqq/index.html?url=" + encodeURIComponent(location.href) + "%230-sqq-1-80247-9737f6f9e09dfaf5d3fd14d775bfee85&title=" + encodeURIComponent ('@ViewBag.Title')+"&desc=&summary=&site=baidu")
    })
    $(".wb").click(function () {
        window.open("http://service.weibo.com/share/share.php?url=" + encodeURIComponent(location.href) + "%230-tsina-1-93843-397232819ff9a47a7b7e80a40613cfe1&title=" + encodeURIComponent ('@ViewBag.Title')+"&appkey=1343713053&searchPic=true#_loginLayer_1539308246513")
    })
    $(".qz").click(function () {
        window.open("https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=" + encodeURIComponent(location.href) + "%230-qzone-1-29994-d020d2d2a4e8d1a374a433f596ad1440&title=" + encodeURIComponent('@ViewBag.Title')+"&desc=&summary=&site=")
    })
    $(".to_top").click(function () {
        window.scrollTo(0, 0);
    })
    $(document).scroll(function () {
        var top = $(document).scrollTop();
        if (top < 100) {
            $('.to_top').hide();
        }
        else {
            $('.to_top').show();
        }
    })
</script>

微信分享二维码，使用接口https://api.qrserver.com/v1/create-qr-code/?size=100x100&data=url

分享链接传入，URL地址和标题即可。