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/

  • 相关阅读:
    Android的Activity屏幕切换动画(一)-左右滑动切换
    404 Not Found 由来
    HTML+CSS 制作HTML5标志图
    发现 网站错误
    链接指南
    偷懒省事有工具啊
    程序员很穷(转)
    谷歌浏览器修改CSS和js后同步保存到文件中 (译)
    程序员眼睛的保护(爱护眼睛,你我做起)
    仿站违法和侵权吗?
  • 原文地址:https://www.cnblogs.com/68xi/p/11595756.html
Copyright © 2011-2022 走看看