右侧在线特服特效

Posted 2020-08-06 杜Amy

一张背景图片，先用样式表固定好位置，显示页面中要显示的，先隐藏暂时不显示的
用if判断，要吗隐藏要吗显示，
html中给一个onclick 时间，点击后，谁显示，谁隐藏

 1 <style>
 2     .oc_bg{background:url(images/onlineContact_bg.png) no-repeat}
 3     .btn{display:inline-block;text-decoration:none;cursor:pointer}
 4     #big_C{position:fixed;_position:absolute;width:100px;height:301px;right:1px;top:200px}
 5     #big_C .btn1{position:absolute;width:19px;height:19px;top:80px;right:0px;background-position:-176px -83px}
 6     #big_C .btn6{display:none;position:absolute;width:29px;height:85px;top:160px;left: -29px;background-position:-138px -84px}
 7     #big_C .btn6:hover{background-position:-101px -84px}
 8     #small_C{position:fixed;_position:absolute;width:28px;height:91px;right:1px;top:300px;background-position:-250px -174px}
 9     #small_C .btn1{display:none;position:absolute;width:28px;height:28px;left:0px;bottom:-28px;background-position:-207px -108px}
10     #small_C .btn1:hover{background-position:-175px -108px}
11     #small_C .stb{position:absolute;width:28px;height:91px;right:1px;top:0px}
12 </style>

 

1 <div style="background: green; width: 1000px; height: 1500px; margin: auto;">
2     <div id="big_C" class="oc_bg">
3     <a class="btn btn1 oc_bg" onclick="showSmall_C();" ></a> <!--右角小点，点击关闭-->
4     <a class="btn btn6 oc_bg" onclick="$(window).scrollTop(0);"></a> <!--返回顶部-->
5 </div>
6 <div id="small_C" class="png oc_bg">
7     <a class="btn btn1 oc_bg" onclick="$(window).scrollTop(0);"></a> <!--返回顶部变小-->
8     <a class="stb btn" onclick="showBig_C();"></a>  <!--在线客服-->
9 </div>

 

<script type="text/javascript">
    $(\'#small_C\').hide();
    $(window).scroll(function(){
        if($(this).scrollTop()!=0){
            $("#big_C .btn6").show();
            $("#small_C .btn1").show();
        }else{
            $("#big_C .btn6").hide();
            $("#small_C .btn1").hide();
        }
    });
    function showBig_C(){
        $(\'#small_C\').hide(200);
        $(\'#big_C\').show(200);
    }
    function showSmall_C(){
        $(\'#big_C\').hide(200);
        $(\'#small_C\').show(200);
    }
</script>

效果图：

png图片下载：