编程 Javascript

左右悬浮可分组的网站QQ在线客服代码(可谓经典)

Posted in Javascript onDecember 21, 2012

<!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><a href="#" onclick="window.open('http://#','','width=800,height=600,top=0,left=100,status=yes')"> 
<img src="/jscss/demoimg/201011/qq_Asall.jpg" border="0"></a></td> 
</tr> 
<tr> 
<td><a target="_blank" href="http://sighttp.qq.com/authd?IDKEY=534e023a34d2ce9548a6e7e0f92cd59c2bd5c36a2f7f25d6"><img src="/jscss/demoimg/201011/qq_Online.jpg" border="0" ></a></td> 
</tr> 
<tr> 
<td align="right"><a href="javascript:" onclick="javascript:divclose('leftmenu');"><img src="/jscss/demoimg/201011/close.jpg" border="0"></a></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="/jscss/demoimg/201011/qq_top.gif"></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:539680:17" height="17" border="0" align="middle"> 
<a href="http://wpa.qq.com/msgrd?v=3&uin=539680&site=#&menu=yes" target="_blank">在线客服</a></td> 
</tr> 
<tr> 
<td><img src="http://wpa.qq.com/pa?p=1:539680:17" height="17" border="0" align="middle"> 
<a href="http://wpa.qq.com/msgrd?v=3&uin=539680&site=#&menu=yes" target="_blank">在线客服</a></td> 
</tr> 
<tr> 
<td><img src="http://wpa.qq.com/pa?p=1:539680:17" height="17" border="0" align="middle"> 
<a href="http://wpa.qq.com/msgrd?v=3&uin=539680&site=#&menu=yes" target="_blank">在线客服</a></td> 
</tr> 
<tr> 
<td><img src="http://wpa.qq.com/pa?p=1:539680:17" height="17" border="0" align="middle"> 
<a href="http://wpa.qq.com/msgrd?v=3&uin=539680&site=#&menu=yes" target="_blank">在线客服</a></td> 
</tr> 
<tr> 
<td><img src="http://wpa.qq.com/pa?p=1:539680:17" height="17" border="0" align="middle"> 
<a href="http://wpa.qq.com/msgrd?v=3&uin=539680&site=#&menu=yes" target="_blank">在线客服</a></td> 
</tr> 
<tr> 
<td><img src="http://wpa.qq.com/pa?p=1:539680:17" height="17" border="0" align="middle"> 
<a href="http://wpa.qq.com/msgrd?v=3&uin=539680&site=#&menu=yes" target="_blank">在线客服</a></td> 
</tr> 
<tr> 
<td><img src="http://wpa.qq.com/pa?p=1:539680:17" height="17" border="0" align="middle"> 
<a href="http://wpa.qq.com/msgrd?v=3&uin=539680&site=#&menu=yes" target="_blank">在线客服</a></td> 
</tr> 
<tr> 
<td><img src="http://wpa.qq.com/pa?p=1:539680:17" height="17" border="0" align="middle"> 
<a href="http://wpa.qq.com/msgrd?v=3&uin=539680&site=#&menu=yes" target="_blank">在线客服</a></td> 
</tr> 
<tr> 
<td><img src="http://wpa.qq.com/pa?p=1:539680:17" height="17" border="0" align="middle"> 
<a href="http://wpa.qq.com/msgrd?v=3&uin=539680&site=#&menu=yes" target="_blank">在线客服</a></td> 
</tr> 
<tr> 
<td><img src="http://wpa.qq.com/pa?p=1:539680:17" height="17" border="0" align="middle"> 
<a href="http://wpa.qq.com/msgrd?v=3&uin=539680&site=#&menu=yes" target="_blank">在线客服</a></td> 
</tr> 
<tr> 
<td><img src="http://wpa.qq.com/pa?p=1:539680:17" height="17" border="0" align="middle"> 
<a href="http://wpa.qq.com/msgrd?v=3&uin=539680&site=#&menu=yes" target="_blank">在线客服</a></td> 
</tr> 
<tr> 
<td><img src="http://wpa.qq.com/pa?p=1:539680:17" height="17" border="0" align="middle"> 
<a href="http://wpa.qq.com/msgrd?v=3&uin=539680&site=#&menu=yes" target="_blank">在线客服</a></td> 
</tr> 
<tr> 
<td><img src="http://wpa.qq.com/pa?p=1:539680:17" height="17" border="0" align="middle"> 
<a href="http://wpa.qq.com/msgrd?v=3&uin=539680&site=#&menu=yes" target="_blank">在线客服</a></td> 
</tr> 
<tr> 
<td><img src="http://wpa.qq.com/pa?p=1:539680:17" height="17" border="0" align="middle"> 
<a href="http://wpa.qq.com/msgrd?v=3&uin=539680&site=#&menu=yes" target="_blank">在线客服</a></td> 
</tr> 
<tr> 
<td><img src="http://wpa.qq.com/pa?p=1:539680:17" height="17" border="0" align="middle"> 
<a href="http://wpa.qq.com/msgrd?v=3&uin=539680&site=#&menu=yes" target="_blank">在线客服</a></td> 
</tr> 
<tr> 
<td><img src="http://wpa.qq.com/pa?p=1:539680:17" height="17" border="0" align="middle"> 
<a href="http://wpa.qq.com/msgrd?v=3&uin=539680&site=#&menu=yes" target="_blank">在线客服</a></td> 
</tr> 
<tr> 
<td><img src="http://wpa.qq.com/pa?p=1:539680:17" height="17" border="0" align="middle"> 
<a href="http://wpa.qq.com/msgrd?v=3&uin=539680&site=#&menu=yes" target="_blank">在线客服</a></td> 
</tr> 
</table> 
</div> 
<div><img src="/jscss/demoimg/201011/qq_bottom.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="/jscss/demoimg/201011/qq_top.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:539680:17" height="17" border="0" align="middle"> 
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=539680&site=#&menu=yes">在线客服</a></td> 
</tr> 
<tr> 
<td><img src="http://wpa.qq.com/pa?p=1:539680:17" height="17" border="0" align="middle"> 
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=539680&site=#&menu=yes">在线客服</a></td> 
</tr> 
<tr> 
<td><img src="http://wpa.qq.com/pa?p=1:539680:17" height="17" border="0" align="middle"> 
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=539680&site=#&menu=yes">在线客服</a></td> 
</tr> 
</table> 
</div> 
<div><img src="/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="/jscss/demoimg/201011/qq_top.png"></div> 
<div class="qqnei"> 
<table border="0" cellspacing="0" cellpadding="0" style="filter:alpha(opacity=90);"> 
<tr> 
<td><img src="http://wpa.qq.com/pa?p=1:539680:17" height="17" border="0" align="middle"> 
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=539680&site=#&menu=yes">在线客服</a></td> 
</tr> 
<tr> 
<td><img src="http://wpa.qq.com/pa?p=1:539680:17" height="17" border="0" align="middle"> 
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=539680&site=#&menu=yes">在线客服</a></td> 
</tr> 
<tr> 
<td><img src="http://wpa.qq.com/pa?p=1:539680:17" height="17" border="0" align="middle"> 
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=539680&site=#&menu=yes">在线客服</a></td> 
</tr> 
<tr> 
<td><img src="http://wpa.qq.com/pa?p=1:539680:17" height="17" border="0" align="middle"> 
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=539680&site=#&menu=yes">在线客服</a></td> 
</tr> 
<tr> 
<td><img src="http://wpa.qq.com/pa?p=1:539680:17" height="17" border="0" align="middle"> 
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=539680&site=#&menu=yes">在线客服</a></td> 
</tr> 
<tr> 
<td><img src="http://wpa.qq.com/pa?p=1:539680:17" height="17" border="0" align="middle"> 
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=539680&site=#&menu=yes">在线客服</a></td> 
</tr> 
</table> 
</div> 
<div><img src="/jscss/demoimg/201011/qq_bottom.png" width="142" height="6"></div> 
</div> 
</td> 
<td valign="top"> 
<table width="10" border="0" cellspacing="0" cellpadding="0" id="rightmenu"> 
<tr> 
<td><a href="javascript:" onmouseover="javascript:showrightmenuover(1);" onmouseout="javascript:showrightmenuout(1);"> 
<img src="/jscss/demoimg/201011/qq_Atuo.jpg" border="0"></a></td> 
</tr> 
<tr> 
<td><a href="javascript:" onmouseover="javascript:showrightmenuover(2);" onmouseout="javascript:showrightmenuout(2);"> 
<img src="/jscss/demoimg/201011/qq_Adns.jpg" border="0" ></a></td> 
</tr> 
<tr> 
<td><a href="javascript:" onmouseover="javascript:showrightmenuover(3);" onmouseout="javascript:showrightmenuout(3);"> 
<img src="/jscss/demoimg/201011/qq_Beian.jpg" border="0"></a></td> 
</tr> 
<tr> 
<td align="left"><a href="javascript:" onclick="javascript:divclose('rightmenu');"> 
<img src="/jscss/demoimg/201011/close.jpg" border="0"></a></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.02 
function 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>

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JS实现控制文本框的内容

