编程 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 相关文章推荐

JavaScript的类型简单说明

Sep 03 Javascript

javascript 基础篇4 window对象，DOM

Mar 14 Javascript

JQuery与JS里submit()的区别示例介绍

Feb 17 Javascript

js实现日历可获得指定日期周数及星期几示例分享(js获取星期几)

Mar 14 Javascript

jquery实现焦点图片随机切换效果的方法

Mar 12 Javascript

在ASP.NET MVC项目中使用RequireJS库的用法示例

Feb 15 Javascript

JavaScript实现设计模式中的单例模式的一些技巧总结

May 17 Javascript

原生态js,鼠标按下后,经过了那些单元格的简单实例

Aug 11 Javascript

Vue单文件组件基础模板小结

Aug 10 Javascript

jsonp跨域获取数据的基础教程

Jul 01 Javascript

微信小程序webview实现长按点击识别二维码功能示例

Jan 24 Javascript

vue下canvas裁剪图片实例讲解

Apr 16 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