在培训,学校的网站的上我们经常能看到一个浮动的咨询窗口,可以与老师进行QQ聊天咨询,就像下面的一样:
![](https://images.cnblogs.com/cnblogs_com/shuang121/piaofu.jpg)
它会随着滚动条的滚动而上下浮动,下面有一个自己写的例子,供参考:
<div>
<script language="javascript">
var online = new Array();
if (!document.layers)
document.write('<div id="divStayTopLeft" style="position:absolute;">')
</script>
<script>
function guanbi() {
var guan=document.getElementByIdx_x("guan");
guan.style.display="none";
}
</script>
<layer left="30" top="52" width="70" height="66" id="divStayTopLeft">
<div style="width:91px; height:149px; float:left; background-image:url('images/home_013.jpg'); display:block; padding-left:10px; background-repeat:no-repeat" id="guan">
<div style="width:40px; height:20px; margin-top:5px; float:left; padding-left:50px; font-size:12px; color:#fff; cursor:hand" onclick="guanbi()">关闭</div>
<div style="width:70px; height:50px; margin-top:65px; float:left">
<div style="width:70px; height:15px; float:left; font-size:12px; color:#FFFFFF">
<span style="float:left;">
<a href="http://sighttp.qq.com/cgi-bin/check?sigkey=9a9508773f00d040a7769e0b981cef17c09538f624dd4beb40ba232c9854bda7"; target=_blank; onclick="var tempSrc='http://sighttp.qq.com/wpa.js?rantime='+Math.random()+'&sigkey=9a9508773f00d040a7769e0b981cef17c09538f624dd4beb40ba232c9854bda7';var oldscript=document.getElementByIdx_x('testJs');var newscript=document.createElement_x('script');newscript.setAttribute('type','text/javascript'); newscript.setAttribute('id', 'testJs');newscript.setAttribute('src',tempSrc);if(oldscript == null){document.body.appendChild(newscript);}else{oldscript.parentNode.replaceChild(newscript, oldscript);}return false;">团 队[ 咨询 ]</a>
</span>
</div>
<div style="width:70px; height:15px; float:left; font-size:12px; color:#FFFFFF">
<span style="float:left;">
<a href="http://sighttp.qq.com/cgi-bin/check?sigkey=f44e18c2f505e6c48cb5953cbd07481d3aac34e082a1b6bc1f5c7a613287f8a9"; target=_blank; onclick="var tempSrc='http://sighttp.qq.com/wpa.js?rantime='+Math.random()+'&sigkey=f44e18c2f505e6c48cb5953cbd07481d3aac34e082a1b6bc1f5c7a613287f8a9';var oldscript=document.getElementByIdx_x('testJs');var newscript=document.createElement_x('script');newscript.setAttribute('type','text/javascript'); newscript.setAttribute('id', 'testJs');newscript.setAttribute('src',tempSrc);if(oldscript == null){document.body.appendChild(newscript);}else{oldscript.parentNode.replaceChild(newscript, oldscript);}return false;">散 客[ 咨询 ]</a>
</span>
</div>
</div>
</div>
</layer>
<script type="text/javascript">
var verticalpos = "frombottom"
if (!document.layers)
document.write('</div>')
function JSFX_FloatTopDiv() {
var startX = screen.width - 121,
startY = 250;
var ns = (navigator.appName.indexOf("Netscape") != -1);
var d = document;
function ml(id) {
var el = d.getElementById ? d.getElementById(id) : d.all ? d.all[id] : d.layers[id];
if (d.layers) el.style = el;
el.sP = function(x, y) { this.style.left = x; this.style.top = y; };
el.x = startX;
if (verticalpos == "fromtop")
el.y = startY;
else {
el.y = ns ? pageYOffset + innerHeight : document.documentElement.scrollTop + document.documentElement.clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopLeft = function() {
if (verticalpos == "fromtop") {
var pY = ns ? pageYOffset : document.documentElement.scrollTop;
ftlObj.y += (pY + startY - ftlObj.y) / 8;