QQ在线客服悬浮窗，点击展开的网页代码

发布时间：2018-09-18 13:47:48 所属栏目：聚会来源：站长网

导读：QQ在线客服悬浮窗，点击展开的网页代码，其实就是QQ在线客服一样，平时会隐藏在网页的右侧，当需要时把鼠标移过去，它就自动展开了，在移走，又恢复了，实用的效果，可以用来制作在线客服。示例： !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transition

　　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>可展开和收起的在线客服代码</title> <style type="text/css"> img{border:0;} ul,li{padding:0;margin:0;} .QQbox {z-index:99;right:0;width:128px;height:128px;position:absolute;} .QQbox .press{right:0;width:36px;cursor:pointer;position:absolute;height:128px;} .QQbox .Qlist{left:0;width:131px;position:absolute;height:128px;background:url(/uploads/allimg/1107/floatServiceBj.gif) no-repeat left center;} .QQbox .Qlist ul{padding:43px 0 0 21px;} .QQbox .Qlist li{height:26px;margin-bottom:11px;_margin-bottom:7px; list-style-type:none;} </style> <script type="text/javascript"> window.onload = window.onresize = window.onscroll = function () { var oBox = document.getElementById("divQQbox"); var oLine = document.getElementById("divOnline"); var oMenu = document.getElementById("divMenu"); 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"; }; }; // 烈火網 VeryHuｏ．ＣＯM 欢迎复制,拒绝恶意采集ｌｉｅｈｕｏ．ｎｅｔ </script> </head> <body style="height:2000px;"> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />  <div class="QQbox" id="divQQbox" > <div class="Qlist" id="divOnline" style="display:none;"> <ul> <li><a href="#"><img src="/uploads/allimg/1107/floatServiceWeb.gif" alt="网页方式"></a></li> <li><a href="#"><img src="/uploads/allimg/1107/floatServiceQq.gif" alt="QQ方式"></a></li> </ul> </div> <div id="divMenu"><img src="/uploads/allimg/1107/floatService.gif" class="press" alt="在线客服"></div> </div> </body> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：重庆站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!