可浮动的在线qq咨询客服代码

最新推荐文章于 2025-09-12 14:04:02 发布

转载最新推荐文章于 2025-09-12 14:04:02 发布 · 75 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://blog.51cto.com/yuanq20/755068

文章标签：

#javascript #ViewUI

本文介绍了一种使用JavaScript实现的QQ在线咨询浮动代码，该代码可以使客服QQ图标在页面中上下浮动，便于用户随时发起咨询。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="Copyright" content="爱JavaScript中文网 http://www.ijavascript.cn/" />
<meta name="description" content="QQ在线咨询代码上下浮动型代码演示" />
<meta content="爱JavaScript中文网" name="keywords" />
<title>QQ在线咨询代码上下浮动型代码演示 - 爱JavaScript中文网</title>
</head>
<BODY>
<script>
var delta=0.15
var collection;
function floaters() {
this.items = [];
this.addItem = function(id,x,y,content) {
document.write('<DIV id='+id+' style="Z-INDEX: 10; POSITION: absolute;width:80px; height:30px;left:'+(typeof(x)=='string'?eval(x):x)+';top:'+(typeof(y)=='string'?eval(y):y)+'">'+content+'</DIV>');
var newItem = {};
newItem.object = document.getElementById(id);
newItem.x = x;
newItem.y = y;
this.items[this.items.length] = newItem;
}
this.play = function() {
collection = this.items
setInterval('play()',10);
}
}
function play() {
if(screen.width<=800) {
for(var i=0;i<collection.length;i++) {
collection[i].object.style.display = 'none';
}
return;
}
for(var i=0;i<collection.length;i++) {
var followObj = collection[i].object;
var followObj_x = (typeof(collection[i].x)=='string'?eval(collection[i].x):collection[i].x);
var followObj_y = (typeof(collection[i].y)=='string'?eval(collection[i].y):collection[i].y);
if(followObj.offsetLeft!=(document.body.scrollLeft+followObj_x)) {
var dx=(document.body.scrollLeft+followObj_x-followObj.offsetLeft)*delta;
dx=(dx>0?1:-1)*Math.ceil(Math.abs(dx));
followObjfollowObj.style.left=followObj.offsetLeft+dx;
}
if(followObj.offsetTop!=(document.body.scrollTop+followObj_y)) {
var dy=(document.body.scrollTop+followObj_y-followObj.offsetTop)*delta;
dy=(dy>0?1:-1)*Math.ceil(Math.abs(dy));
followObjfollowObj.style.top=followObj.offsetTop+dy;
}
followObj.style.display = '';
}
}
var theFloaters = new floaters();
theFloaters.addItem('followDiv1','document.body.clientWidth-106',80,'<a href=#target=_blank> <A href="http://wpa.qq.com/msgrd?V=1&Uin=83744378&Site=www.ijavascript.cn&Menu=yes" target=blank><img src=http://www.ijavascript.cn/tools/codedemo/float-drag-js-for-qqonline-30/p_w_picpaths/QQoffline.gif alt=客服QQ border=0></a>QQ号码 <A href="http://wpa.qq.com/msgrd?V=1&Uin=125146711&Site=www.ijavascript.cn&Menu=yes" target=blank><img src=http://www.ijavascript.cn/tools/codedemo/float-drag-js-for-qqonline-30/p_w_picpaths/QQoffline.gif alt=QQ在线技术支持 border=0></a>QQ号码');
theFloaters.addItem('followDiv2',6,80,'<A href="http://wpa.qq.com/msgrd?V=1&Uin=19325450&Site=www.ijavascript.cn&Menu=yes" target=blank><img src=http://www.ijavascript.cn/tools/codedemo/float-drag-js-for-qqonline-30/p_w_picpaths/QQoffline.gif alt=客服QQ border=0></a>QQ号码 <a href=http://wpa.qq.com/msgrd?V=1&Uin=121929982&Site=www.ijavascript.cn&Menu=yes"target=_blank><img src=http://www.ijavascript.cn/tools/codedemo/float-drag-js-for-qqonline-30/p_w_picpaths/QQoffline.gif alt=QQ在线技术支持 border=0></a>QQ号码 ');
theFloaters.play();
</script>
</BODY>
</HTML>