js 浮动层实现方法

 

浮动层,一个可以让布局动起来的东西.现在很少网站上用到这种效果.在国处的博客中很流行.

结合网上找的资料,和大家分享一下一个简单的浮动层实现方法.

效果:

js:

<script type="text/javascript">
/*
fkedwgwy
qq:283093141
QQ群:37304662
*/
function makeSure(){
 this.zzDiv = document.createElement("div");//遮照层
 var h = document.body.offsetHeight == 0 ? document.documentElement.offsetHeight : document.body.offsetHeight;
 this.zzDiv.style.cssText = "z-index:100;position:absolute;top:0px;left:0px;100%;filter:alpha(opacity=80);opacity:0.8;display:none;background:#EEE;height:" + h + "px;";
 this.zzDiv.setAttribute("id","makeSureZZDiv"); 
 this.divs = document.createElement("div");//遮照层上层
 this.header = document.createElement("div");//拖动头
 this.contenter = document.createElement("div");//内容层
 this.contenter.style.cssText = "padding:10px;";
 this.header.style.cssText = "height:20px;line-height:20px;padding-left:10px;margin:1px;background:#6699CC;cursor:move;"
 this.divs.style.cssText="z-index:101;position:absolute;top:0px;left:0px;text-align:center;300px;height:300px;background:#EEE;border:1px solid #365899;display:none;"
 this.divs.setAttribute("id","makeSureDiv");
 document.body.appendChild(this.zzDiv);
 this.divs.appendChild(this.header);
 this.divs.appendChild(this.contenter);
 document.body.appendChild(this.divs);
 this.x;
 this.y;
 this.drayState = false;
}
makeSure.prototype = {
 setZZDiv:function(state){//控制遮照打开还是隐藏
  if(state == "open")
  {
   this.zzDiv.style.display = "block";
  }
  else
  {
   this.zzDiv.style.display = "none";
  }  
 },
 divAlert:function(haveHeader,innerHTMLs,titles,css,headerCss,id,oDrag){//入口，打开遮照和确定层
  var _this = this;
  _this.setZZDiv("open");
  _this.setDiv(haveHeader,innerHTMLs,titles,css,headerCss,id,oDrag);
 },
 //setDiv:function(css,haveHeader,innerHTMLs,id,oDrag){//确定层信息控制
 setDiv:function(haveHeader,innerHTMLs,titles,css,headerCss,id,oDrag){//确定层信息控制
  var _this = this;
  if(haveHeader == false)
  {
   _this.divs.removeChild(_this.header);
  }
  _this.setContentHTML(innerHTMLs);
  //_this.divs.innerHTML = innerHTMLs;
  _this.setHeaderInnerHTML(titles);
  _this.setHeaderCss(headerCss);
  _this.setCss(css);
  _this.divs.style.display = "block";
  _this.divs.style.position = "absolute";
  _this.divs.style.zIndex = 101;
  _this.divs.style.top = (document.documentElement.scrollTop+100) + "px";
 　　_this.divs.style.left = (_this.zzDiv.offsetWidth/2 - _this.divs.offsetWidth/2) + "px";
  _this.$(id).style.cursor = "pointer";
  _this.$(id).onclick = function(){_this.divs.style.display = "none";_this.setZZDiv("close");};
  if(oDrag != false)
  {
   _this.$(oDrag).style.cursor = "move";
   _this.moveReady(oDrag);
   _this.moveReady(_this.header);
  }
  else
  {
   _this.moveReady(_this.header);
  }  
 },
 moveReady:function(o){　//拖动鼠标元素设定
  var _this = this;
  _this.$(o).onmousedown = function(e){  
   var e = e ? e : event;
   var mouseDown = document.all ? 1 : 0;
   if(e.button == mouseDown)
   {
    _this.x = e.clientX;
    _this.y = e.clientY;
    _this.dragState = true;    
   }
  }
  _this.$(o).onmouseup = function(){_this.dragState = false;}
  //_this.$(o).onmouseout = function(){_this.dragState = false;}
  //_this.$(o).onmouseover = function(){_this.dragState = true;}
  document.onmouseup = function(){_this.dragState = false;}
 
  document.onselectstart=function(){return false}
  document.onmousemove = function(e){
   var e = e ? e : event;
   if(_this.dragState == true)
   {   
    _this.dragBegin(e);
   }
   else
   {
    
   }
  }
 },
 dragBegin:function(e){　//拖动函数
  
  var _this = this;  
  var e = e ? e : event;  
  var mouseDown = document.all ? 1 : 0;
  if(e.button == mouseDown)
  { 
  
   var x = e.clientX;
   var y = e.clientY;  
   if((_this.divs.offsetLeft + (x - _this.x) <= 0) || (_this.divs.offsetLeft + (x - _this.x) -　_this.divs.offsetWidth >= _this.zzDiv.offsetWidth))
   {
    //
    if(_this.divs.offsetLeft + (x - _this.x) -　_this.divs.offsetWidth >= _this.zzDiv.offsetWidth)
    {   
     _this.divs.style.left = _this.zzDiv.offsetWidth + "px";
    }
    else
    {
     _this.divs.style.left = "0px";
    }
   }
   else
   {    
    _this.divs.style.left = (_this.divs.offsetLeft + (x - _this.x)) + "px";
    //_this.divs.style.left = "0px";
   }
   _this.divs.style.top = (_this.divs.offsetTop + (y - _this.y)) + "px";  
   _this.x = x;
   _this.y = y;
   //alert(x);
  }
 },
 setHeaderInnerHTML:function(mes){　//设置头部内容
  if(mes != false)
  {
   this.header.innerHTML = mes;
  }  
 },
 setHeaderCss:function(css){　//设置头部css
  if(css != false)
  {
   this.header.style.cssText = "cursor:move;" + css;
  }
 },
 setContentHTML:function(mes){
  if(mes != false)
  {
   this.contenter.innerHTML = mes;
  }
 },
 setCss:function(css){
  if(css != false)
  {
   this.divs.style.cssText = css;
  }
 },
 $:function(o){//获取对象
  if(typeof(o) == "string")
  {
   if(document.getElementById(o))
   {
    return document.getElementById(o);
   }
   else
   {
    alert("errId /""+ o + "/"!");
    return false;
   }
  }
  else
  {
   return o;
  }
 }
 
}
window.onload = function(){ 
  var c = new makeSure(); 
 
  haveHeader = true;
  innerHTMLs = "<span id='b'><br/><br>博客中心<br><a href='http://blog.csdn.net/fkedwgwy'>http://blog.csdn.net/fkedwgwy</a></span>";
  titles= "fkedwgwy<span id='a'>关闭</span>";
  css = false;
  headerCss = false;
  id="a";
  oDrag="b";    
  document.getElementById("sure").onclick = function(){
  c.divAlert(haveHeader,innerHTMLs,titles,css,headerCss,id,oDrag);}  
}
</script>
<input type="button" id="sure" value= "查看效果效果">