医疗网站上右侧漂亮的浮动窗口，包含在线咨询，QQ咨询，来院路线，微信二维码，返回顶部功能。

打包下载：医疗网站上右侧漂亮的浮动窗口

效果截图：

<title>医疗网站上右侧漂亮的浮动窗口</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<style>
body {height:3000px;background:#DDD;}
.fix_box {
    width: 88px;
    height: auto;
    position: fixed;
    top: 160px;
    left: 50%;
    margin-left: 505px;
    background: #f2f2f2;
    font-family: "微软雅黑";
    text-align: center;
}

.fix_box .ftit {
    display: block;
    height: 32px;
    background: #4f3a2b;
    font-size: 16px;
    color: #fff;
    text-align: center;
    line-height: 32px;
    margin-bottom: 5px;
}

.fix_box .fix_zx {
    background: url(/demo/20141008/01/images/fix.gif) no-repeat 0 0px;
    display: block;
    height: 81px;
    font-size: 12px;
    overflow: hidden;
    position: relative
}

.fix_box .fix_qq {
    background: url(/demo/20141008/01/images/fix.gif) no-repeat 0 -81px;
    display: block;
    height: 76px;
    font-size: 12px;
    overflow: hidden;
    position: relative
}

.fix_box .fix_ph {
    background: url(/demo/20141008/01/images/fix.gif) no-repeat 0 -157px;
    display: block;
    height: 69px;
    font-size: 12px;
    overflow: hidden;
    position: relative
}

.fix_box .fix_zx:hover {
    background: url(/demo/20141008/01/images/fix.gif) no-repeat -88px 0px;
    display: block;
    height: 81px;
    overflow: hidden;
}

.fix_box .fix_qq:hover {
    background: url(/demo/20141008/01/images/fix.gif) no-repeat -88px -81px;
    display: block;
    height: 76px;
    overflow: hidden;
}

.fix_box .fix_ph:hover {
    background: url(/demo/20141008/01/images/fix.gif) no-repeat -88px -157px;
    display: block;
    height: 69px;
    overflow: hidden;
}

.fix_box .weix {
    background: url(/demo/20141008/01/images/fix.gif) no-repeat 0 -226px;
    display: block;
    height: 101px;
    overflow: hidden;
    position: relative
}

.fix_box .fix_rolltop {
    background: url(/demo/20141008/01/images/fix.gif) no-repeat 0 -323px;
    display: block;
    height: 30px;
}

.fix_box p {
    position: absolute;
    top: 52px;
    left: 0;
    text-align: center;
    width: 88px;
    padding: 0;
    margin: 0
}
.fix_box .fix_zx p{ top:55px;}
.fix_box .fix_ph p{ top:45px;}
.fix_box .weix b {
    position: absolute;
    bottom: 3px;
    left: 0;
    text-align: center;
    color: #666; font-size:14px;
    width: 88px;
}

.fix_box a {
    color: #666;
}

.fix_box a:hover {
    color: #f30
}
.fix_box small{ font-size:12px; font-style:normal; background:#ec0b1b; color:#fff; width:17px; height:17px; border-radius:8px; position:absolute; top:42px; left:58px;}


</style>
<script>
$(function(){	
	var number = parseInt(Math.random() * 80) + 5;	
	document.getElementById("num").innerHTML = number;
	
	$("#rolltop").hide();
	$(window).scroll(function(){
		if (document.documentElement && document.documentElement.scrollTop){hsro = document.documentElement.scrollTop;} 
		else if (document.body) {hsro = document.body.scrollTop;}
		if(hsro>0){$("#rolltop").fadeIn("slow");}
		else{$("#rolltop").hide();}
	});		
});
</script>

<div class="fix_box">
<span class="ftit">快捷服务</span>
<a target="_blank" class="fix_zx" href="#"><p>在线咨询</p></a>
<a target="_blank" class="fix_qq" href="#"><p>QQ咨询</p></a>
<a target="_blank" class="fix_ph" href="#"><p>来院路线</p></a>
<span class="weix"><b>官方微信</b></span>
<a style="display: none; " href="#" id="rolltop" class="fix_rolltop"></a>
<small id="num">34</small>
</div>