如何使用JavaScript控制层拖动及背景透明?
//floatbox.js
function getElement(aID)
{
return (document.getElementById) ? document.getElementById(aID)
: document.all[aID];
}
function getAllElement()
{
return (document.getElementsByTagName) ? document.getElementsByTagName("*")
: document.all;
}
function getParentElement(elm)
{
return (elm.parentElement) ? elm.parentElement : elm.parentNode
}
var Drag={
"obj":null,
"init":function(a, aRoot){
a.onmousedown=Drag.start;
a.root = aRoot;
if(isNaN(parseInt(a.root.style.left)))a.root.style.left="0px";
if(isNaN(parseInt(a.root.style.top)))a.root.style.top="0px";
a.root.onDragStart=new Function();
a.root.onDragEnd=new Function();
a.root.onDrag=new Function();
},
"start":function(a){
var b=Drag.obj=this;
a=Drag.fixE(a);
var c=parseInt(b.root.style.top);
var d=parseInt(b.root.style.left);
b.root.onDragStart(d,c,a.clientX,a.clientY);
b.lastMouseX=a.clientX;
b.lastMouseY=a.clientY;
document.onmousemove=Drag.drag;
document.onmouseup=Drag.end;
return false;
},
"drag":function(a){
a=Drag.fixE(a);
var b=Drag.obj;
var c=a.clientY;
var d=a.clientX;
var e=parseInt(b.root.style.top);
var f=parseInt(b.root.style.left);
var h,g;
h=f+d-b.lastMouseX;
g=e+c-b.lastMouseY;
b.root.style.left=h+"px";
b.root.style.top=g+"px";
b.lastMouseX=d;
b.lastMouseY=c;
b.root.onDrag(h,g,a.clientX,a.clientY);
return false;
},
"end":function(){
document.onmousemove=null;
document.onmouseup=null;
Drag.obj.root.onDragEnd(parseInt(Drag.obj.root.style.left),parseInt(Drag.obj.root.style.top));
Drag.obj=null;
},
"fixE":function(a){
if(typeof a=="undefined")a=window.event;
if(typeof a.layerX=="undefined")a.layerX=a.offsetX;
if(typeof a.layerY=="undefined")a.layerY=a.offsetY;
return a;
}
};
function addLightboxMarkup() {
bod = document.getElementsByTagName('body')[0];
overlay = document.createElement('div');
overlay.id= 'overlay';
bod.appendChild(overlay);
}
function hideSelect(visibility){
selects = document.getElementsByTagName('select');
for(i = 0; i < selects.length; i++) {
selects[i].style.visibility = visibility;
}
}
function preIE(height, overflow){
bod = document.getElementsByTagName('body')[0];
bod.style.height = height;
bod.style.overflow = overflow;
htm = document.getElementsByTagName('html')[0];
htm.style.height = height;
htm.style.overflow = overflow;
}
function getRange() {
var top = document.documentElement.scrollTop;
var left = document.documentElement.scrollLeft;
var height = document.documentElement.clientHeight;
var width = document.documentElement.clientWidth;
if (top==0 && left==0 && height==0 && width==0) {
top = document.body.scrollTop;
left = document.body.scrollLeft;
height = document.body.clientHeight;
width = document.body.clientWidth;
}
return {top:top ,left:left ,height:height ,width:width } ;
}
function showBox(e){
if(typeof e=="undefined")e=window.event;
//获取 原贴信息
var lobj=e.srcElement;
var rel=lobj.getAttribute("rel");
var relobj=getElement(rel);
var rbody = relobj.innerHTML;
rbody=rbody.replace(/<.*>/gi,"");
//rbody=rbody.replace(/<[^>]*>/gi,"");
if(rbody.length>55){
rbody = rbody.substring(0,55) + "...";
}
getElement("quotebody").innerHTML=rbody;
getElement("quote").value=rel;
hideSelect("hidden");
overlay.style.display="block";
WfloatBox.style.display="block";
var range=getRange();
WfloatBox.style.top=(range.top+WfloatBox.oy) +"px";
WfloatBox.style.left=(range.left+WfloatBox.ox) +"px";
//window.onscroll=onbodyscroll;
}
function onbodyscroll(){
var range=getRange();
WfloatBox.style.top=(range.top+WfloatBox.oy) +"px";
WfloatBox.style.left=(range.left+WfloatBox.ox) +"px";
}
function closeBox(){
hideSelect("visible");
overlay.style.display="none";
WfloatBox.style.display="none";
}
function initbox(){
var range=getRange();
WfloatBox=getElement("floatBox");
WfloatBox.ox=(range.width-400)/2;
WfloatBox.oy=(range.height-300)/2;
//加载拖动事件
Drag.init(getElement("draghead"),WfloatBox);
WfloatBox.onDragEnd=function(x,y){
WfloatBox.ox=x-getRange().left;
WfloatBox.oy=y-getRange().top;
}
addLightboxMarkup();
overlay.style.height=document.body.clientHeight;
var all=getAllElement();
var l=all.length;
for(var i=0;i<l;i++){
var o=all[i];
if(o.className=="lbOn")
{
o.attachEvent("onclick",showBox);
}
}
}
window.onload=initbox;
本文地址:http://www.45fan.com/dnjc/69729.html