QQ浮动客服，在页面右侧浮动，查看效果。 <!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>QQ浮动客服</title> </head> <style type="text/css"> #QQFloatDiv { width:118px; margin:0 auto; } #QQFloatDiv .Head { height:41px; background:url(http://www.huanghengxu.com/Upload/Images/QQ/head.gif);} #QQFloatDiv .Body { background:url(http://www.huanghengxu.com/Upload/Images/QQ/body.gif); text-align:center; } #QQFloatDiv .Foot { height:40px; background:url(http://www.huanghengxu.com/Upload/Images/QQ/foot.gif);} </style> <script language="JavaScript"> function FloatDiv(id) { this.ID = id; this.ObjMove = document.getElementById(id); this.LastScrollY = 0; // 已经移动 FloatDiv.prototype.Move = function(obj) { var scrollTop; if (document.documentElement && document.documentElement.scrollTop) scrollTop = document.documentElement.scrollTop; else if (document.body) scrollTop = document.body.scrollTop; var percent; // 本次移动像素 percent = (scrollTop - obj.LastScrollY) * 0.1; // 每次移动10% if(percent > 0) percent = Math.ceil(percent); // 截掉小数，数字会变大 else percent = Math.floor(percent); // 截掉小数，数字会变小 obj.ObjMove.style.top = parseInt(obj.ObjMove.style.top) + percent + 'px'; obj.LastScrollY = obj.LastScrollY + percent; }; FloatDiv.prototype.Init = function(obj) { if (!obj.ObjMove) { alert('对象不存在'); return; } window.setInterval(this.BindInterval(this.Move, obj), 10); }; // 绑定参数，window.setInterval，不能指定参数，需要绑定 FloatDiv.prototype.BindInterval = function(funcName) { var args = []; for(var i = 1; i < arguments.length; i++) { args.push(arguments[i]); } return function() { funcName.apply(this, args); } }; } </script> <body> <div style="height:2000px;"></div> <!-- QQ浮动客服 --> <div id="QQFloatDiv" style="position:absolute; right:0; top:100px;"> <div class="Head"></div> <div class="Body"> <a href="http://wpa.qq.com/msgrd?V=1&Uin=779790215&Menu=yes" target="blank"><img src="http://wpa.qq.com/pa?p=1:779790215:1" alt="点击这里给我发消息" border="0"></a> </div> <div class="Foot"></div> </div> <!-- QQ浮动客服 --> <script type="text/javascript"> // 调用 var ad = new FloatDiv('QQFloatDiv'); ad.Init(ad); </script> </body> </html>
