js QQ客服悬浮效果实现代码
更新时间：2014年12月12日 15:27:43 投稿：mdxy-dxy
一段js实现的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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>QQ客服悬浮特效代码_www.jb51.net</title>
</head>
<body style="height:2000px;">
<script type="text/javascript">
window.onload = window.onresize = window.onscroll = function ()
{
var oBox = document.getElementById("qqbox_zzjs");
var oLine = document.getElementById("online_lanrenzhijia");
var oMenu = document.getElementById("menu_zzjs_net");
var iScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
setTimeout(function ()
{
clearInterval(oBox.timer);
var iTop = parseInt((document.documentElement.clientHeight - oBox.offsetHeight)/2) + iScrollTop;
oBox.timer = setInterval(function ()
{
var iSpeed = (iTop - oBox.offsetTop) / 8;
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
oBox.offsetTop == iTop ? clearInterval(oBox.timer) : (oBox.style.top = oBox.offsetTop + iSpeed + "px");
}, 30)
}, 100)
oBox.onmouseover = function ()
{
this.style.width = 131 + "px";
oLine.style.display = "block";
oMenu.style.display = "none";
};
oBox.onmouseout = function ()
{
this.style.width = '';
oLine.style.display = "none";
oMenu.style.display = "block";
};
};
document.write("<style>img{border:0;}ul,li{padding:0;margin:0;}.box_lanrenzhijia {z-index:99;right:0;width:128px;height:195px;position:absolute;}.box_lanrenzhijia .press{right:0;width:36px;cursor:pointer;position:absolute;height:128px;}.box_lanrenzhijia .zzjs_net_list{left:0;width:131px;position:absolute;height:195px;background:url(images/20120321lanrenzhijia_1.gif) no-repeat left center;}.box_lanrenzhijia .zzjs_net_list ul{padding:37px 0 0 21px;}.box_lanrenzhijia .zzjs_net_list li{height:26px;margin-bottom:3px;_margin-bottom:3px; list-style-type:none;}</style><div class=\"box_lanrenzhijia\" id=\"qqbox_zzjs\"><div class=\"zzjs_net_list\" id=\"online_lanrenzhijia\" style=\"display:none;\"><ul><li><a href=\"http://wpa.qq.com/msgrd?V=1&Uin=123456789&Site=脚本之家&Menu=yes\"><img src=\"images/20111126lanrenzhijia_3.gif\" alt=\"脚本之家一号客服\"></a></li><li><a href=\"http://wpa.qq.com/msgrd?V=1&Uin=123456789&Site=脚本之家&Menu=yes\"><img src=\"images/20111126lanrenzhijia_3.gif\" alt=\"脚本之家二号客服\"></a></li><li><a href=\"http://wpa.qq.com/msgrd?V=1&Uin=123456789&Site=脚本之家&Menu=yes\"><img src=\"images/20111126lanrenzhijia_3.gif\" alt=\"脚本之家三号客服\"></a></li><li><a href=\"http://wpa.qq.com/msgrd?V=1&Uin=123456789&Site=脚本之家&Menu=yes\"><img src=\"images/20111126lanrenzhijia_3.gif\" alt=\"脚本之家四号客服\"></a></li><li><a href=\"http://wpa.qq.com/msgrd?V=1&Uin=123456789&Site=脚本之家&Menu=yes\"><img src=\"images/20111126lanrenzhijia_3.gif\" alt=\"脚本之家五号客服\"></a></li></ul></div><div id=\"menu_zzjs_net\"><img src=\"images/20111126lanrenzhijia_4.gif\" class=\"press\" alt=\"在线客服\"></div></div>");
</script>
</body>
</html>
相关文章
有时候需要点击页面任何位置都可以弹出页面效果，多用于游戏，导航类网站推广2012-09-09
jQuery弹出隐藏层的窗口特效，缺少了几个小图片，这个自己制作几个补上去吧，这不是关键的东西。2011-08-08
javascript实现的在当前窗口中漂浮框的代码，代码中有注释，需要学习的朋友可以参考下。2010-03-03
用键盘控制DIV，红色方块为键盘操作区域，您可以进行如下操作:左右控制;背景变为绿色;背景变为黄色;背景变为蓝色放大或缩小2012-12-12
隔行变色、鼠标划过变色代码，已经有不少类似的代码了，出于学习的态度，再发一个，因为每个隔行换色的写法不同。2010-10-10
js漂浮广告实现代码，实际上就是一个来回滚动的小图片，碰到边缘就返回，也是一种广告形式，需要的朋友可以收藏下2012-04-04
兼容性非常好的js右下角与漂浮广告代码，需要的朋友可以参考下。2010-11-11
纯CSS实现扑克牌效果，太牛了吧？开始我还以为是一张图片呢，后来发现代码里没有调用任何图片，顿时有点诧异，CSS果然很牛，或是作者水平比较牛？2010-09-09
漂亮的鼠标提示，带人性化缺口，在测试时候大家可改变浏览器窗口大小，可以看到缺口会根据网页的大小智能改变方向，以确保提示位置的正确性，其实由此大家可以学习到更多的JavaScript与CSs代码知识。2010-11-11
可在线编辑网页文字效果代码，点击即可编辑文字，喜欢的朋友可以参考下2013-03-03
最新评论