Jul 10 Javascript

javascript封装addLoadEvent实现页面同时加载执行多个函数的方法

Jul 25 Javascript

Chrome不支持showModalDialog模态对话框和无法返回returnValue问题的解决方法

Oct 30 Javascript

JS脚本加载后执行相应回调函数的操作方法

Feb 28 Javascript

vue的diff算法知识点总结

Mar 29 Javascript

js中split()方法得到的数组长度问题

Jul 19 Javascript

JS使用canvas中的measureText方法测量字体宽度示例

Feb 02 Javascript

inquirer.js一个用户与命令行交互的工具详解

May 18 Javascript

layui table 列宽百分比显示的实现方法

Sep 28 Javascript

angular异步验证防抖踩坑实录

Dec 01 Javascript

原生JS实现留言板

Mar 26 Javascript

Vue Render函数创建DOM节点代码实例

Jul 08 Javascript

JS弹出窗口代码大全(详细整理)

Dec 21 #Javascript

mailto的使用技巧分享

Dec 21 #Javascript

一个页面放2段图片滚动代码出现冲突的问题如何解决

Dec 21 #Javascript

TextArea设置MaxLength属性最大输入值的js代码

Dec 21 #Javascript

JQuery实现简单时尚快捷的气泡提示插件

Dec 20 #Javascript

JQuery实现简单验证码提示解决方案

Dec 20 #Javascript

javascript的原生方法获取数组中的最大(最小)值

Dec 19 #Javascript