效果不错的浮动div

　　上周发现了一个还不错的浮动div，不过不支持
+展开
-HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
文档申明，修改了下代码，并将源代码改为面向对象的了。

　　本文结合了QQ在线状态检查，可以作为QQ客户服务浮动窗口使用。至于如何检查QQ在线状态，本文就不多说了，具体清考这篇文章。
　　JavaScript检查qq在线状态

　　本文示例效果
　　QQ客服浮动+检测在线状态

　　下面贴出源代码参考，使用方法参考注释部分
+展开
-HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>

<link href="images/qq.css" rel="Stylesheet" type="text/css" /><meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">
body,td{font-size:12px;margin:0px;}
</style> 
</head><div style="width:100%;height:2000px;background:#eee"></div>
<script>
var online= new Array();
</script> 
<div id="dvQQLeft"><!------------导入QQ状态检查接口，注意要一次性加上所有的QQ号码，要不会导致状态被覆盖---------------->
<script src="http://webpresence.qq.com/getonline?Type=1&774267677:269303824:1002096980:33003040:"></script> 
<table border="0" width="110" cellspacing="0" cellpadding="0">
<tr><td width="110"><img border=0 src=images/kefu_up.gif></td></tr>
<tr><td valign=middle  background=images/kefu_middle.gif>
<script>
if (online[0]==0)
document.write("  <img src=images/QQoffline.gif border=0 align=middle><a class='qqb' target=blank href='http://wpa.qq.com/msgrd?V=1&Uin=774267677&Site=在线咨询&Menu=no' title='客服不在线，请留言'>774267677</a>");
else
document.write("  <img src=images/QQonline.gif border=0 align=middle><a class='qqa' target=blank href='http://wpa.qq.com/msgrd?V=1&Uin=774267677&Site=在线咨询&Menu=no' title='在线即时交谈'>774267677</a>");
</script >
</td>
</tr>

<tr><td valign=middle  background=images/kefu_middle.gif>
<script>
if (online[1]==0)
document.write("  <img src=images/QQoffline.gif border=0 align=middle><a class='qqb' target=blank href='http://wpa.qq.com/msgrd?V=1&Uin=774267677&Site=在线咨询&Menu=no' title='客服不在线，请留言'>774267677</a>");
else
document.write("  <img src=images/QQonline.gif border=0 align=middle><a class='qqa' target=blank href='http://wpa.qq.com/msgrd?V=1&Uin=269303824&Site=在线咨询&Menu=no' title='在线即时交谈'>269303824</a>");
</script >
</td>
</tr>

<tr><td valign=middle  background=images/kefu_middle.gif>
<script>
if (online[2]==0)
document.write("  <img src=images/QQoffline.gif border=0 align=middle><a class='qqb' target=blank href='http://wpa.qq.com/msgrd?V=1&Uin=33003040&Site=在线咨询&Menu=no' title='客服不在线，请留言'>33003040</a>");
else
document.write("  <img src=images/QQonline.gif border=0 align=middle><a class='qqa' target=blank href='http://wpa.qq.com/msgrd?V=1&Uin=33003040&Site=在线咨询&Menu=no' title='在线即时交谈'>33003040</a>");
</script >
</td>
</tr>
<tr><td valign=middle  background=images/kefu_middle.gif>
<script>
if (online[2]==0)
document.write("  <img src=images/QQoffline.gif border=0 align=middle><a class='qqb' target=blank href='http://wpa.qq.com/msgrd?V=1&Uin=774267677&Site=在线咨询&Menu=no' title='客服不在线，请留言'>33003040</a>");
else
document.write("  <img src=images/QQonline.gif border=0 align=middle><a class='qqa' target=blank href='http://wpa.qq.com/msgrd?V=1&Uin=1002096980&Site=在线咨询&Menu=no' title='在线即时交谈'>1002096980</a>");
</script >
</td>
</tr>
        <tr><td width="110"><img border=0 src=images/kefu_down.gif></td></tr>
</table></div>


<div id="dvQQRight">
<table border="0" width="110" cellspacing="0" cellpadding="0">
<tr><td width="110"><img border=0 src=images/kefu_up.gif></td></tr>
<tr><td valign=middle  background=images/kefu_middle.gif>
<script>
if (online[0]==0)
document.write("  <img src=images/QQoffline.gif border=0 align=middle><a class='qqb' target=blank href='http://wpa.qq.com/msgrd?V=1&Uin=774267677&Site=在线咨询&Menu=no' title='客服不在线，请留言'>774267677</a>");
else
document.write("  <img src=images/QQonline.gif border=0 align=middle><a class='qqa' target=blank href='http://wpa.qq.com/msgrd?V=1&Uin=774267677&Site=在线咨询&Menu=no' title='在线即时交谈'>774267677</a>");
</script >
</td>
</tr>

<tr><td valign=middle  background=images/kefu_middle.gif>
<script>
if (online[1]==0)
document.write("  <img src=images/QQoffline.gif border=0 align=middle><a class='qqb' target=blank href='http://wpa.qq.com/msgrd?V=1&Uin=774267677&Site=在线咨询&Menu=no' title='客服不在线，请留言'>774267677</a>");
else
document.write("  <img src=images/QQonline.gif border=0 align=middle><a class='qqa' target=blank href='http://wpa.qq.com/msgrd?V=1&Uin=269303824&Site=在线咨询&Menu=no' title='在线即时交谈'>269303824</a>");
</script >
</td>
</tr>

