右侧制作带关闭按钮的固定客服

   因为竞价站点需要，在右侧新加一个客服和关闭按钮，在此分享下步骤。

   演示：

   

 

    上代码：

    

 <SCRIPT language=javascript type=text/javascript>
function adv_close(){
    document.getElementById("close").style.display="none";
    document.getElementById("divAd").style.display="none";
}
window.onload = function(){
    var img1 = document.getElementById("divAd");
    var top1 = img1.offsetTop;
    var left1 = img1.offsetLeft;
    var img2=document.getElementById("close");
    var top2 = img2.offsetTop;
    var left2 = img2.offsetLeft;
    window.onscroll = function(){
        img1.style.top = top1 + (document.documentElement.scrollTop || document.body.scrollTop) +"px";
        img1.style.left = left1 + (document.documentElement.scrollLeft || document.body.scrollLeft) +"px";
        img2.style.top = top2 + (document.documentElement.scrollTop || document.body.scrollTop) +"px";
        img2.style.left = left2 + (document.documentElement.scrollLeft || document.body.scrollLeft) +"px";
    }
}     
</SCRIPT>
     <div class="divAd">
      <a href="tel:{dede:global.cfg_dh/}" class="phone_tel" id="divAd"><img src="/skin/img/dh1.png"></a>
      <div id="close" onclick="adv_close()"><img src="/skin/img/close.png" width="20px" heitht="20px" alt="关闭"></img></div>
     </div>

　　css样式为：

   

/*移动客服代码*/
.phone_tel {
   
    border-radius: 50%;
    position: fixed;
    bottom: 220px;
    right: 6px;
    z-index: 666666;
    padding: 10px;
}
.phone_tel img {
    width: 120px;
    vertical-align: middle;
}  
/*总体客服代码*/
.divAd{
   
    border-radius: 50%;
    position: fixed;
    bottom: 200px;
    right: 6px;
    z-index: 666666;
    padding: 10px;
  
  
}

　　这样就搞定了，可以进网站进行测试：http://yzmb.pengchenggroup.cn/