JS 实现右边浮动客服DIV层

发布时间：2011年10月31日浏览次数：897 次

<!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>JS实现右边浮动客服DIV层</title>
<script language="javascript">
//设置样式
document.writeln("<style type="text\/css">");
document.writeln("#Div_kefu{ width:150px; height:200px; position:absolute; z-index:1000; }");
document.writeln("<\/style>");
document.writeln("<div id="Div_kefu" style="top:100px;right:5px; border:1px #ccc solid;">");
document.writeln("<div style='text-align:right; cursor:pointer;' onclick='Close_Div_kefu();'>关闭</div>");
document.writeln("<div align='center'>");
document.writeln("<a href='#' target='_blank'>在线客服<\/a>");
document.writeln("<\/div>");
document.writeln("<\/div>");

lastScrollY = 0;
function Div_Scroll(){
      var diffY;
      if (document.documentElement && document.documentElement.scrollTop)
            diffY = document.documentElement.scrollTop;
      else if (document.body)
            diffY = document.body.scrollTop;
            percent=.1*(diffY-lastScrollY);
      if(percent>0){
            percent=Math.ceil(percent);
      }else{
            percent=Math.floor(percent);
      }

      if (document.getElementById("Div_kefu")) document.getElementById("Div_kefu").style.top = parseInt(document.getElementById("Div_kefu").style.top)+percent+"px";
      lastScrollY=lastScrollY+percent;
}
//关闭按钮
function Close_Div_kefu(){
      document.getElementById('Div_kefu').style.visibility='hidden';
}
//调用
window.setInterval("Div_Scroll()",1);
</script>
</head>
<body>
      <div style="height:1500px;"></div>
</body>
</html>