浮动层,一个可以让布局动起来的东西.现在很少网站上用到这种效果.在国处的博客中很流行.
结合网上找的资料,和大家分享一下一个简单的浮动层实现方法.
效果:
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= "查看效果效果">