当前页面: 开发资料首页 → Javascript 专题 → JavaScript+CSS实现层的平移及动态显示
JavaScript+CSS实现层的平移及动态显示
摘要: JavaScript+CSS实现层的平移及动态显示
<!--Open.htm-->
<!--本文主要由 JavaScript 和 CSS 实现的层的平移及动态显示-->
<!--小弟的 JavaScript 水平实在有够差劲，故以下注解均为个人理解，有疏漏及不当之处还请各位大虾指正-->
<!--以下源代码来源于 M$ Windows 2000 Professional 安装光盘的 DISCOVER 目录，更改之处见文档的最有注解-->. .<SCRIPT language="javascript">
var StartV = 0.5;
var EndV = 1;
var MidV;
var Inc = 0.12;
var Power = 3;
/* Inc 与 Power 共同控制每循环 alpha 的变化量及循环总个数*/
var mSec = 20;
var SlStartV;
var SlEndV;
var SlInc;
var mSec;
var openSec = 20;//控制循环完成所需时间
var SlPower;
. .function fadeLogo() {
if (EndV > .9999) {
StartV = StartV + Inc;
MidV = Math.sin(StartV) + 1;
EndV = Math.pow(MidV,Power);
/*个人认为采用形如“int i;i=1;i++”的方式定义 EndV，亦可达到 alpha 变化的效果，但是那样只是匀速变化，不及此处使用的具有动感罢了*/
document.all.brandLogo.filters.alpha.opacity = document.all.brandLogo.filters.alpha.opacity + EndV ;
document.all.Discover.filters.alpha.opacity = document.all.Discover.filters.alpha.opacity + EndV ;
document.all.Marketing.filters.alpha.opacity = document.all.Marketing.filters.alpha.opacity + EndV;
/*为实现 alpha 与平移的连续性，亦可在 EndV 后加一个常量，这样控制会容易一些*/
//alert(document.all.Discover.filters.alpha.opacity);
/*如我一般的菜鸟，可采用 alert 的方法跟踪某个变量，以达到所需的效果，只是小心不要出现死循环，到时候别骂我哦~~
本例中跟踪了 alpha 的值，100只出现一次便是我要的效果，即 alpha 与平移的连续*/
timer = window.setTimeout("fadeLogo();", openSec, "JavaScript");
} else {
SlStartV = 0.5;
SlEndV = 1;
SlInc = 0.055;
SlPower = 4;
mSec = 30;
/*变量赋值，以适应下次调用的需求。
SlInc 与 SlPower 共同控制每循环位置的变化量及循环总个数*/
openSlide();//调用 openSlide()，平移开始。注1。
}
}. .function openSlide() {
if (SlEndV > .9999) {
SlStartV = SlStartV + SlInc;
SlMidV = Math.sin(SlStartV) + 1;
SlEndV = Math.pow(SlMidV,SlPower);
/*跟上边一样，没什么好说的，除了我不懂 Math.pow 以外*/
Plane.style.posTop = Plane.style.posTop - SlEndV;
if (Plane.style.posTop < 150) {Marketing.style.display = "none"}//隐蔽被遮蔽层，当上移层高度超过他的高度的时候。可通过改变条件得到最佳效果。
timer = window.setTimeout("openSlide();", mSec, "JavaScript");
} else {
Blank.style.display = "none";//隐藏空白层(Blank)，见下面关于空白层的说明
SlStartV = 0.5;
SlEndV = 1;
SlInc = 0.09;
mSec = 30;
SlPower = 3
/*变量重赋值，其余没什么好说的，跟上边一样*/
navSlide();
}
}. .function navSlide() {
if (SlEndV > .9999) {
SlStartV = SlStartV + SlInc;
SlMidV = Math.sin(SlStartV) + 1;
SlEndV = Math.pow(SlMidV,SlPower);
TOC.style.posLeft = TOC.style.posLeft + SlEndV;
timer = window.setTimeout("navSlide();", mSec, "JavaScript");
} else {
SlStartV = 0.5;
SlEndV = 1;
SlInc = 0.05;
mSec = 30;
SlPower = 4;
menu1Slide();
}
}
function menu1Slide() {
if (SlEndV > .9999) {
SlStartV = SlStartV + SlInc;
SlMidV = Math.sin(SlStartV) + 1;
SlEndV = Math.pow(SlMidV,SlPower);
Menu1.style.posTop = Menu1.style.posTop + SlEndV;
timer = window.setTimeout("menu1Slide();", mSec, "JavaScript");
} else {
SlStartV = 0.5;
SlEndV = 1;
SlInc = 0.05;
mSec = 30;
SlPower = 4;
menu2Slide();
}
}. .function menu2Slide() {
if (SlEndV > .9999) {
SlStartV = SlStartV + SlInc;
SlMidV = Math.sin(SlStartV) + 1;
SlEndV = Math.pow(SlMidV,SlPower);
Menu2.style.posTop = Menu2.style.posTop + SlEndV;
timer = window.setTimeout("menu2Slide();", mSec, "JavaScript");
} else {
SlStartV = 0.5;
SlEndV = 1;
SlInc = 0.05;
mSec = 30;
SlPower = 4;
menu3Slide();
}
}
. .function menu3Slide() {
if (SlEndV > .9999) {
SlStartV = SlStartV + SlInc;
SlMidV = Math.sin(SlStartV) + 1;
SlEndV = Math.pow(SlMidV,SlPower);
Menu3.style.posTop = Menu3.style.posTop + SlEndV;
timer = window.setTimeout("menu3Slide();", mSec, "JavaScript");
} else {
SlStartV = 0.5;
SlEndV = 1;
SlInc = 0.05;
mSec = 30;
SlPower = 4;
menu4Slide();
}
}
. .function menu4Slide() {
if (SlEndV > .9999) {
SlStartV = SlStartV + SlInc;
SlMidV = Math.sin(SlStartV) + 1;
SlEndV = Math.pow(SlMidV,SlPower);
Menu4.style.posTop = Menu4.style.posTop + SlEndV;
timer = window.setTimeout("menu4Slide();", mSec, "JavaScript");
} else {
SlStartV = 0.5;
SlEndV = 1;
SlInc = 0.05;
mSec = 30;
SlPower = 4;
return;
}
}. .</SCRIPT>
<Body bgcolor="White" onload="fadeLogo();this.focus(); " leftmargin="0" topmargin="0"> <!--注2-->
<table>
<tr>
<td align="center">
<IMG ID="brandLogo" style="filter:alpha(opacity=0)" class="Brand" alt=JavaScript+CSS实现层的平移及动态显示 src="images/banner.gif" width="480" height="60" border="0" alt="" style="position:absolute; left: 143; top: 0;">
<!--style="filter:alpha(opacity=0)"：定义初始 alpha 值为 0，下同。 -->
<DIV ID="Plane" style="position:absolute; left: 0; top: 552;">
<IMG ID="Discover" alt=JavaScript+CSS实现层的平移及动态显示 src="images/fengexian.gif" width="762" height="20" border="0" alt="" style="filter:alpha(opacity=0);">
<IMG ID="Blank" alt=JavaScript+CSS实现层的平移及动态显示 src="images/blank.gif" width="562" style="position: relative; top: -4" height="300" border="0" alt="">
<!-- 当上移层(Discover)的下边线超过被遮蔽层(Marketing)的下边线时，为了不让被遮蔽层(Marketing)被看到，需要用一个空白层(Blank)来遮蔽。空白层到达指定位置后需要隐藏。
如果上移层(Discover)的高度大于被遮蔽层(Marketing)，则不会出现这种情况，此时，不需要空白层(Blank)-->
<br>
</DIV>
<IMG ID="Marketing" alt=JavaScript+CSS实现层的平移及动态显示 src="images/ad.gif" width="562" height="526" border="0" alt="" style="position:absolute; left: 200; top: 60; display:block; filter:alpha(opacity=0); z-index:-1">
<DIV ID="TOC" style="background-image: url(images/leftback.gif); width:200; height:524; position:absolute; top:62; left:-200; z-index:-2">
<IMG SRC="images/welcome.gif" ID="DisTxt" style="position:absolute; top:10; left:-20;" width="200" height="560" border="0" alt="" hspace="2" vspace="2">
</DIV>
<A target="_self" href="jiaocheng/default.htm" onclick="top.TopMain.Main.location='jiaocheng/default.htm'" onmouseOver="javascript:document.all.Menu1.filters.alpha.opacity = 100;" onmouseOut="javascript:document.all.Menu1.filters.alpha.opacity = 50;">
<!--onmouseOver="javascript:document.all.Menu1.filters.alpha.opacity = 100;" onmouseOut="javascript:document.all.Menu1.filters.alpha.opacity = 50;"：定义鼠标悬停与否使对象的 alpha 值改变，下同。注3-->
<DIV ID="Menu1" style="position:absolute; top:-400; left:260; z-index:-2;filter:alpha(opacity=50);cursor:hand;">
<!--cursor:hand;：定义悬停时鼠标形状为手型，下同。注4-->
<TABLE border="0" cellspacing="0" cellpadding="0" style="font-size: 12; font-family: Arial; font-weight: bold;">
<tr>
<td>
<IMG alt=JavaScript+CSS实现层的平移及动态显示 src="images/jiaocheng.gif" width="60" height="60" border="0" alt="" hspace="10" align="10">
</td>
<td>
<IMG ID="User" alt=JavaScript+CSS实现层的平移及动态显示 src="images/jiaocheng1.gif" width="200" height="50" border="0" alt="" vspace="1">
<br>
<IMG alt=JavaScript+CSS实现层的平移及动态显示 src="images/xian.gif" width="249" height="2" border="0" alt="">
</td>
</tr>
</TABLE>
</DIV>
</A><A target="_self" href="wuxia/default.htm" onclick="top.TopMain.Main.location='wuxia/default.htm'" onmouseOver="javascript:document.all.Menu2.filters.alpha.opacity = 100;" onmouseOut="javascript:document.all.Menu2.filters.alpha.opacity = 50;">
<DIV ID="Menu2" style="position:absolute; top:-310; left:260; z-index:-2;filter:alpha(opacity=50);cursor:hand;">
<TABLE border="0" cellspacing="0" cellpadding="0" style="font-size: 12; font-family: Arial; font-weight: bold;">
<tr>
<td>
<IMG alt=JavaScript+CSS实现层的平移及动态显示 src="images/wuxia.gif" width="60" height="60" border="0" alt="" hspace="10" vspace="10">
</td>
<td>
<IMG ID="Manage" alt=JavaScript+CSS实现层的平移及动态显示 src="images/wuxia1.gif" width="200" height="50" border="0" alt="" vspace="1">
<br>
<IMG alt=JavaScript+CSS实现层的平移及动态显示 src="images/xian.gif" width="249" height="2" border="0" alt="">
</td>
</tr>
</TABLE>
</DIV>
</A><A target="_self" href="wangluo/default.htm" onclick="top.TopMain.Main.location='wangluo/default.htm'" onmouseOver="javascript:document.all.Menu3.filters.alpha.opacity = 100;" onmouseOut="javascript:document.all.Menu3.filters.alpha.opacity = 50;">
<DIV ID="Menu3" style="position:absolute; top:-210; left:260; z-index:-2;filter:alpha(opacity=50);cursor:hand;">
<TABLE border="0" cellspacing="0" cellpadding="0" style="font-size: 12; font-family: Arial; font-weight: bold;">
<tr>
<td>
<IMG alt=JavaScript+CSS实现层的平移及动态显示 src="images/wangluo.gif" width="60" height="60" border="0" alt="" hspace="10" vspace="10">
</td>
<td>
<IMG ID="Manage" alt=JavaScript+CSS实现层的平移及动态显示 src="images/wangluo1.gif" width="200" height="50" border="0" alt="" vspace="1">
<br>
<IMG alt=JavaScript+CSS实现层的平移及动态显示 src="images/xian.gif" width="249" height="2" border="0" alt="">
</td>
</tr>
</TABLE>
</DIV>
</A><A target="_self" href="kaixin/default.htm" onclick="top.TopMain.Main.location='kaixin/default.htm'" onmouseOver="javascript:document.all.Menu4.filters.alpha.opacity = 100;" onmouseOut="javascript:document.all.Menu4.filters.alpha.opacity = 50;">
<DIV ID="Menu4" style="position:absolute; top:-100; left:260; z-index:-2;filter:alpha(opacity=50);cursor:hand;">
<TABLE border="0" cellspacing="0" cellpadding="0" style="font-size: 12; font-family: Arial; font-weight: bold;">
<tr>
<td>
<IMG alt=JavaScript+CSS实现层的平移及动态显示 src="images/kaixin.gif" width="60" height="60" border="0" alt="" hspace="10" vspace="10">
</td>
<td>
<IMG ID="Manage" alt=JavaScript+CSS实现层的平移及动态显示 src="images/kaixin1.gif" width="200" height="50" border="0" alt="" vspace="1">
<br>
<IMG alt=JavaScript+CSS实现层的平移及动态显示 src="images/xian.gif" width="249" height="2" border="0" alt="">
</td>
</tr>
</TABLE>
</DIV>
</A>
</td>
</tr>
</table>
</Body>
<!--
注1：原(M$)代码中使用"timer = window.setTimeout("openSlide();", mSec, "JavaScript");"来调用下一个过程的，个人认为没有什么意义，所以改为直接调用"openSlide()"，以下均是如此。
注2：原(M$)代码中包含有调用声音的函数，本文已全部略去。
注3：原(M$)代码中鼠标悬停时调用的是另一幅图像，本文中改为更改对象的 alpha 值而得到理想的效果，下同。
注4：原(M$)代码是在 IMG 对象中说明 cursor:hand ，本文改为在 DIV 对象中说明，下同。
以上代码中可以看出，JavaScript 动态生成变量，用以随时间改变层的绝对定位坐标，以实现层的位移；而使用 CSS 的滤镜 alpha ，随时间改变对象的 alpha 值，即可实现层的动态显示。
相同的效果由 Flash 亦可实现，至于哪种方式更快些，，更加适合网页的应用，因为没有测试，所以我就不知道了~~
-->
<!--CopyRight By Cheery_Ke,04-07-2002,All Reserved-->
↑返回目录
前一篇: JavaScript + CSS 实现动态菜单显示
后一篇: javascript的图片浏览