<html lang="zh-cn">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="">
<meta name="description" content="">
<meta name="keywords" content="">
<title>demo</title>
<link href="file/" rel="stylesheet" media="screen" type="text/css">
<script src="file/jquery-1.10."></script>
<script>
$(function(){
(function(){
//ie6特别处理
if( ![1,] && !new XMLHttpRequest()){
$('.leftToolBar').css({
'right':5,
'top': ($(window).height() - $('.leftToolBar').outerHeight())/2
});
//窗口改变事件
$(window).on('resize scroll',function(){
$('.leftToolBar').css({
'right': 5,
'top' : ($(window).height() - $('.leftToolBar').outerHeight())/2+ $(window).scrollTop()
});
});
}else{
$('.leftToolBar').css({
'right':5,
'top': ($(window).height() - $('.leftToolBar').outerHeight())/2
});
//窗口改变事件
$(window).on('resize scroll',function(){
$('.leftToolBar').css({
'right': 5,
'top' : ($(window).height() - $('.leftToolBar').outerHeight())/2
});
});
}
//over事件
$('.gzh').each(function(_index){
$(this).on({
mouseover:function(){
switch(_index)
{
case 0:
$(this).find('.qr_tooldiv,.qt_tooldiv').css('display','block'); $('.qr_tooldiv2').css('display','none');
break;
case 1:
$('.qr_tooldiv2').css('display','block');
$('.qr_tooldiv,.qt_tooldiv').css('display','none');
break;
default:
return ;
}
},
mouseout:function(){
switch(_index)
{
case 0:
$(this).find('.qr_tooldiv,.qt_tooldiv').css('display','none'); $('.qr_tooldiv2').css('display','none');
break;
case 1:
$('.qr_tooldiv2').css('display','none');
$('.qr_tooldiv,.qt_tooldiv').css('display','none');
break;
default:
return ;
}
}
})
})
})();
})
</script>
</head>
<body style="height:5000px;">
<div class="leftToolBar">
<div class="gzh">
<div class="tooldiv" >
<img src="file/left_icon01.png" class="k_png">
<p>微信号</p>
<div style="display: none;" class="qr_tooldiv">
<img alt="" src="file/qr_home.png"><p>微信扫码，获取产品帮助</p>
</div>
<div style="display: none;" class="qt_tooldiv">
<img alt="" src="file/qt_home.png">
<p>微信扫码，加入微信交流群</p>
</div>
</div>
</div>
<div class="gzh">
<div >
<div class="tooldiv">
<img title="" alt="" src="file/left_icon02.png" class="k_png">
<p>用户QQ群</p>
</div>
<div style="display:none" class="qr_tooldiv2">
<div>请加企微产品咨询群</div>
<div class="qq1"><p>群10：<a target="_blank" href="file/" alt="" title="" border="0"></a></p><span>群10: 459020424</span></div>
<div class="qq1"><p>群9：467665662（已满）</p></div>
<div class="qq1"><p>群8：263463（已满）</p></div>
<div class="qq1"><p>群7：417040（已满）</p></div>
<div class="qq1"><p>群6：245576542（已满）</p></div>
<div class="qq1"><p>群5：437937934（已满）</p></div>
<div class="qq1"><p>群4：57650844（已满）</p></div>
<div class="qq1"><p>群3：154835442（已满）</p></div>
<div class="qq1"><p>群2：220629533（已满）</p></div>
<div class="qq1"><p>群1：53863114（已满）</p></div>
</div></div></div>
</body></html>
<style>
body,ul,li,ol,p,dl,dd,dt,h1,h2,h3,h4,h5,h6,form,fieldset,input,textarea,p,blockquote,th,td{ margin:0; padding:0; }
body{ font-size: 14px; font-family:Arial,"Microsoft YaHei","Helvetica Neue",Helvetica,"Hiragino Sans GB",sans-serif; line-height: 1.5; color: #666666; word-break: normal; word-wrap: break-word; }
h1,h2,h3,h4,h5,h6{ font-size: 100%; font-weight: normal; }
ol,ul { list-style: none; }
img{ border:none; max-width: 100%; }
a{ text-decoration: none; color: #666; outline: none; }
a:hover,a:focus{ outline: none; }
{ margin-top: 10px; }
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
*:before,
*:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
/*在线客服*/
.leftToolBar { position: fixed; _position:absolute; right: 5px; top:0; }
.tooldiv { background: none repeat scroll 0 0 #1f96b8; border-bottom-left-radius: 10px; border-top-left-radius: 10px; color: #ffffff; cursor: pointer; height: auto; margin-bottom: 10px; position: relative; text-align: center; width: 85px; }
.leftToolBar a { color: #f87b00; }
.qr_tooldiv { background: none repeat scroll 0 0 #ffffff; border-radius: 10px; bottom: 0; color: #666; left: -223px; padding: 10px; position: absolute; box-shadow: 0 0 8px #000}
.leftToolBar .qr_tooldiv2 { background: none repeat scroll 0 0 #fdfdfd; border-radius: 5px; box-shadow: 0 0 8px #ccc; color: #333333; left: -207px; position: absolute; top: -170px; padding: 15px; }
.qt_tooldiv > img,.qr_tooldiv > img{ width: 190px; height: 190px; }
.leftToolBar p { margin: -5px 0 0 0; }
.qt_tooldiv,.qr_tooldiv,.qr_tooldiv2{ border-radius: 5px; color: #666; padding: 10px; margin: 5px 0; box-shadow: 0 0 8px #ccc; border: 1px solid #ccc}
#gongzhonghao, #gongzhonghao2{ border-radius:0; width: 80px; padding: 10px 0; font-size:12px; }
.tooldiv{ width: 100%; background:none; }
.qq1,.qq3 { clear: both; margin-top: 5px; }
.qq1 > p { font-size: 14px; height: 25px; line-height: 25px; margin: 0; vertical-align: top; }
.qq1 img { vertical-align: middle; }
.qq1 > span,.qq2 > span,.qq3 > span{ color: #999; font-size: 12px; margin-left: 30px; }
.qq2 > p,.qq3 >p{ margin: 0; }
.qq2 img { vertical-align: middle; }
.qt_tooldiv { background: none repeat scroll 0 0 #ffffff; border-radius: 5px; top: 82px; left: -223px; padding: 10px; position: absolute; box-shadow: 0 0 8px #ccc}
.e95e45{ color: #e95e45; }
#nav_wrap span { background: none repeat scroll 0 0 red; border-radius: 3px; color: white; font-size: 10px; height: 18px; left: 18px; line-height: 18px; position: absolute; text-align: center; top: 17px; width: 36px; }
#nav_wrap { position: relative; padding-left: 50px; }
#navbar { background: none repeat scroll 0 0 #f8f8f8; border-radius: 0; position: fixed; top: 0; width: 100%; z-index: 10; }
.nav_fixed { position: fixed; top: 0; width: 100%; z-index: 9; }
#nav_wrap{ width: 100%; }
#gongzhonghao_wrap,#gongzhonghao2_wrap { width: 100px; background: url(../images/) repeat; }
#gongzhonghao { background: none repeat scroll 0 0 #1f96b8; color: #ffffff; cursor: pointer; height: 80px; left: 15px; margin-bottom: 10px; padding-top: 15px; position: relative; text-align: center; width: 85px; }
#gongzhonghao2 { background: none repeat scroll 0 0 #1f96b8; color: #ffffff; height: 80px; left: 15px; margin-bottom: 10px; padding-top: 15px; position: relative; text-align: center; width: 85px; display: block; }
</style>