左右悬浮可分组的网站QQ在线客服代码

2024-09-05 12:22:41

字体：大中小

来源：转载

供稿：网友

QQ的线客服，以前发过一些，现在这又是一个新的版本，希望大家喜欢，用到了不少的修饰图片，本客服可对QQ进行分组，这样更有利于用户找到自己需要的那部分客服号，平时它悬浮在网页的两侧，鼠标移上时自动展开，实用方便。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>左右悬浮可分组的网站QQ在线客服代码</title><meta http-equiv="content-type" content="text/html;charset=gb2312"><style type="text/css">.qqwid{width:142px;background-image:url(/jscss/demoimg/201011/qq_bg.gif);color:#000000;}.qqwid a{text-decoration:none;}.qqwid a:link{color:#000000;}.qqwid a:visited{color:#000000;}.qqwid a:hover{color:#FF0000;}.qqwid a:active{color:#000000;}.qqwid .qqnei{margin-left:5px;margin-right:5px;line-height:25px;}.qqwid .qqnei img{margin-left:3px;margin-right:5px;vertical-align:middle;}.qqwid td{font-size:12px;height:25px;line-height:25px;}</style></head><body><div style="height:2000px;"></div><div id="leftfu" name="leftfu" style="position:absolute;left:1px;top:125px;"><table border="0" cellspacing="0" cellpadding="0">  <tr>    <td valign="top">      <table width="10" border="0" cellspacing="0" cellpadding="0" id="leftmenu">        <tr>          <td>          <img src="/d/file/p/2024/09-05/4cfade80b9ff2b2bbeaeed3288b90b62.jpg" border="0"></td>        </tr>        <tr>          <td><img src="/d/file/p/2024/09-05/ae33c944cabdd95198d2a46318c86a06.jpg" border="0" ></td>        </tr>        <tr>          <td align="right"><img src="/d/file/p/2024/09-05/38f95a83aebd40ad9d956556ee999731.jpg" border="0"></td>        </tr>      </table>    </td>  </tr></table></div><div id="rightfu" name="rightfu" style="position:absolute;right:1px;top:125px;"><table border="0" cellspacing="0" cellpadding="0">  <tr>    <td valign="top">    <div class="qqwid" id="showrightmenu_1" style="filter:alpha(opacity=80);z-index:1; display:none;" onmouseover="javascript:showrightmenuover(1);" onmouseout="javascript:showrightmenuout(1);">      <div><img src="/d/file/p/2024/09-05/cdec975d58acc1a25439522c6a4f3615.gif"></div>      <div class="qqnei">        <table border="0" cellspacing="0" cellpadding="0" style="filter:alpha(opacity=86);">          <tr>            <td><img src="/d/file/p/2024/09-05/fd9a7429c9b277955945622bb1cc83ab.gif" width="142" height="6"></div>    </div>    <div class="qqwid" id="showrightmenu_2" style="filter:alpha(opacity=80);z-index:1;margin-top:87px;display:none;"  onmouseover="javascript:showrightmenuover(2);" onmouseout="javascript:showrightmenuout(2);">      <div><img src="/d/file/p/2024/09-05/213a245dcde1bfb23a5fdf7b97613fbd.png"></div>      <div class="qqnei">        <table border="0" cellspacing="0" cellpadding="0" style="filter:alpha(opacity=86);">          <tr>            <td><img src="http://wpa.qq.com/pa?p=1:23132:17"%20height="17"%20border="0"%20align="middle">	%20%20%20%20%20%20%20%20在线客服</td>%20%20%20%20%20%20%20%20%20%20</tr>%20%20%20%20%20%20%20%20%20%20<tr>%20%20%20%20%20%20%20%20%20%20%20%20<td><img%20src="http://wpa.qq.com/pa?p=1:23132:17"%20height="17"%20border="0"%20align="middle">	%20%20%20%20%20%20%20%20在线客服</td>%20%20%20%20%20%20%20%20%20%20</tr>%20%20%20%20%20%20%20%20%20%20<tr>%20%20%20%20%20%20%20%20%20%20%20%20<td><img%20src="http://wpa.qq.com/pa?p=1:23132:17"%20height="17"%20border="0"%20align="middle">	%20%20%20%20%20%20%20%20在线客服</td>%20%20%20%20%20%20%20%20%20%20</tr>%20%20%20%20%20%20%20%20</table>%20%20%20%20%20%20</div>%20%20%20%20%20%20<div><img%20src="/jscss/demoimg/201011/qq_bottom.png" width="142" height="6"></div>    </div>    <div class="qqwid" id="showrightmenu_3" style="filter:alpha(opacity=80);z-index:1;margin-top:174px;display:none;" onmouseover="javascript:showrightmenuover(3);" onmouseout="javascript:showrightmenuout(3);">      <div><img src="/d/file/p/2024/09-05/213a245dcde1bfb23a5fdf7b97613fbd.png"></div>      <div class="qqnei">        <table border="0" cellspacing="0" cellpadding="0" style="filter:alpha(opacity=90);">          <tr>            <td><img src="/d/file/p/2024/09-05/e0bda773094dd539440b1fc497c62c6d.png" width="142" height="6"></div>      </div>    </td>    <td valign="top">      <table width="10" border="0" cellspacing="0" cellpadding="0" id="rightmenu">        <tr>          <td>          <img src="/d/file/p/2024/09-05/9b12690a5277b50b90670342fad17dec.jpg" border="0"></td>        </tr>        <tr>          <td>          <img src="/d/file/p/2024/09-05/a86fef982bc0d9fb2591be1ab1b8bce2.jpg" border="0" ></td>        </tr>        <tr>          <td>          <img src="/d/file/p/2024/09-05/98f0367353488d85125f423a13a19e9c.jpg" border="0"></td>        </tr>        <tr>          <td align="left">          <img src="/d/file/p/2024/09-05/38f95a83aebd40ad9d956556ee999731.jpg" border="0"></td>        </tr>      </table>    </td>  </tr></table></div><script event="fscommand()" for="eccoolad" type="text/javascript"></script><script type="text/javascript">//leftfu.style.visibility='hidden'; //sorollDiv1.style.visibility='hidden';var lastScrollY=0;var setup=0.02function heartBeat(){ 	diffY=document.documentElement.scrollTop; 	percent=setup*(diffY-lastScrollY); 	if(percent>0)percent=Math.ceil(percent); 	else percent=Math.floor(percent); 	document.getElementById("leftfu").style.top=parseInt(document.getElementById("leftfu").style.top)+percent+"px";	document.getElementById("rightfu").style.top=parseInt(document.getElementById("rightfu").style.top)+percent+"px";	lastScrollY=lastScrollY+percent; }window.setInterval("heartBeat()",1);function divclose(name){	document.getElementById(name).style.visibility='hidden';}	function showqqdivover(i){	document.getElementById("showqq"+i).style.display="block";}function showqqdivout(i){	document.getElementById("showqq"+i).style.display="none";}function showleftmenuover(id){	document.getElementById("showleftmenu_"+id).style.display="block";}function showleftmenuout(id){	document.getElementById("showleftmenu_"+id).style.display="none";}function showrightmenuover(id){	document.getElementById("showrightmenu_"+id).style.display="block";}function showrightmenuout(id){	document.getElementById("showrightmenu_"+id).style.display="none";}</script></body></html>

上一篇：经典的Js漂浮广告代码，物理弹性

下一篇：用jQuery实现最简单的多行滚屏效果,带有上下控制按钮