网站应用中,客服是少不了的一个曾强体验的工具。 很多网站都会有右边浮动的“QQ在线客服”面板。 下面看一个简单的实现: //省略输出HTML代码.....最众QQ客服浮动面板的所有html都归结为一个ID = divStayTopLeft 的Div //这段代码跟在后面,用于制造随滚动条浮动的效果。 (function showQQPanel(){ var _windowScrollTop=0; //滚动条距离顶端距离 var _windowWidth=jQuery(window).width(); //窗口宽度 jQuery(window).scroll(actionEvent).resize(actionEvent); //监听滚动条事件和窗口缩放事件 //响应事件 function actionEvent(){ _windowScrollTop = jQuery(window).scrollTop(); //获取当前滚动条高度 _windowWidth=jQuery(window).width();//获取当前窗口宽度 moveQQonline();//移动面板 } //移动面板 function moveQQonline(){ //.stop()首先将上一次的未完事件停止,否则IE下会出现慢速僵死状态,然后重新设置面板的位置。 $("#divStayTopLeft").stop().animate({ left: _windowWidth-120, top: _windowScrollTop+225 }, "normal"); } })(); 最后效果就是这样了: