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/

  • 相关阅读:
    C 语言中 static 的作用
    STM32 标准库
    STM32 HAL库与标准库的区别_浅谈句柄、MSP函数、Callback函数
    asp.net core launchsettings.json
    asp.net core mvc/api部署到iis
    依赖倒置来反转依赖
    ASP.NET Core in2020
    DDD学习一
    asp.net core学习一
    从零开始实现ASP.NET Core MVC的插件式开发
  • 原文地址:https://www.cnblogs.com/68xi/p/11595756.html
Copyright © 2011-2022 走看看