一款不錯(cuò)的右邊小客服掛件(帶QQ、微信、商橋、電話、分享)
[重要通告]如您遇疑難雜癥,本站支持知識付費(fèi)業(yè)務(wù),掃右邊二維碼加博主微信,可節(jié)省您寶貴時(shí)間哦!
今天在看一家用友的站點(diǎn),發(fā)現(xiàn)右邊的掛件不錯(cuò),就順便扒了以下,也給自己以后用留下點(diǎn)意思兒;具體看圖,至于代碼,網(wǎng)上也有,也可以搜索到;
把以下代碼放在你想放在的位置,一般放在頁腳下即可
<div class="side"> <ul> <li id="qqonline"><a target="_blank" rel="nofollow"><i class="bgs1"></i>售前咨詢</a></li> <li class="shangqiao"> <a target="_blank" rel="nofollow"> <div><i class="bgs1"></i>技術(shù)咨詢</div> </a> </li> <li class="sideewm"><i class="bgs3"></i>微信客服 <div class="ewBox son"></div> </li> <li class="sideetel"><i class="bgs4"></i>聯(lián)系電話 <div class="telBox son"> <dd class="bgs1"><span>咨詢電話</span>13888888888</dd> <dd class="bgs2"><span>投訴電話</span>13999999999</dd> </div> </li> <li class="fenxiang"><i class="bgs5"></i>一鍵分享 <div class="bdsharebuttonbox" data-tag="share_1"> <a class="ttqq" data-cmd="sqq" title="分享到QQ好友"></a> <a class="ttwx" data-cmd="weixin" href="javascript:;"></a> <a class="ttqzone" data-cmd="qzone"></a> <a class="ttsina" data-cmd="tsina"></a> <a class="tthuaban" data-cmd="huaban"></a> <a class="ttfbook" data-cmd="fbook"></a> <div id="fxcode"> <div class="f fxjg">分享到微信朋友圈</div> <div id="fxcolse" class="r fxjg"><b>X</b></div> <canvas width="100" height="100"></canvas></div> </div> <script src="/themes/keyou/js/jquery.qrcode.min.js"></script> <script> var sharrul = window.location.href; var shartitle = "老梁博客:VX2589053300"; var sharpic = ""; jQuery('#fxcode').qrcode({ render: "canvas", width:100, height:100, text: sharrul }); $(".ttwx").click(function () { $("#fxcode").css("display", "block") }); $("#fxcolse").click(function () { $("#fxcode").css("display", "none") }); $(".ttqq").click(function () { shareqq(shartitle, sharrul, sharpic) }); $(".ttqzone").click(function () { shareToQq(shartitle, sharrul, sharpic) }); $(".ttsina").click(function () { shareToXl(shartitle, sharrul, sharpic) }); $(".tthuaban").click(function () { sharehuaban(shartitle, sharrul, sharpic) }); $(".ttfbook").click(function () { sharefb(shartitle, sharrul, sharpic) }); function shareqq(title, url, picurl) { var shareqqzonestring = 'https://connect.qq.com/widget/shareqq/index.html?summary=' + title + '&url=' + url + '&pics=' + picurl; window.open(shareqqzonestring, 'newwindow', 'height=595,width=785,top=100,left=100') } function shareToQq(title, url, picurl) { var shareqqzonestring = 'https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?title=' + title + '&url=' + url + '&pics=' + picurl; window.open(shareqqzonestring, 'newwindow', 'height=400,width=400,top=100,left=100') } function shareToXl(title, url, picurl) { var sharesinastring = 'http://v.t.sina.com.cn/share/share.php?title=' + title + '&url=' + url + '&content=utf-8&sourceUrl=' + url + '&pic=' + picurl; window.open(sharesinastring, 'newwindow', 'height=400,width=400,top=100,left=100') } function sharehuaban(title, url, picurl) { var sharesinastring = 'https://huaban.com/bookmarklet/?title=' + title + '&url=' + url + '&content=utf-8&sourceUrl=' + url + '&media=' + picurl; window.open(sharesinastring, 'newwindow', 'height=400,width=400,top=100,left=100') } function sharefb(title, url, picurl) { var sharesinastring = 'https://www.facebook.com/share.php?t=' + title + '&u=' + url + '&content=utf-8&sourceUrl=' + url + '&pic=' + picurl; window.open(sharesinastring, 'newwindow', 'height=400,width=400,top=100,left=100') } </script> </li> <li class="sidetop" onclick="goTop()"><i class="bgs6"></i>返回頂部</li> </ul> </div>
把以下代碼丟進(jìn)你站點(diǎn)的css里
.side{position:fixed;width:78px;right:0;top:50%;margin-top:-200px;z-index:100;border:1px solid #e0e0e0;background:#fff;border-bottom:0} .side ul li{width:78px;height:78px;float:left;position:relative;border-bottom:1px solid #e0e0e0;color:#333;font-size:14px;line-height:38px;text-align:center;transition:all .3s;cursor:pointer} .side ul li:hover{background:#e60015;color:#fff} .side ul li:hover a{color:#fff} .side ul li i{height:25px;margin-bottom:1px;display:block;overflow:hidden;background-repeat:no-repeat;background-position:center center;background-size:auto 25px;margin-top:14px;transition:all .3s} .side ul li i.bgs1{background-image:url(../images/kefu/right_pic5.png)} .side ul li i.bgs2{background-image:url(../images/kefu/right_pic7.png)} .side ul li i.bgs3{background-image:url(../images/kefu/right_pic2.png)} .side ul li i.bgs4{background-image:url(../images/kefu/right_pic1.png)} .side ul li i.bgs5{background-image:url(../images/kefu/right_pic3.png)} .side ul li i.bgs6{background-image:url(../images/kefu/right_pic6_on.png)} .side ul li:hover i.bgs1{background-image:url(../images/kefu/right_pic5_on.png)} .side ul li:hover i.bgs2{background-image:url(../images/kefu/right_pic7_on.png)} .side ul li:hover i.bgs3{background-image:url(../images/kefu/right_pic2_on.png)} .side ul li:hover i.bgs4{background-image:url(../images/kefu/right_pic1_on.png)} .side ul li:hover i.bgs5{background-image:url(../images/kefu/right_pic3_on.png)} .side ul li .sidebox{position:absolute;width:78px;height:78px;top:0;right:0;transition:all .3s;overflow:hidden} .side ul li.sidetop{background:#e60015;color:#fff} .side ul li.sidetop:hover{opacity:.8;filter:Alpha(opacity=80)} .side ul li.sideewm .ewBox.son{width:238px;display:none;color:#363636;text-align:center;padding-top:235px;position:absolute;left:-240px;top:0;background-image:url(../images/kefu/weixinkefu.jpg);background-repeat:no-repeat;background-position:center center;border:1px solid #e0e0e0; background-color:#fff;} .side ul li.sideetel .telBox.son{width:240px;height:237px;display:none;color:#fff;text-align:left;position:absolute;left:-240px;top:-79px;background:#e60015} .side ul li.sideetel .telBox dd{display:block;height:118.5px;overflow:hidden;padding-left:82px;line-height:24px;font-size:18px} .side ul li.sideetel .telBox dd span{display:block;line-height:28px;height:28px;overflow:hidden;margin-top:32px;font-size:18px} .side ul li.sideetel .telBox dd.bgs1{background:url(../images/kefu/right_pic8.png) 28px center no-repeat;} .side ul li.sideetel .telBox dd.bgs2{background:url(../images/kefu/right_pic9.png) 28px center no-repeat}
把以下圖片js下載了,按照你所設(shè)置的路徑丟進(jìn)去即可;
問題未解決?付費(fèi)解決問題加Q或微信 2589053300 (即Q號又微信號)右上方掃一掃可加博主微信
所寫所說,是心之所感,思之所悟,行之所得;文當(dāng)無敷衍,落筆求簡潔。 以所舍,求所獲;有所依,方所成!
賞
支付寶贊助
微信贊助
免責(zé)聲明,若由于商用引起版權(quán)糾紛,一切責(zé)任均由使用者承擔(dān)。
您必須遵守我們的協(xié)議,如您下載該資源,行為將被視為對《免責(zé)聲明》全部內(nèi)容的認(rèn)可->聯(lián)系老梁投訴資源 LaoLiang.Net部分資源來自互聯(lián)網(wǎng)收集,僅供用于學(xué)習(xí)和交流,請勿用于商業(yè)用途。如有侵權(quán)、不妥之處,請聯(lián)系站長并出示版權(quán)證明以便刪除。
敬請諒解! 侵權(quán)刪帖/違法舉報(bào)/投稿等事物聯(lián)系郵箱:service@laoliang.net
意在交流學(xué)習(xí),歡迎贊賞評論,如有謬誤,請聯(lián)系指正;轉(zhuǎn)載請注明出處: » 一款不錯(cuò)的右邊小客服掛件(帶QQ、微信、商橋、電話、分享)