在线客服漂浮特效(支持拖动),可随滚动条滚动特效

最新推荐文章于 2022-05-20 13:59:55 发布

菜鸟攻城师

最新推荐文章于 2022-05-20 13:59:55 发布

阅读量2.2k

点赞数

分类专栏：代码例子文章标签：滚动条滚动特效在线客服漂浮特效 js滚动条特效计算滚动条随页面滚动

本文链接：https://blog.csdn.net/cainiaosunshine/article/details/11750037

版权

代码同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

例子

9 篇文章 0 订阅

订阅专栏

在线客服漂浮特效(支持拖动),可随滚动条滚动特效

CSS模块

.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:9pt;
width:101px;
height:20px;
text-align:center;
}
.KeFuItem{
text-align:center;
margin-top:8px;
font-size:9pt;
}

--------------------------------------------------------------------------------------------

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对象，方法 οnmοusedοwn="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); //释放
}
}
}

--------------------------------------------------------------------------------------------

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=gb2312" />


<title></title>
<script type="text/javascript" src="js/lrtk.js"></script>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<script>
for (i=1;i<60;i++){
document.write(i+"<br/><br/>");
}
</script>


<div id="KeFuDiv" class="KeFuDiv">
  <div><img src="images/up_001.gif" height="55" border="0" usemap="#Map" style="cursor:move;" οnmοusedοwn="MoveDiv(KeFuDiv,event);" title="拖动"></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>


  <map name="Map" id="Map">
    <area shape="circle" coords="105,10,8" href="javascript:" οnclick="KeFuDiv.style.display='none';" title="关闭"/>
  </map>
</div>


<script>
//初始位置
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>

页面可根据自己的需求改动，可支持拖动

菜鸟攻城师

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
在线客服漂浮特效(支持拖动),可随滚动条滚动特效

QQ在线客服漂浮特效(支持拖动),可随滚动条滚动特效CSS模块.KeFuDiv{position: absolute;height:160px;width:118px;}.KeFuList{background:url(../images/mid001.gif);}.KeFuTitle{background:url(../images/list_
复制链接

扫一扫