前两天用到在线客服浮动窗口,本来想偷个懒 网上拽下来用,发现 找到的都是table(不是table的不好啦,是某已经把浮窗切好了)的,而且结构很繁琐...只好自己写个(如果有人想看 我在资源上传了压缩文件,比较懒的人可以直接下载)
css:
<mce:style type="text/css"><!-- h5{ margin:0; padding:0; font-family:"宋体"; font-size:12px;} .kefu{ position:absolute; width:110px; height:150px; border-left:#d3d3d3 solid 1px; border-right:#d3d3d3 solid 1px; display:none;} .kefu h5{ height:25px; line-height:25px; color:#fff; text-indent:8px;} .kefu h5.title{ background:url(images/qq-title.gif) no-repeat;} .kefu h5.foot{ background:url(images/qq-foot.gif) no-repeat;} .kefu ul.qq_list{ padding:10px 0; width:110px; background-color:#fff;} .kefu ul.qq_list li{ height:28px; line-height:28px;text-indent:12px;} .kefu ul.qq_list li a{ text-decoration:none; color:#000;} .kefu ul.qq_list li img{ vertical-align:-5px;} .show_none{ display:none;} --></mce:style><style type="text/css" mce_bogus="1">h5{ margin:0; padding:0; font-family:"宋体"; font-size:12px;} .kefu{ position:absolute; width:110px; height:150px; border-left:#d3d3d3 solid 1px; border-right:#d3d3d3 solid 1px; display:none;} .kefu h5{ height:25px; line-height:25px; color:#fff; text-indent:8px;} .kefu h5.title{ background:url(images/qq-title.gif) no-repeat;} .kefu h5.foot{ background:url(images/qq-foot.gif) no-repeat;} .kefu ul.qq_list{ padding:10px 0; width:110px; background-color:#fff;} .kefu ul.qq_list li{ height:28px; line-height:28px;text-indent:12px;} .kefu ul.qq_list li a{ text-decoration:none; color:#000;} .kefu ul.qq_list li img{ vertical-align:-5px;} .show_none{ display:none;}</style>
页面代码:
<div class="kefu" id="floatWind"> <h5 class="title">在线客服QQ</h5> <ul class="qq_list"> <li><a target=blank href="tencent://message/?uin=12345678&Site=大拇指&Menu=yes" mce_href="tencent://message/?uin=12345678&Site=大拇指&Menu=yes"><img src="images/1_m.gif" mce_src="images/1_m.gif" width="20" height="20" /> 在线交谈</a></li> <li><a target=blank href="tencent://message/?uin=12345678&Site=大拇指&Menu=yes" mce_href="tencent://message/?uin=12345678&Site=大拇指&Menu=yes"><img src="images/4_m.gif" mce_src="images/4_m.gif" width="20" height="20" /> 在线交谈</a></li> <li><a target=blank href="tencent://message/?uin=12345678&Site=大拇指&Menu=yes" mce_href="tencent://message/?uin=12345678&Site=大拇指&Menu=yes"><img src="images/24_m.gif" mce_src="images/24_m.gif" width="20" height="20" /> 在线交谈</a></li> </ul> <h5 class="foot">在线客服QQ</h5> </div>
js:
document.documentElement.scrollTop = 0; var startY = parseInt(document.getElementById('floatWind').parentNode.scrollHeight); //设置初始状态 var x=780; //浮窗左边距 var y = 360; //规定top值 document.getElementById('floatWind').style.top = startY +'px'; //浮窗初始状态为其父容器底部 var speed= document.documentElement.scrollTop - Math.abs(startY - y); //与 y 距离 function move(){ document.getElementById('floatWind').style.top = (parseInt(document.getElementById('floatWind').offsetTop) + newSpeed(speed)) +'px'; document.getElementById('floatWind').style.left = (document.documentElement.scrollLeft + x) +'px'; startY = parseInt(document.getElementById('floatWind').offsetTop); if(Math.abs(speed) == 1){ window.clearInterval(a);} } function newSpeed(height){ //改变步长 speed= (Math.abs(speed)<1)?1:Math.ceil(height/2); return speed; } document.getElementById('floatWind').style.display = 'block'; var a = window.setInterval('move();',80); //加载 window.οnscrοll=function(){ window.clearInterval(a); speed = document.documentElement.scrollTop - Math.abs(startY - y); a = window.setInterval('move();',80); }
