点击分享功能
<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; }
可根据浏览器高度判断是上面弹出还是下面弹出