<tr><td valign=middle  background=images/kefu_middle.gif>
<script>
if (online[2]==0)
document.write("  <img src=images/QQoffline.gif border=0 align=middle><a class='qqb' target=blank href='http://wpa.qq.com/msgrd?V=1&Uin=33003040&Site=在线咨询&Menu=no' title='客服不在线，请留言'>33003040</a>");
else
document.write("  <img src=images/QQonline.gif border=0 align=middle><a class='qqa' target=blank href='http://wpa.qq.com/msgrd?V=1&Uin=33003040&Site=在线咨询&Menu=no' title='在线即时交谈'>33003040</a>");
</script >
</td>
</tr>
<tr><td valign=middle  background=images/kefu_middle.gif>
<script>
if (online[2]==0)
document.write("  <img src=images/QQoffline.gif border=0 align=middle><a class='qqb' target=blank href='http://wpa.qq.com/msgrd?V=1&Uin=774267677&Site=在线咨询&Menu=no' title='客服不在线，请留言'>33003040</a>");
else
document.write("  <img src=images/QQonline.gif border=0 align=middle><a class='qqa' target=blank href='http://wpa.qq.com/msgrd?V=1&Uin=1002096980&Site=在线咨询&Menu=no' title='在线即时交谈'>1002096980</a>");
</script >
</td>
</tr>
        <tr><td width="110"><img border=0 src=images/kefu_down.gif></td></tr>
</table></div>

<script type="text/javascript">
var  floatDiv={
  isScrict:document.compatMode=='CSS1Compat'//判断渲染模式
  ,floatDivs:[]//存储浮动对象的数组
  ,timer:null//计时器
  ,wrapperObject:function(el){
    if(!el.move){
      el.move=function(){this.style.top=this.y+'px';}
      el.style.position='absolute';
    }
    var startX=parseInt(el.getAttribute('startX'),10),horizontalPos=parseFloat(el.getAttribute('horizontalPos'),10)
       ,verticalPos=parseFloat(el.getAttribute('verticalPos'),10),startY=parseInt(el.getAttribute(verticalPos?'ostartY':'startY'),10)
       ,clientWidth=this.isScrict?document.documentElement.clientWidth:document.body.clientWidth
       ,clientHeight=this.isScrict?document.documentElement.clientHeight:document.body.clientHeight
       ,scrollTop=this.isScrict?document.documentElement.scrollTop:document.body.scrollTop;
    if(startX==0||startX==-1)el.style.left=(startX==-1?0:(startX==0?clientWidth-el.offsetWidth:startX))+'px';
    else el.style.left=(horizontalPos==-1?startX:clientWidth-startX)+'px';
    if(verticalPos){
      startY=clientHeight-startY-el.offsetHeight;
      el.setAttribute('startY',startY);
    }
    el.y=startY+scrollTop;    
    return el;
  }
  ,holdPosition:function(){
    var el,i,y=this.isScrict?document.documentElement.scrollTop:document.body.scrollTop,startY;
    for(i=0;i<this.floatDivs.length;i++){
      el=this.floatDivs[i];
      startY=parseInt(el.getAttribute('startY'),10);
      el.y+=(y+startY-el.y)/8;
      el.move();
    }
  }
  ,onResize:function(){
    clearInterval(this.timer);
    for(var i=0;i<this.floatDivs.length;i++)this.wrapperObject(this.floatDivs[i]);//窗体大小变化时更新水平位置
    var me=this;
    this.timer=setInterval(function(){me.holdPosition();},10);
  }
  //dvID：浮动div的Id
  //startX：浮动div距离页面水平位置，传递-1则为最左边，传递0则最右边
  //horizontalPos：指示水平距离【startX为非0，-1时】，01为距离左边，0为距离右边
  //startY：浮动div距离页面垂直位置
  //verticalPos：指示垂直位置startY是从页面顶部到div顶部【0】  或者 是从页面底部到div底部的距离【1】
  ,bind:function(dvID,startX,horizontalPos,startY,verticalPos){
    var el=document.getElementById(dvID);
    if(!el)throw "要绑定的浮动对象不存在！";
    el.setAttribute('startX',startX);el.setAttribute('horizontalPos',horizontalPos);
    el.setAttribute('startY',startY);el.setAttribute('verticalPos',verticalPos);
    if(verticalPos==1)el.setAttribute('ostartY',startY);
    this.floatDivs.push(this.wrapperObject(el));    
    if(this.timer==null){
      var me=this;
      this.timer=setInterval(function(){me.holdPosition();},10);
      if(window.addEventListener)window.addEventListener('resize',function(){me.onResize();},false);
      else if(window.attachEvent)window.attachEvent('onresize',function(){me.onResize();});
    }
  }
}
floatDiv.bind('dvQQLeft',-1,null,100,0);
floatDiv.bind('dvQQRight',0,null,100,1);
</script> 
</body>
</html>

加支付宝好友偷能量挖...


原创文章，转载请注明出处：效果不错的浮动div

评论(0)Web开发网
阅读(109)喜欢(0)JavaScript/Ajax开发技巧