點擊分享功能

<div class="ht_div14 ht-pubfx">
                    <div class="ht_div15">
                        <p class="ht_p19" onclick="window.location.href='{url user/space/$answerx['authorid']}'">
                            <img src="{$answerx['author_avartar']}" class="ht_img17" />
                            <img src="{SITE_URL}static/pc/img/sy14.png" class="ht_img18" style="display:none" />
                        </p>
                    </div>
              在此處引入末班
                        <!--{template fenxiang_new}-->

                </div>

 

fenxiang_new.php

<div class="sy_p13">
    <p class="ht_p4 fenxiang">
        <img src="{SITE_URL}static/pc/img/sy09.png" class="ht_img2"/>
        <span>分享</span>
        <input type="hidden" value="" id="fx_input"/>
    </p>

    <div class="sy_div41">
        <div class="send">
            <ul class="sy_ul8">
                <li class="sy_li8 lianjie" data-clipboard-text="">
                    <p class="sy_p53">
                        <img src="{SITE_URL}static/pc/img/sy43.png"/>
                    </p>
                    <span>複製鏈接</span>
                </li>
                <li class="sy_li8" id="fenxxl">
                    <p class="sy_p53">
                        <img src="{SITE_URL}static/pc/img/sy44.png"/>
                    </p>
                    <span>新浪微博</span>
                </li>
                <li id="wechatsao">
                    <p class="sy_p53">
                        <img src="{SITE_URL}static/pc/img/sy45.png"/>
                    </p>
                    <span>微信掃一掃</span>
                </li>
            </ul>

            <p class="sy_p54">
            </p>
        </div>
    </div>

    <div class="sy_div42">
        <div class="send1">
            <ul class="sy_ul8">
                <li class="sy_li8 lianjie" data-clipboard-text="">
                    <p class="sy_p53">
                        <img src="{SITE_URL}static/pc/img/sy43.png"/>
                    </p>
                    <span>複製鏈接</span>
                </li>
                <li class="sy_li8" id="fenxxl">
                    <p class="sy_p53">
                        <img src="{SITE_URL}static/pc/img/sy44.png"/>
                    </p>
                    <span>新浪微博</span>
                </li>
                <li id="wechatsao">
                    <p class="sy_p53">
                        <img src="{SITE_URL}static/pc/img/sy45.png"/>
                    </p>
                    <span>微信掃一掃</span>
                </li>
            </ul>

            <p class="sy_p54">
            </p>
        </div>
    </div>
</div>


<script type="text/javascript">
    $(function() {
        var share_url = location.href;
        var share_title = encodeURIComponent(document.title);
        $(".lianjie").attr("data-clipboard-text",share_url);
        $(".fx_input").val(share_url);

        $(".sy_div5").on('click',".fenxiang",function(event){

            event.stopPropagation();
            var obj = $(this);//元素
            var h = obj.height();//元素高度
            obj.offset().top;//元素距離頂部高度
            var wh = $(window).height();//瀏覽器窗口高度
            $(document).scrollTop();//滾動條高度
            var xh=wh-(h+obj.offset().top-$(document).scrollTop());//元素到瀏覽器底部的高度
            $(this).parent('.sy_p13').find('.sy_p54').html('');
            var qrurl=$(this).find('input').val();
            //alert(qrurl);
            //微信二維碼生成
            //qrcode  二維碼生成插件
            $(this).parent('.sy_p13').find('.sy_p54').qrcode(qrurl);


            if(xh <= 250){
                $(".sy_div42").hide();
                $(".sy_div41").hide();
                $(this).parents(".ht-pubfx").find(".sy_div42").show();
            }else{
                $(".sy_div42").hide();
                $(".sy_div41").hide();
                $(this).parents(".ht-pubfx").find(".sy_div41").show();
            }

        });
        //新浪微博
        var weibo_url = encodeURIComponent(location.href);
        $("#fenxxl").on('click', function () {

            var param = {
                url: weibo_url,
                title: share_title,
                rnd: new Date().valueOf()
            };
            var temp = [];
            for (var p in param) {
                temp.push(p + '=' + encodeURIComponent(param[p] || ''))
            }
            window.open('http://service.weibo.com/share/share.php?' + temp.join('&'));
        });

        $("#wechatsao").on('click', function () {
            $(".sy_div41").hide();
            $(".sy_div42").hide();
        });
        $(".sy_p54").on('click', function () {
            $(".sy_div41").hide();
            $(".sy_div42").hide();
        });


    })
