87,907
社区成员
发帖
与我相关
我的任务
分享
XFadeLayout.js
/*
shawl.qiu code
class: XFadeLayout
version: 1.0
date: 2008-4-9
updated: ver, name, date.
updated x: ver, name, date.
*/
function XFadeLayout(PMain)
{
this.Ele = undefined;
this.TagTree =
[
"span"
, [
"a"
,"div"
]
];
if(typeof Ele!=undefined)
{
this.Ele = fSetObjectX(PMain);
}
this.Path = "/QWJsLib/XFadeLayout/";
this.Style = "default";
this.Fade = {};
this.Fade.WSpan = 20;
this.Fade.HSpan = 20;
this.Fade.Ms = 10;
this.Fade.MinWidth = 160;
this.Fade.Multiple = 20;
this.Fade.Sync = true;
this.Fade.OutTimeout = 500;
this.ZIndex = 1;
}//end function XFadeLayout()
XFadeLayout.prototype.Main = XFadeLayout_Main;
XFadeLayout.prototype.RelativePath = fRelativePath;
function XFadeLayout_Main()
{
var This = this;
for(var i=0, j=this.Ele.childNodes.length; i<j; i++)
{
var Child = this.Ele.childNodes[i];
if(Child.nodeType!==1) continue;
var ItemMain = Child.getElementsByTagName("span")[0];
ItemMain.style.display = "block";
var Info = fGetXYWH(ItemMain);
ItemMain.style.display = "none";
var Item = Child.getElementsByTagName(this.TagTree[1][1])[0];
if(Info.Width<This.Fade.MinWidth) Info.Width = This.Fade.MinWidth;
if(This.Fade.Sync)
{
This.Fade.WSpan = Info.Width/This.Fade.Multiple;
This.Fade.HSpan = Info.Height/This.Fade.Multiple;
}
Item.style.width = "0px";
Item.style.height = "0px";
Item.style.display = "none";
Child.ItemMain = ItemMain;
Child.Item = Item;
Child.Info = Info;
Child.onmouseover =
function(e)
{
// XCancleBubble(e);
// XPreventDefault(e);
var EThis = this;
var Item = this.Item;
var Info = this.Info;
var ItemMain = this.ItemMain;
var Pos = fGetXYWH(this);
Item.style.display = "block";
//Item.style.top = this.offsetTop+this.offsetHeight+"px";
//Item.style.left = this.offsetLeft+"px";
if(EThis.Interval!=null) return;
if(EThis.OutInterval)
{
clearInterval(EThis.OutInterval);
EThis.OutInterval = null;
}
Item.style.zIndex = ++This.ZIndex;
this.Interval =
setInterval
(
function()
{
var ItemWidth = Item.offsetWidth;
var ItemHeight = Item.offsetHeight;
var NItemWidth = ItemWidth+This.Fade.WSpan;
var NItemHeight = ItemHeight+This.Fade.HSpan;
if(NItemWidth>=Info.Width||NItemHeight>=Info.Height)
{
NItemWidth = Info.Width+20;
NItemHeight = Info.Height+15;
}
//defaultStatus = ItemWidth+This.Fade.WSpan
Item.style.width = NItemWidth+"px";
Item.style.height = NItemHeight+"px";
//Item.style.border = "1px solid black"
defaultStatus = ItemMain.style.width
if(NItemWidth>=Info.Width&&NItemHeight>=Info.Height)
{
clearInterval(EThis.Interval);
EThis.Interval = null;
//ItemMain.className = "FadeLayoutMain_ItemMain";
}
}
, This.Fade.Ms
);
}//end function(e)[Child.onmouseover]
Child.onmouseout =
function(e)
{
// //TextEle.style.display = "none";
// XCancleBubble(e);
// XPreventDefault(e);
var EThis = this;
var Item = this.Item;
var Info = this.Info;
var ItemMain = this.ItemMain;
if(EThis.Interval!=null)
{
clearInterval(EThis.Interval);
EThis.Interval = null;
}
if(EThis.OutInterval!=null) return;
//ItemMain.style.display = "none";
;
this.OutInterval =
setInterval
(
function()
{
var ItemWidth = Item.offsetWidth;
var ItemHeight = Item.offsetHeight;
var NItemWidth = ItemWidth-This.Fade.WSpan;
var NItemHeight = ItemHeight-This.Fade.HSpan;
if(NItemWidth<=0||NItemHeight<=0) NItemWidth = NItemHeight = 0;
Item.style.width = NItemWidth+"px";
Item.style.height = NItemHeight+"px";
if(NItemWidth===0&&NItemHeight===0)
{
clearInterval(EThis.OutInterval);
EThis.OutInterval = null;
Item.style.display = "none";
}
}
, This.Fade.Ms
);
}
}//end for(var i=0, j=this.Ele.childNodes.length; i<j; i++)
}//end function XFadeLayout_Main()
function fGetXYWH(Ele)
{
var a = new Array();
var t = Ele.offsetTop;
var l = Ele.offsetLeft;
var w = Ele.offsetWidth;
var h = Ele.offsetHeight;
while(Ele = Ele.offsetParent)
{
t += Ele.offsetTop;
l += Ele.offsetLeft;
}
return {Top:t, Left:l, Width:w, Height:h};
}//end function fGetXYWH(Ele)
function fSetObjectX(Obj, sMsg, Dcu, bNoAlter)
{// shawl.qiu code, return Element
if(!sMsg) sMsg = "无法获得对象!";
if(!Dcu) Dcu = document;
if(!bNoAlter) bNoAlter = false;
switch(Obj.constructor)
{
case String: Obj = Dcu.getElementById(Obj); break;
case Array: Obj = Obj[0]; break;
}
if(Obj==null&&bNoAlter==false) throw new Error(sMsg);
return Obj;
} // end function fSetObjectX(OldObj, NewObj, sMsg)
function fRelativePath(sRelative)
{// shawl.qiu code, return string
var sUrl = document.URL;
sUrl = sUrl.replace(/^.*?\:\/\/[^\/]+/, "").replace(/[^\/]+$/, "");
if(!sRelative){return sUrl;}
if(!/\/$/.test(sUrl)){sUrl += "/";}
if(/^\.\.\//.test(sRelative))
{
var Re = new RegExp("^\\.\\.\\/"), iCount = 0;
while(Re.exec(sRelative)!=null)
{
sRelative = sRelative.replace(Re, "");
iCount++;
}
for(var i=0; i<iCount; i++){sUrl = sUrl.replace(/[^\/]+\/$/, "");}
if(sUrl=="") return "/";
return sUrl+sRelative;
}
sRelative = sRelative.replace(/^\.\//, "");
return sUrl+sRelative;
} // end function fRelativePath(sRelative)
function fSetOpacity(XEle, iAlpha)
{//shawl.qiu code, void return
XEle.style.opacity = iAlpha/100;
XEle.style.filter = 'alpha(opacity=' + iAlpha + ')';
}//end function fSetOpacity(XEle, iAlpha)
function fEventElement(e)
{//shawl.qiu code, return Element
e = e||window.event;
var Ele = e.target||e.srcElement;
return Ele;
}// end function fEventElement(e)
function XCancleBubble(e)
{//shawl.qiu code, void return
if (e && e.stopPropagation ) e.stopPropagation();
else window.event.cancelBubble = true;
}//end function XCancleBubble(e)
function XPreventDefault(e)
{//shawl.qiu code, void return
if (e && e.preventDefault ) e.preventDefault();
else window.event.returnValue = false;
return false;
}//end function XPreventDefault(e)
<!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>shawl.qiu template</title>
<style type="text/css">
/* <![CDATA[ */
.FadeLayoutMain
{
width: 600px;
margin: 20px auto;
}
.FadeLayoutMain span {
float:left;
display:block;
width:100px;
background-color:#CCCCCC;
margin-right:2px;
text-align:center;
position:relative;
}
.FadeLayoutMain span div
{
position:absolute;
border:1px solid black;
background-color:#FFFFFF; /*核心BUG哈哈。。。div不得background-color:transparent;*/
left:0;
}
.FadeLayoutMain span a.title {
display:block;
}
.FadeLayoutMain span div span a
{
display:block;
}
.FadeLayoutMain_ItemMain
{
display:block!important;
padding: 5px;
}
/* ]]> */
</style>
<script type="text/javascript">
//<![CDATA[
if (navigator.appName=="Microsoft Internet Explorer") {
//最大化窗口
self.moveTo(-5,-5)
self.resizeTo(screen.availWidth +8,screen.availHeight+8)
//这个脚本定义的宽度其实比原窗口还要大那么一点.
}
//]]>
</script>
</head>
<body>
<!--
{div:{span:{}}
-->
<div id="FadeLayoutMain" class="FadeLayoutMain" style="background-color:#000000;">
<span>
<a href="#menu1" class="title">menu1</a>
<div>
<span>
<a href="#sub1_1">#sub1_1</a>
<a href="#sub1_2">#sub1_2</a>
<a href="#sub1_3">#sub1_3</a>
<a href="#sub1_4">#sub1_4</a>
<a href="#sub1_5">#sub1_5</a>
<a href="#sub1_6">#sub1_6</a>
<a href="#sub1_7">#sub1_7</a>
<a href="#sub1_8">#sub1_8</a>
<a href="#sub1_9">#sub1_9</a>
<a href="#sub1_10">#sub1_10</a>
</span>
</div>
</span>
<span>
<a href="#menu2" class="title">menu2</a>
<div>
<span>
<a href="#sub2_1">#sub2_1</a>
<a href="#sub2_2">#sub2_2</a>
<a href="#sub2_3">#sub2_3</a>
<a href="#sub2_4">#sub2_4</a>
<a href="#sub2_5">#sub2_5</a>
<a href="#sub2_6">#sub2_6</a>
<a href="#sub2_7">#sub2_7</a>
<a href="#sub2_8">#sub2_8</a>
<a href="#sub2_9">#sub2_9</a>
<a href="#sub2_10">#sub2_10</a>
</span>
</div>
</span>
</div>
<script type='text/javascript' src='../XFadeLayout.js'></script>
<script type="text/javascript">
//<![CDATA[
var Xfl = new XFadeLayout("FadeLayoutMain");
Xfl.Path = Xfl.RelativePath("../FadeLayout/");
Xfl.Main();
Xfl = null;
// TagTree =
// [
// "div"
// , [
// "span"
// , [
// "a"
// ,"div"
// ]
// ]
// ];
//]]>
</script>
</body>
</html>
<!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=gb2312" />
<title>no-bug</title>
</head>
<body>
<div style="width:100px; height:130px;">
<span style="background-color:#F4F4F4;display:block;"
onmouseover="if(!this.contains(event.fromElement)){document.getElementById('a').style.display = 'block'}"
onmouseout="if(!this.contains(event.toElement)){document.getElementById('a').style.display='none'}"
>
<a style="height:30px;line-height:30px;">a</a>
<div style="clear:both;"></div>
<div id="a" style="display:none;background:#FF0000;width:20px;height:100px;">
<span><a>v</a></span>
</div>
</span>
</div>
</body>
</html>
<!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=gb2312" />
<title>no-bug</title>
</head>
<body>
<div style="width:100px;background:#000000; height:130px;">
<span style="background-color:#F4F4F4;display:block;"
onmouseover="document.getElementById('a').style.display = 'block'"
onmouseout="document.getElementById('a').style.display='none'"
>
<a style="height:30px;line-height:30px;">a</a>
<div style="clear:both;"></div>
<div id="a" style="display:none;position:absolute;background:#FF0000;width:20px;height:100px;">
<span><a>v</a></span>
</div>
</span>
</div>
</body>
</html>
<!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=gb2312" />
<title>无标题文档</title>
</head>
<body>
<span style="background-color:#000000;">
<a>a</a>
<div style="position:absolute;background:#FF0000;">
<span><a>v</a></span>
</div>
</span>
<ul>
<li style="background-color:#000000;">
<li>
<a>a</a>
<ul style="position:absolute;background:#FF0000;">
<li>字</li>
</ul>
</li>
</li>
</ul>
</body>
</html>