George World

技术改变明天,创新塑造未来! i(at)huadev.com Follow Me: http://t.sina.com.cn/georgeworld

  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理 ::
  28 随笔 :: 0 文章 :: 5 评论 :: 0 Trackbacks

<!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=utf-8" />
<title>漂浮层代码-演示</title>
<script language="javascript" type="text/javascript">
var suspendDivWidth = "100";  //漂浮层宽度
var suspendDivHeight = "300";  //漂浮层高度
var qqNumberArray = new Array("1205640864","1491012702");  //QQ号码列表

var lastScrollY=0;
function heartBeat(){
    var diffY,percent;
    if (document.documentElement && document.documentElement.scrollTop){
        diffY = document.documentElement.scrollTop;
    }
    else if (document.body){
        diffY = document.body.scrollTop;
    }
    else{
        /*Netscape stuff*/
    }
    percent=.1*(diffY-lastScrollY);
    if(percent>0){
        percent=Math.ceil(percent);
    }
    else{
        percent=Math.floor(percent);
    }
    document.getElementById("georgeFloatingLayer_Div1").style.top=parseInt(document.getElementById("georgeFloatingLayer_Div1").style.top)+percent+"px";
    document.getElementById("georgeFloatingLayer_Div2").style.top=parseInt(document.getElementById("georgeFloatingLayer_Div1").style.top)+percent+"px";
    lastScrollY=lastScrollY+percent;
}

//合成浮动层的内容
function getContentOfFloatingLayer(){
    var floatingLayerContent = "";
    for (var i in qqNumberArray){
        floatingLayerContent = floatingLayerContent + "<a target=\"_blank\" href=\"http://wpa.qq.com/msgrd?v=3&uin="+qqNumberArray[i]+"&site=qq&menu=yes\"><img border=\"0\" src=\"http://wpa.qq.com/pa?p=2:178069108:41\" alt=\"点击这里给我发消息\" title=\"点击这里给我发消息\"></a><br />";
    }
    floatingLayerContent = "<fieldset id=\"georgeFloatingLayerFieldset\" style=\"-moz-border-radius:8px; text-align:center;\"><legend>在线联系</legend>"+floatingLayerContent+"</fieldset>";
    return floatingLayerContent;
}

var georgeFloatingLayer_1="<DIV id=\"georgeFloatingLayer_Div1\" style='left:0;POSITION:absolute;TOP:10px;width:0;height:0;border:0px;'></div>"
var georgeFloatingLayer_2="<DIV id=\"georgeFloatingLayer_Div2\" style='background-color:#FFFFFF;right:2px;POSITION:absolute;TOP:10px;width:"+suspendDivWidth+"px;height:"+suspendDivHeight+"px;border:0;'>"+getContentOfFloatingLayer()+"</div>";
document.write(georgeFloatingLayer_1);
document.write(georgeFloatingLayer_2);

window.setInterval("heartBeat()",1);
</script>
</head>

<body>
<div style="height:900px; background-color:#FF0000; border:solid #3399FF 1px;">ffffffffffff</div>
</body>
</html>

posted on 2010-09-09 11:22 George-tech 阅读(1457) 评论(3)  编辑  收藏

评论

# 腾飞数据 2011-01-25 23:53 选择腾飞-复制成功
选择腾飞-复制成功  回复  更多评论
  

# re: 网页QQ聊天按钮-漂浮层中的QQ在线状态 2011-09-09 18:50 终极网络
很好  回复  更多评论
  

# re: 网页QQ聊天按钮-漂浮层中的QQ在线状态 2014-07-11 09:33 覃起亮
就像弄个好看的代码发到网页中  回复  更多评论
  


只有注册用户登录后才能发表评论。


网站导航: