最新赞助活动温馨提示:自愿赞助服务器费用,学生和没有工作的整站资源免费下载!
头像

jQuery支持拖动的QQ客服悬浮层

来源:http://www.erdangjiade.com/ 沐浴春风 2016-03-08 19:24浏览(1614)

jQuery右侧在线客服代码,可自定义在线QQ,或者其他即时通讯聊天按钮的在线客服浮动层代码,支持鼠标拖动效果,可在页面上任何地方拖动客服悬浮层。

0、请不要问“在不在”之类的问题,有问题直接问!1、学生或暂时没有工作的童鞋,整站资源免费下载!2、¥9.9充值终身VIP会员,加我微信,826096331 拉你进VIP群学习!3、程序员加油,技术改变世界。在线 充值

jQuery支持拖动的QQ客服悬浮层
分类:其它特效 > 在线客服 难易:初级
查看演示 下载资源 下载积分: 30 积分

在线客服html代码

<div class="KeFuList"> 
    <div class="KeFuTitle">在线客服</div> 
    <div class="KeFuItem"> 
        <a target="_blank" href="tencent://message/?uin=87423050&Site=&Menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=1:87423050:3" alt="点我吧"></a> 
    </div> 
    <div class="KeFuItem"> 
        <a target="_blank" href="tencent://message/?uin=87423050&Site=&Menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=1:87423050:2" alt="有事点这里"></a> 
    </div> 
</div>

客服插件online.js

var isIE = /msie/i.test(navigator.userAgent); 
 
function gID(id) { 
    return document.getElementById(id); 
} 
 
//漂浮 
//参数:层ID,记录上次滚动位置(默认可以为空,递归使用) 
function ScrollDiv(id, pScrollY) { 
    //var ScrollY = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop; 
    var ScrollY = document.documentElement.scrollTop || document.body.scrollTop; //兼容处理 
    if (pScrollY == null) { 
        pScrollY = 0
    } 
 
    var moveTop = .1 * (ScrollY - pScrollY); //可调整移动速度 
    moveTop = (moveTop > 0) ? Math.ceil(moveTop) : Math.floor(moveTop); 
    gID(id).style.top = parseInt(gID(id).style.top) + moveTop + "px"
 
    pScrollY = pScrollY + moveTop; 
    setTimeout("ScrollDiv('" + id + "'," + pScrollY + ");"50); //可调整滚动后的反映速度 
} 
 
 
//增加事件动作,不冲突原来的事件 
//参数,对象,事件名称(带on),事件定义(如果要带参数,则要function(){eventFunc("")}这样传递参数) 
function addObjEvent(obj, eventName, eventFunc) { 
    if (obj.attachEvent) { //IE 
        obj.attachEvent(eventName, eventFunc); 
    } else if (obj.addEventListener) { //FF Gecko / W3C 
        var eventName2 = eventName.toString().replace(/on(.*)/i'$1'); //正则过滤第1个on 
        obj.addEventListener(eventName2, eventFunc, false); //fslse为倒序执行事件 
    } else { 
        obj[eventName] = eventFunc; 
    } 
} 
 
 
//移除事件动作 
//参数,对象,事件名称(带on),事件定义(如果要带参数,则要function(){eventFunc("")}这样传递参数) 
function delObjEvent(obj, eventName, eventFunc) { 
    if (obj.detachEvent) { // IE 
        obj.detachEvent(eventName, eventFunc); 
    } else if (obj.removeEventListener) { //FF Gecko / W3C 
        var eventName2 = eventName.toString().replace(/on(.*)/i'$1'); //正则过滤第1个on 
        obj.removeEventListener(eventName2, eventFunc, false); //fslse为倒序执行事件 
    } else { 
        obj[eventName] = null; 
    } 
} 
 
 
//可以任意拖动的层(支持Firefox,IE) 
//参数,移动的层对象和event对象,方法 onmousedown="MoveDiv(this,event)" 
function MoveDiv(obj, e) { 
    e = e || window.event; 
 
    var ie6 = isIE; 
    if (/msie 9/i.test(navigator.userAgent)) { 
        ie6 = false; 
    } //把IE9设置为非IE浏览器 
    //只允许通过鼠标左键进行拖拽,IE68鼠标左键为1 FireFox ie9其他为0 
    if (ie6 && e.button == 1 || !ie6 && e.button == 0{ 
    } else { 
        return false; 
    } 
 
    obj.style.position = 'absolute'//设置浮动模式 
    obj.ondragstart = function() { 
        return false; 
    } //禁止对象的拖动事件,不然图片在火狐下会无法拖动 
 
    var x = e.screenX - obj.offsetLeft; 
    var y = e.screenY - obj.offsetTop; 
    addObjEvent(document, 'onmousemove', moving); //鼠标移动时,增加移动事件 
    addObjEvent(document, 'onmouseup', endMov); //鼠标放开时,增加停止事件 
    e.cancelBubble = true; //禁止事件冒泡,使触发在子对象上的事件不传递给父对象 
 
    //IE去除选中背景文字 
    if (isIE) { 
        obj.setCapture(); //设置捕获范围 releaseCapture() 释放 
    } else { 
        window.captureEvents(Event.mousemove); //window.releaseEvents(Event.eventType) 释放 
    } 
 
    //if (!isIE){e.stopPropagation();} //W3C 禁止冒泡 
    //FireFox 去除容器内拖拽图片问题,火狐防止选中背景文字 
    if (e.preventDefault) { 
        e.preventDefault(); //取消事件的默认动作 
        e.stopPropagation(); //事件不再被分派到其他节点 
    } 
    e.returnValue = false; //指事件的返回值是false 。return false;是指函数的返回值为false 
    return false; 
 
    //移动 
    function moving(e) { 
        obj.style.left = (e.screenX - x) + 'px'
        obj.style.top = (e.screenY - y) + 'px'
        return false; //图片移动时会出现拖动图片的动作,增加这个return可以不执行这个动作 
    } 
 
    //停止 
    function endMov(e) { 
        delObjEvent(document, 'onmousemove', moving); //删除鼠标移动事件 
        delObjEvent(document, 'onmouseup'arguments.callee); //删除鼠标放开事件,arguments.callee为函数本身 
        if (isIE) { 
            obj.releaseCapture(); //释放捕获 
        } else { 
            window.releaseEvents(Event.mousemove); //释放 
        } 
    } 
}

制作在线客服代码

gID("KeFuDiv").style.top = (document.documentElement.clientHeight - gID("KeFuDiv").offsetHeight) / 2 + "px"
gID("KeFuDiv").style.left = document.documentElement.clientWidth - gID("KeFuDiv").offsetWidth + "px"
//开始滚动 
ScrollDiv('KeFuDiv');
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/837.html
评论2
头像

友情提示:垃圾评论一律封号 加我微信:826096331拉你进VIP群学习群

  • 头像 椅子
    07-03 17:58
    kksoft
    这个QQ在线客服案例做的非常好,功能完善,代码思路清晰,适合新手教学不错!
  • 头像 沙发
    02-11 12:04
    jzk12345
    这个很好。
1 2