解读 M$ 源代码：JavaScript + CSS 实现层的平移及动态显示

<!–解读 m$ 源代码：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" 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" src="images/fengexian.gif" width="762" height="20" border="0" alt="" style="filter:alpha(opacity=0);">
                    <img id="blank" 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" 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 src="images/jiaocheng.gif" width="60" height="60" border="0" alt="" hspace="10" align="10">
                                </td>
                                <td>
                                    <img id="user" src="images/jiaocheng1.gif" width="200" height="50" border="0" alt="" vspace="1">
                                    <br>
                                    <img 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 src="images/wuxia.gif" width="60" height="60" border="0" alt="" hspace="10" vspace="10">
                                </td>
                                <td>
                                    <img id="manage" src="images/wuxia1.gif" width="200" height="50" border="0" alt="" vspace="1">
                                    <br>
                                    <img 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 src="images/wangluo.gif" width="60" height="60" border="0" alt="" hspace="10" vspace="10">
                                </td>
                                <td>
                                    <img id="manage" src="images/wangluo1.gif" width="200" height="50" border="0" alt="" vspace="1">
                                    <br>
                                    <img 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 src="images/kaixin.gif" width="60" height="60" border="0" alt="" hspace="10" vspace="10">
                                </td>
                                <td>
                                    <img id="manage" src="images/kaixin1.gif" width="200" height="50" border="0" alt="" vspace="1">
                                    <br>
                                    <img 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–>