首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 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>

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

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

Javascript 相关文章推荐
个人总结的一些关于String、Function、Array的属性和用法
Jan 10 Javascript
jQuery Study Notes学习笔记 (二)
Aug 04 Javascript
浅析JQuery UI Dialog的样式设置问题
Dec 18 Javascript
JavaScript常用脚本汇总（一）
Mar 04 Javascript
Perl Substr()函数及函数的应用
Dec 16 Javascript
原生JS简单实现ajax的方法示例
Nov 29 Javascript
浅谈js中用$(#ID)来作为选择器的问题(id重复的时候)
Feb 14 Javascript
jQuery事件与动画基础详解
Feb 23 Javascript
微信小程序之发送短信倒计时功能
Aug 30 Javascript
vue 基于element-ui 分页组件封装的实例代码
Dec 10 Javascript
JQuery的加载和选择器用法简单示例
May 13 jQuery
Element实现表格嵌套、多个表格共用一个表头的方法
May 09 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
逻辑函数(1) 数据合并(1) pongo2(1) 连接查询(1) Carbon(1) 优先队列(1) 动态代理(1) element-ui(1) 模板引擎(1) 复合索引(1)
You might like
咖啡是不是喝了会上瘾？咖啡是必须品吗！
2021/03/04 新手入门
PHP下通过QRCode类库创建中间带网站LOGO的二维码
2014/07/12 PHP
PHP 中 Orientation 属性判断上传图片是否需要旋转
2015/10/16 PHP
php+jQuery ajax实现的实时刷新显示数据功能示例
2019/09/12 PHP
Jquery操作Select 简单方便 一个js插件搞定
2009/11/12 Javascript
基于jQuery实现下拉框
2014/11/24 Javascript
jQuery调取jSon数据并展示的方法
2015/01/29 Javascript
JavaScript实现select添加option
2015/07/03 Javascript
JavaScript 巧学巧用
2017/05/23 Javascript
JavaScript对JSON数组简单排序操作示例
2019/01/31 Javascript
基于layui table返回的值的多级嵌套的解决方法
2019/09/19 Javascript
vue实现整屏滚动切换
2020/06/29 Javascript
vue+swiper实现左右滑动的测试题功能
2020/10/30 Javascript
[06:30]DOTA2英雄梦之声_第15期_死亡先知
2014/06/21 DOTA
python中的对象拷贝示例 python引用传递
2014/01/23 Python
java直接调用python脚本的例子
2014/02/16 Python
python使用PIL缩放网络图片并保存的方法
2015/04/24 Python
Python实现字符串反转的常用方法分析【4种方法】
2017/09/30 Python
Python3.6安装及引入Requests库的实现方法
2018/01/24 Python
使用python装饰器计算函数运行时间的实例
2018/04/21 Python
Flask框架使用DBUtils模块连接数据库操作示例
2018/07/20 Python
python读取图片并修改格式与大小的方法
2018/07/24 Python
pybind11在Windows下的使用教程
2019/07/04 Python
使用Pandas对数据进行筛选和排序的实现
2019/07/29 Python
使用Matplotlib 绘制精美的数学图形例子
2019/12/13 Python
Django media static外部访问Django中的图片设置教程
2020/04/07 Python
HTML5中的音频和视频媒体播放元素小结
2016/01/29 HTML / CSS
上海雨人软件技术开发有限公司测试题
2015/07/14 面试题
什么是静态路由？什么是动态路由？各自的特点是什么？
2015/09/16 面试题
课外活动总结范文
2014/07/09 职场文书
坚守艰苦奋斗精神坚决反对享乐主义整改措施
2014/09/17 职场文书
公司党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
2016大学军训心得体会
2016/01/11 职场文书
聊聊pytorch测试的时候为何要加上model.eval()
2021/05/23 Python
mysql sum(if())和count(if())的用法说明
2022/01/18 MySQL
方法汇总：Python 安装第三方库常用
2022/04/26 Python