编程 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实现UTF8编码转换成gb2312编码

Dec 22 Javascript

javascript中RegExp保留小数点后几位数的方法分享

Aug 13 Javascript

JQuery简单实现锚点链接的平滑滚动

May 03 Javascript

购物车前端开发（jQuery和bootstrap3）

Aug 27 Javascript

bootstrap datepicker限定可选时间范围实现方法

Sep 28 Javascript

jQuery获取table下某一行某一列的值实现代码

Apr 07 jQuery

node.js实现登录注册页面

Apr 08 Javascript

纯原生js实现贪吃蛇游戏

Apr 16 Javascript

jquery 实现拖动文件上传加载进度条功能

Mar 18 jQuery

Vue-router 切换组件页面时进入进出动画方法

Sep 01 Javascript

vue-cli3搭建项目的详细步骤

Dec 05 Javascript

JavaScript中filter的用法实例分析

Feb 27 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