jquery在线QQ客服插件 拉动底下滚动条，怎样才能使插件随着往右移

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery在线QQ客服插件 拉动底下滚动条，怎样才能使插件随着往右移相关的知识，希望对你有一定的参考价值。

jquery在线QQ客服插件 拉动底下滚动条，怎样才能使插件随着往右移，紧贴着垂直滚动条？？？
$.fn.Sonline.scrollType = function()
$("#SonlineBox").css(position:"absolute");
var topNum = parseInt($("#SonlineBox").css("top")+"");
$(window).scroll(function()
var scrollTopNum = $(window).scrollTop();//获取网页被卷去的高
$("#SonlineBox").stop(true,true).delay(0).animate(top:scrollTopNum+topNum,"slow");
);

参考技术A $("#SonlineBox").stop(true,true).delay(0).animate(top:scrollTopNum+topNum,right:0px,"slow");追问

提示说有语法错误 修改right:0也没有实现不了。

QQ在线客服插件代码，下载自CSDN==可拖动在线客服插件。

 

制作网站需要的在线客服功能，

代码：

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); //释放
        }
    }
}

以上是js，

下面是主页

<!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>js悬浮QQ在线客服代码(支持拖动)</title>
<meta name="description" content="js浮动层特效制作悬浮在线客服代码，放置在线QQ等聊天按钮的在线客服浮动层代码，支持拖动效果，可随意在页面上拖动位置，随着浏览器滚动始终保持在悬浮在页面上的js代码。" />
</head>
<body>

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
/* KeFuDiv */
.KeFuDiv{position:absolute;height:160px;width:118px;}
.KeFuList{background:url(images/mid001.gif);}
.KeFuTitle{background:url(images/list_001.gif);margin-left:9px;font-size:12px;width:101px;height:20px;line-height:20px;text-align:center;}
.KeFuItem{text-align:center;margin-top:8px;font-size:12px;}
</style>

<div style="height:1000px;"></div>

<div id="KeFuDiv" class="KeFuDiv">
	<div>
		<img src="images/up_001.gif" height="55" border="0" usemap="#Map" style="cursor:move;" onmousedown="MoveDiv(KeFuDiv,event);" title="拖动" />
		<map name="Map" id="Map">
			<area shape="circle" coords="105,10,8" href="javascript:" onclick="KeFuDiv.style.display=‘none‘;" title="关闭"/>
		</map>
	</div>

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

	<div><img src="images/bot_001.gif" border="0"></div>
</div><!--KeFuDiv end-->

<script type="text/javascript" src="js/online.js"></script>
<script type="text/javascript">
//初始位置
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‘);
</script>

</body>
</html>

 

和图片技术分享技术分享技术分享  技术分享技术分享技术分享

以上是关于jquery在线QQ客服插件 拉动底下滚动条，怎样才能使插件随着往右移的主要内容，如果未能解决你的问题，请参考以下文章

15个带示例的jQuery滚动条插件

js,鼠标上下滑轮或者拉动滚动条触发事件

jquery插件slimScroll有大神知道横向滚动条怎么设置出来吗

有没有可以隐藏滚动条的jquery插件

拉动滚动条为啥电脑屏幕一闪一闪

原创新闻 11 个最佳 jQuery 滚动条插件