说到网页浮动窗口，大家很容易就想到了一些低级网站里碍眼的对联广告和漂浮广告吧，那些广告一般不靠谱，明明鼠标点击关闭，却要弹出一个广告页面，确实讨厌。不过同样的技术，我们若换个目的和方式，就大受欢迎了。比如作为一个企业网站或购物商城的客服窗口，尤其是购物商城，添加一个浮动客服窗口就是很有必要的了。因为一般商城为了展示商品页面都会比较长，如果有这样一个相对视觉静止在网页中的客服窗口，对顾客来讲，方便之处可想而知。
所以说掌握这种浮动窗口代码的运用，还是很有必要的。网上也有很多这样的源代码下载，大家可以搜搜，今天我就在这分享一个简单易用的例子(也是最近完成项目中运用到的)：
以下是放在body标签里的代码（只要在body里，位置可以随便放，不过因为有js，所以我一般选择放在，body内容的最下面)——
<script>
var w3c = (document.getElementById) ? true : false;
var agt = navigator.userAgent.toLowerCase();
var ie = ((agt.indexOf(“msie”) != -1) && (agt.indexOf(“opera”) == -1) && (agt.indexOf(“omniweb”) == -1));
var mymovey = new Number();
function IeTrueBody(){
return (document.compatMode && document.compatMode!=”BackCompat”) ? document.documentElement : document.body;
}
function GetScrollTop(){
return ie ? IeTrueBody().scrollTop : window.pageYOffset;
}
</script>
<div id=”window”>
<p><strong>[email protected]</strong>
<a href=”#”><b>MSN</b>留言</a></p>
</div>
<script language=”JavaScript1.1″>
function heartBeat(){
diffY=GetScrollTop();
mymovey += Math.floor((diffY-document.getElementById(‘window’).style.top.replace(“px”,””)+160)*0.1);
document.getElementById(‘window’).style.top = mymovey+”px”;
}
window.setInterval(“heartBeat()”,1);
</script>
以下是Css内容：
#window {z-index:1; width:179px; right:0px; position:absolute; height:104px; background: url(contactBG.png) no-repeat;}
#window p {margin:50px 10px 0 14px; line-height:21px; color:#e14e05;}
#window p a {text-decoration:underline; color:#666;}
代码写出来有点多，但是其实很简单，就是两段js和一个ID命名为window的div，第二段js里的参数是可以根据自己需要来设置的。而这里的样式，大家只需参考#window就可以了，我这是针对附加图的完整样式。