网站悬浮窗——在线客服

最新推荐文章于 2022-12-07 14:40:45 发布

crazy-cat

最新推荐文章于 2022-12-07 14:40:45 发布

阅读量6.3k

点赞数 3

分类专栏： html 文章标签： html悬浮窗

本文链接：https://blog.csdn.net/askycat/article/details/54236554

版权

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这里写图片描述

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8"> 
   <title>在线尝试 Bootstrap 实例</title>
   <link rel="stylesheet" href="css/bootstrap.min.css">  
   <script src="js/jquery.min.js"></script>
   <style>
#nav { width:150px; height: 400px; border: 1px solid #D4CD49; position:fixed;right:0;top:25% }
#nav1 { 
    width:25px;; 
    height: 100px; 
    border: 1px solid #D4CD49; 
    position:fixed;
    right:0;
    top:25%;
    display:none;
    background-image:url(sidebar_bg.gif);
    background-position:-150px 0px;
}
#top{background-image:url(img/sidebar_bg.gif);width:150px;  height:60px; background-position:-570px 0px;}
#yinc{background-image:url(img/sidebar_bg.gif);width:18px;  height:18px; background-position:-46px -20px; float:right;margin:10px;}
#yinc:hover{background-position:-66px -20px;}

</style>
<script>
    //隐藏大窗口显示小窗口
    function noneDiv(){
        $("#nav").hide(200);
        $("#nav1").show(200);
    }
    //隐藏小窗口显示大窗口
    function blockDiv(){
        $("#nav").show(200);
        $("#nav1").hide(200);
    }
</script>
</head>
<body>

    <!-- 默认显示的浮窗 -->
    <div id="nav">
        <div id="top">
            <div id="yinc" onclick="noneDiv();"></div>
        </div>
        <div>
            <p>                              
                <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&amp;uin=25633968210&amp;site=qq&amp;menu=yes">
                  <img border="0" src="http://wpa.qq.com/pa?p=2:2563396821:41" alt="点击这里给我发消息" title="点击这里给我发消息">
                  <span>客服1</span>
                </a>
            </p>
            <p>
                <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=2563396821&site=qq&menu=yes">
                  <img border="0" src="http://wpa.qq.com/pa?p=2:2563396821:41" alt="点击这里给我发消息" title="点击这里给我发消息">
                  <span>客服2</span>
                </a>
            </p>
        </div>
    </div>
    <!-- 小浮窗 -->
    <div id="nav1" onclick="blockDiv();">
    </div>
</body>
</html>

下载这个demo:http://download.csdn.net/detail/askycat/9732164

crazy-cat

关注

3
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
网站悬浮窗——在线客服

**<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>在线尝试 Bootstrap 实例</title> <link rel="stylesheet" href="css/bootstrap.min.css"> <script src="js/jquery.min.js"></script> <
复制链接

扫一扫