</script>

<script type="text/javascript" src="{SITE_URL}static/pc/js/clipboard.min.js"></script>
<script type="text/javascript">
    //複製連接
    var clipboard = new Clipboard('.lianjie');
    clipboard.on('success', function(e) {
        $(".sy_p55").text('鏈接複製成功');
        $(".sy_p55").show();
        $(".sy_div42").hide();
        $(".sy_div41").hide();
        setTimeout("yc()",1000);
    });
    clipboard.on('error', function(e) {
        //console.log(e);
        tishi_new("複製失敗！請手動複製")
    });

</script>

 

.fenxiang{
    position: relative;
}
.sy_div41{
    position: absolute;
    bottom: -262px;
    left: -45px;
    height: 246px;
    width: 138px;
    z-index: 8;
    display: none;
}
.send {
    border: 1px solid #ebebeb;
    width: 138px;
    height: 246px;
    position: relative;
    border-radius: 3px;
    background: #fff;
    -moz-box-shadow: 0 5px 20px rgba(26,26,26,.1);
    -webkit-box-shadow: 0 5px 20px rgba(26,26,26,.1);
    box-shadow: 0 5px 20px rgba(26,26,26,.1);
}
.send:before {
    content: "";
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    top: -7px;
    width: 10px;
    height: 10px;
    background: #fff;
    border-bottom: 1px solid #ebebeb;
    border-right: 1px solid #ebebeb;
    transform: rotate(225deg);
    -webkit-transform: rotate(225deg)
}
.sy_ul8{
    width: 100%;
    padding-top: 10px;
    height: auto;
    overflow: hidden;
    margin-bottom: 5px;
}
.sy_ul8 li{
    padding-left: 24px;
    height: 40px;
    line-height: 40px;
    color: #888888;
    font-size: 14px;    
}
.sy_ul8 .sy_li8{
    cursor: pointer;
}
.sy_ul8 .sy_li8:hover{
    background-color: #F2F2F2 !important;
}
.sy_p53{
    float: left;
    height: 40px;
    line-height: 40px;
    margin-right: 5px;
}
.sy_p53 img{
    height: 13px;
    vertical-align: middle;
    margin-top: -3px;
}
.sy_p54{
    padding: 0 17px;
    height: auto;
    overflow: hidden;
}
.sy_p54 img{
    width: 100% !important;
    height: 104px !important;
}

.sy_div42{
    position: absolute;
    bottom: 35px;
    left: -45px;
    height: 246px;
    width: 138px;
    z-index: 8;
    display: none;
}
.send1 {
    border: 1px solid #ebebeb;
    width: 138px;
    height: 246px;
    position: relative;
    border-radius: 3px;
    background: #fff;
    -moz-box-shadow: 0 5px 20px rgba(26,26,26,.1);
    -webkit-box-shadow: 0 5px 20px rgba(26,26,26,.1);
    box-shadow: 0 5px 20px rgba(26,26,26,.1);
}
.send1:before {
    content: "";
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    bottom: -7px;
    width: 10px;
    height: 10px;
    background: #fff;
    border-left: 1px solid #ebebeb;
    border-top: 1px solid #ebebeb;
    transform: rotate(225deg);
    -webkit-transform: rotate(225deg)
}
.sy_p55{
    width: 311px;
    height: 38px;
    line-height: 38px;
    font-size: 12px;
    text-align: center;
    border-radius: 5px;
    position: fixed;
    margin: auto;
    top: 90px;
    left: 0;
    right: 0;
    background-color: #FFFFFF;
    z-index: 10;    
    color: #D5605B;
    border: 1px solid #D5605B;
    display: none;
}
.sy_img14{
    width: 100%;
    height: 100%;
    border-radius: 4px;
    cursor: pointer;
}
.sy_img15{
    position: absolute;
    margin: auto;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 37px;
    height: 37px;
    border-radius: 100%;
    cursor: pointer;
}

可根據瀏覽器高度判斷是上面彈出仍是下面彈出