解读 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);
 &nb

本文作者:
« 
» 
快速导航

Copyright © 2016 phpStudy | 豫ICP备2021030365号-3