zoukankan      html  css  js  c++  java
  • 右侧制作带关闭按钮的固定客服

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

       演示:

       

        上代码:

        

     <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 {
         120px;
        vertical-align: middle;
    }  
    /*总体客服代码*/
    .divAd{
       
        border-radius: 50%;
        position: fixed;
        bottom: 200px;
        right: 6px;
        z-index: 666666;
        padding: 10px;
      
      
    }
    

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

  • 相关阅读:
    HTTP协议图--概述
    HTTP协议图--HTTP 工作过程
    HTTP协议图--HTTP 协议基础
    7万网站用户行为大数据分析
    80万商城运营大数据分析
    文本挖掘之词云及个性化词云
    数据分析:某地医院药品销售业务数据分析
    示例python 批量操作excel统计销售榜品牌及销售额
    目标用户偏好指数Target Group Index分析
    linux 下部署web 程序
  • 原文地址:https://www.cnblogs.com/68xi/p/11595756.html
Copyright © 2011-2022 走看看