写了一个多功能悬浮窗插件，分享给大家

写了一个集个人QQ、微信和QQ群推广以及自定义文章功能于一体的悬浮窗插件，主要用到position定位、css3过度和jQuery，成品效果看右侧，可以说是为个人站长或博主量身打造的。

我网站原来的悬浮窗如下图：

详情戳文章：网站在线客服漂浮窗代码，刚开始是在这个上面改，html全在js里，改了两三下，是真不想改了，所以才自己写。

废话不多说上代码，关于代码是什么意思和怎么修改我都在代码里面做了详细的标注。

HTML代码：

css代码：

@charset "utf-8"; 
/* CSS Document */ 
* { 
    margin: 0; 
    padding: 0; 
    list-style-type: none; 
    font-family: "微软雅黑"; 
    font-size: 14px; 
} 
a { 
    text-decoration: none; 
} 
body { 
    height: 2000px; 
} 
/*返回顶部按钮*/ 
#backtop { 
    width: 70px; 
    height: 70px; 
    background-color: #686868; 
    position: fixed; 
    bottom: 100px; 
    right: 0; 
    background-image: url(../images/r_top.png); 
    transition: all 0.6s; 
    -moz-transition: all 0.6s; 
    -o-transition: all 0.6s; 
    -webkit-transition: all 0.6s; 
} 
#backtop:hover { 
    cursor: pointer; 
    background-color: #444; 
} 
/*悬浮窗*/ 
#floatwindow { 
    width: 70px; 
    position: fixed; 
    right: 0; 
    bottom: 100px; 
} 
/*定义单个div大小和间距*/ 
#floatwindow div { 
    width: 70px; 
    height: 70px; 
    margin-top: 1px; 
} 
/*个人QQ和欢迎投稿*/ 
#floatwindow .qq, #floatwindow .hytg { 
    background-color: #ffc301; 
    transition: all 0.6s; 
    -moz-transition: all 0.6s; 
    -o-transition: all 0.6s; 
    -webkit-transition: all 0.6s; 
} 
#floatwindow .qq:hover, #floatwindow .hytg:hover { 
    background-color: #ff9f03; 
} 
/*个人微信和广告合作*/ 
#floatwindow .wechat, #floatwindow .gghz { 
    background-color: #fc8b63; 
    transition: all 0.6s; 
    -moz-transition: all 0.6s; 
    -o-transition: all 0.6s; 
    -webkit-transition: all 0.6s; 
} 
#floatwindow .wechat:hover, #floatwindow .gghz:hover { 
    background-color: #f07d54; 
} 
/*微信二维码图片定位*/ 
#wxewm { 
    width: 141px; 
    height: 141px; 
    position: fixed; 
    bottom: 100px; 
    right: 71px; 
    display: none; 
} 
/*QQ群*/ 
#floatwindow .qun { 
    background-color: #87af4c; 
    transition: all 0.6s; 
    -moz-transition: all 0.6s; 
    -o-transition: all 0.6s; 
    -webkit-transition: all 0.6s; 
} 
#floatwindow .qun:hover { 
    background-color: #729c36; 
} 

注解

1.为什么不把微信二维码图片放在class="wechat"的div里？

那样的话很麻烦，因为class="wechat"的div要写position: relative;二维码图片要写position:absolute;去定位，还不如直接position: fixed;来的快。

2.为什么不把返回顶部按钮和个人QQ等按钮放在同一个盒子里？

因为返回顶部按钮在某些情况下要消失，悬浮窗位置也要发生变化，独立用jQuery操控更方便。

3.营销性网站使用怎么发挥其更好的效果？

让qq对话框在打开页面后强制弹出，详情戳文章“素材分享：jQuery右侧可隐藏QQ客服飘窗和强制弹出QQ对话框代码”，需要修改的地方已经在文章中加粗标注出来了。

为什么说适用于个人站长或博主？

用最简短的话说：为了推广和赚钱。个人QQ、个人微信还有个人技术交流群都要尽量迎合看到它并点击它的人，所以我把个人QQ和QQ群做成了点击添加的，微信做成扫码的，因为这更符合用户习惯，再者像投稿、广告合作这些站长都是希望它能在网页的某个地方一直存在的。

代码这个东西不可能写的那么完美，有一点点的小问题只要不影响效果还请不要喷我。

完整版下载链接（就是没有多余的东西，拿来直接用的）：链接：https://pan.baidu.com/s/1gjo9eHKceB3SKbxnuC7qSA     密码：p6mb 。解压时请解压到压缩包名称，这是个人习惯。