网页上漂浮的客服代码(漂浮框架兼容各大浏览器
2015-05-06 17:51
260 查看
<!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> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> <style type="text/css"> .kfoutbox{position:absolute;z-index:10000;right:5px;margin:0px;width:80px;height:150px;background:#ff0000;} </style> </head> <body style="margin:0px;padding:0px;font-size:12px;"> <div style="margin:0px auto;padding-top:200px;width:980px;height:800px;text-align:center;background:#f2f2f2;"> 这里是网页的内容区<br> <a href="http://www.qhgzgw.com//">琼花古筝官网</a></div> <div id="kfoutbox" class="kfoutbox"> <span id="kfboxclose" style="color:#ffffff">关闭按钮</span></div> <script language="javascript"> var default_top_ps = 100; var evans_agt = navigator.userAgent.toLowerCase(); var evans_ie = ((evans_agt.indexOf("msie") != -1) && (evans_agt.indexOf("opera") == -1) && (evans_agt.indexOf("omniweb") == -1)); var evans_mymovey = new Number(); function evans_IeTrueBody() { return (document.compatMode && document.compatMode != "BackCompat") ? document.documentElement: document.body } function evans_GetScrollTop() { return evans_ie ? evans_IeTrueBody().scrollTop: window.pageYOffset } function evans_heartBeat() { evans_diffY = evans_GetScrollTop(); evans_mymovey += Math.floor((evans_diffY - document.getElementById('kfoutbox').style.top.replace("px", "") + default_top_ps) * 0.1); document.getElementById('kfoutbox').style.top = evans_mymovey + "px" } var evans_tmpintval = window.setInterval("evans_heartBeat()", 1); if (document.getElementById('kfboxclose')) { document.getElementById('kfboxclose').onclick = function() { window.clearInterval(evans_tmpintval); document.getElementById('kfoutbox').style.display = 'none' } } var popupdelay = 0; var maxpoptimes = 3; var prepoptime = '10'; function Tong_MoveDiv() { this.Move = function(Id, Evt, T) { if (Id == "") { return } var o = document.getElementById(Id); if (!o) { return } evt = Evt ? Evt: window.event; o.style.position = "absolute"; o.style.zIndex = 200; var obj = evt.srcElement ? evt.srcElement: evt.target; var w = o.offsetWidth; var h = o.offsetHeight; var l = o.offsetLeft; var t = o.offsetTop; var div = document.createElement("DIV"); document.body.appendChild(div); div.style.cssText = "filter:alpha(Opacity=10,style=0);opacity:0.2;width:" + w + "px;height:" + h + "px;top:" + t + "px;left:" + l + "px;position:absolute;background:#000"; div.setAttribute("id", Id + "temp"); this.Move_OnlyMove(Id, evt, T) }; this.Move_OnlyMove = function(Id, Evt, T) { var o = document.getElementById(Id + "temp"); if (!o) { return } var evt = Evt ? Evt: window.event; var relLeft = evt.clientX - o.offsetLeft; var relTop = evt.clientY - o.offsetTop; if (!window.captureEvents) { o.setCapture() } else { window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP) } document.onmousemove = function(e) { if (!o) { return } e = e ? e: window.event; var bh = Math.max(document.body.scrollHeight, document.body.clientHeight, document.body.offsetHeight, document.documentElement.scrollHeight, document.documentElement.clientHeight, document.documentElement.offsetHeight); var bw = Math.max(document.body.scrollWidth, document.body.clientWidth, document.body.offsetWidth, document.documentElement.scrollWidth, document.documentElement.clientWidth, document.documentElement.offsetWidth); var sbw = 0; if (document.body.scrollWidth < bw) sbw = document.body.scrollWidth; if (document.body.clientWidth < bw && sbw < document.body.clientWidth) sbw = document.body.clientWidth; if (document.body.offsetWidth < bw && sbw < document.body.offsetWidth) sbw = document.body.offsetWidth; if (document.documentElement.scrollWidth < bw && sbw < document.documentElement.scrollWidth) sbw = document.documentElement.scrollWidth; if (document.documentElement.clientWidth < bw && sbw < document.documentElement.clientWidth) sbw = document.documentElement.clientWidth; if (document.documentElement.offsetWidth < bw && sbw < document.documentElement.offsetWidth) sbw = document.documentElement.offsetWidth; if (e.clientX - relLeft <= 0) { o.style.left = 0 + "px" } else if (e.clientX - relLeft >= bw - o.offsetWidth - 2) { o.style.left = (sbw - o.offsetWidth - 2) + "px" } else { o.style.left = e.clientX - relLeft + "px" } if (e.clientY - relTop <= 1) { o.style.top = 1 + "px" } else if (e.clientY - relTop >= bh - o.offsetHeight - 30) { o.style.top = (bh - o.offsetHeight) + "px" } else { o.style.top = e.clientY - relTop + "px" } }; document.onmouseup = function() { if (!o) return; if (!window.captureEvents) { o.releaseCapture() } else { window.releaseEvents(Event.MOUSEMOVE | Event.MOUSEUP) } var o1 = document.getElementById(Id); if (!o1) { return } var l0 = o.offsetLeft; var t0 = o.offsetTop; var l = o1.offsetLeft; var t = o1.offsetTop; Kf54MyMove.Move_e(Id, l0, t0, l, t, T); document.body.removeChild(o); o = null } }; this.Move_e = function(Id, l0, t0, l, t, T) { if (typeof(window["ct" + Id]) != "undefined") { clearTimeout(window["ct" + Id]) } var o = document.getElementById(Id); if (!o) return; var sl = st = 8; var s_l = Math.abs(l0 - l); var s_t = Math.abs(t0 - t); if (s_l - s_t > 0) { if (s_t) { sl = Math.round(s_l / s_t) > 8 ? 8 : Math.round(s_l / s_t) * 6 } else { sl = 0 } } else { if (s_l) { st = Math.round(s_t / s_l) > 8 ? 8 : Math.round(s_t / s_l) * 6 } else { st = 0 } } if (l0 - l < 0) { sl *= -1 } if (t0 - t < 0) { st *= -1 } if (Math.abs(l + sl - l0) < 52 && sl) { sl = sl > 0 ? 2 : -2 } if (Math.abs(t + st - t0) < 52 && st) { st = st > 0 ? 2 : -2 } if (Math.abs(l + sl - l0) < 16 && sl) { sl = sl > 0 ? 1 : -1 } if (Math.abs(t + st - t0) < 16 && st) { st = st > 0 ? 1 : -1 } if (s_l == 0 && s_t == 0) { return } if (T) { o.style.left = l0 + "px"; o.style.top = t0 + "px"; return } else { if (Math.abs(l + sl - l0) < 2) { o.style.left = l0 + "px" } else { o.style.left = l + sl + "px" } if (Math.abs(t + st - t0) < 2) { o.style.top = t0 + "px" } else { o.style.top = t + st + "px" } window["ct" + Id] = window.setTimeout("Kf54MyMove.Move_e('" + Id + "', " + l0 + " , " + t0 + ", " + (l + sl) + ", " + (t + st) + "," + T + ")", 1) } } }; </script> </body> </html>
相关文章推荐
- >网站客服漂浮框架(兼容各大浏览器)
- 不用js多浏览器兼容纯DIV/CSS对联漂浮广告代码
- 网页上漂浮的客服代码
- 网页防复制,禁止文字选中,禁止右键菜单js代码,兼容大部分浏览器方法
- 兼容各大浏览器带关闭按钮的漂浮多组图片广告代码
- JS网页播放声音实现代码兼容各种浏览器
- js复制网页内容并兼容各主流浏览器的代码
- 兼容各大浏览器带关闭按钮的漂浮多组图片广告代码
- js右下角与漂浮广告代码(兼容多浏览器)
- JS网页播放声音实现代码兼容各种浏览器
- 不用js多浏览器兼容纯DIV/CSS对联漂浮广告代码
- 兼容所有浏览器的js关闭当前网页代码
- js复制网页内容并兼容各主流浏览器的代码
- js右下角与漂浮广告代码(兼容多浏览器)
- js框架jquery实现幸运大转盘抽奖程序代码,兼容多种浏览器
- Enter回车切换输入焦点实现思路与代码兼容各大浏览器
- 如何使你的网页兼容各种浏览器
- 编写跨浏览器兼容的 CSS 代码的金科玉律
- 编写跨浏览器兼容的CSS代码的金科玉律
- 浏览器兼容问题与解决方法总汇(一行代码解决浏览器兼容问题)