网页上漂浮的客服代码（漂浮框架兼容各大浏览器

最新推荐文章于 2022-12-04 10:47:16 发布
最新推荐文章于 2022-12-04 10:47:16 发布
阅读量231 收藏
点赞数
文章标签： xhtml javascript ViewUI
原文链接：http://www.cnblogs.com/zhaozzm/p/4482750.html
版权 
<!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>

 

转载于:https://www.cnblogs.com/zhaozzm/p/4482750.html

weixin_30885111
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
QQ在线客服html代码，自适应漂浮在网页右侧(界面美观大方)
02-09
众里寻即千百度、蓦然回首却在灯火阑珊处的QQ在线客服代码。把其中代码更换成你的代码就可以使用。请将其中的网址更换成：
漂浮QQ客服代码
05-25
NULL 博文链接：https://blackpearl.iteye.com/blog/397164
jQuery悬浮QQ客服代码
ICode联盟
11-24 504
下载地址 jquery实现可隐藏的网页右侧悬浮QQ客效果。这个QQ客服模块固定在页面的位置，并且可以通过点击箭头按钮进行隐藏，适合用于应用在各种需要QQ客服的网站上。 dd:
网页漂浮图片链接的代码——兼容IE11、Firefox、Chrome
shaowl111的专栏
07-09 604
废话少说，直接上代码！ <!-- 网页漂浮图片链接代码 兼容IE11、Firefox、Chrome piaofudiv 层的宽度根据图片的宽度来定 --> <div id="piaofudiv" style="position:absolute; width:300px; z-index:999999;" onmouseover="pia...
jQuery悬浮QQ客服插件
ICode联盟
12-04 312
下载地址 多种样式很实用的网页悬浮QQ客服代码 dd:
兼容各大浏览器带关闭按钮的漂浮多组图片广告代码
10-25
这段代码主要展示了如何在网页上实现一个兼容各主流浏览器的带有关闭按钮的浮动多组图片广告功能。这个功能是通过JavaScript实现的，涉及到的核心技术包括事件处理、页面滚动位置获取以及浏览器兼容性处理。 首先，...
js右下角与漂浮广告代码(兼容多浏览器)
10-28
个右下角QQ漂浮广告代码兼容多浏览器，确实不错，需要的朋友可以参考下。
不用js多浏览器兼容纯DIV/CSS对联漂浮广告代码
10-30
两侧漂浮。经测试，兼容IE6，IE7，Firefox浏览器
jQuery右下角pop弹窗漂浮广告代码，兼容主流浏览器.rar
06-29
jQuery右下角pop弹窗漂浮广告代码，兼容主流浏览器.rar
CSS+HTML+JavaScript打造的悬浮的在线客服源码.rar
03-05
CSS+HTML+JavaScript打造的悬浮的在线客服源码，其中包含css html 和JavaScript，在css中可以更改窗口样式。
html5种在线客服代码(完整)
09-29
html CSS 页面悬浮客服代码，网页在线客服代码，有微信二维码、人工客服、工单客服、投诉建议等项目。包括5种不同风格的，每个都是完整可用的。
第二屏微信客服浮窗代码
12-01
一般页面的在线客服浮窗会一直浮动，影响第一屏大图展示，该特效保证在第二屏内容进行浮动。
jQuery实现悬浮在右上角的网页客服效果代码
10-23
主要介绍了jQuery实现悬浮在右上角的网页客服效果代码,涉及jQuery响应鼠标事件动态变换页面元素样式的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
HTML5(悬浮球)
03-15
试下手机的悬浮球,随时拖动,支持点击事件,在浏览器上运行后按F12进入到手机模式才可以看到效果
HTML实现移动端固定悬浮半透明搜索框
09-28
主要介绍了HTML实现移动端固定悬浮半透明搜索框的相关资料,需要的朋友可以参考下
电话悬浮代码
小小鱼儿小小林的博客
09-26 1338
代码*{ margin:0; padding:0; list-style:none;}body{ font-size:14px;}.main{ width:0px; height:0px; position:fixed; bottom:150px; border:1px solid #b83b3b; background-color:#FFF;}.main2{ width:0px; height:
html如何加入浮动客服,css如何实现客服悬浮效果
weixin_34849898的博客
06-05 342
我们首先来看一下效果图：(推荐教程：CSS教程)接着我们来看一下实例代码：html在线客服QQ:1846492969QQ:1846492969QQ:1846492969QQ:1846492969QQ:1846492969css.sideBar {position:fixed;right:-182px;top:50px;background-color:#ffffff;border:#eea236 ...
微信小程序客服相关功能
jinci___eryi的博客
06-09 888
微信小程序客服相关功能
网页中实现浮动客服窗口
育航家技术学习专栏
04-08 2590
网页中实现浮动客服窗口
html漂浮特效代码
最新发布
03-02
HTML漂浮特效可以通过CSS和JavaScript来实现。以下是一个单的HTML漂浮特效代码示例： ...<!... .float { ...这段代码会在页面的右下角创建一个漂浮的图像。你可以将`your-image.jpg`替换为你自己的图像路径。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值