js QQ客服懸浮效果實現代碼

2024-05-06 16:11:56

字體：大中小

來源：轉載

供稿：網友

一段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.survivalescaperooms.com</title>

</head>

<body style="height:2000px;">

<script type="text/javascript">

windowwindow.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;

iSpeediSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);

oBox.offsetTop == iTop ? clearInterval(oBox.timer) : (oBoxoBox.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>