「リトル・レディ」かってに復活開発日誌 #9

今日の課題

• start ボタンクリック時のワイプ処理を動作させる

目的

• 意図された演出を体験する

作業録

クリック時の処理をおさらい

// /index.htm
function topS(){
    var BSW  = getBSW()+15;
    var BSW1 = Math.floor(BSW/2);
    var BSH1 = getBSH()+10;

    // 省略（読み込みシナリオの振り分け）

    JwipeCLIP2('sheet1',270,BSW1,270,BSW1,'000000',0,BSW,BSH1,0,'event.htm',40);
}

画面サイズ取得処理の修正

document.all判断によって、常にnullを返してしまっていた。 これを以下のように修正した。

// /js/eventP.js

/////////////////////////////////////
//○ブラウザの横サイズをゲット
function getBSW() {
    var pageW = document.body.clientWidth;
    return pageW;
}
/////////////////////////////////////
//○縦サイズをゲット
function getBSH() {
    var pageH = document.body.clientHeight;
    return pageH;
}

ワイプ処理の修正

この処理も、以下の不具合があったので修正した。

• document.all判断によって、色、サイズの適切な指定ができなくなっていた
• element.style.width|height の返り値が XXXpx形式のため、適切に比較できなくなっていた

// /index.htm

function JwipeCLIP2(layName,stT,stR,stB,stL,color,endT,endR,endB,endL,newP,step){
    if(!wipIniFlag){ //--wip ini
        Ct=stT;Cr=stR;Cb=stB;Cl=stL;
        stepT=(Math.max(Ct,endT)-Math.min(Ct,endT))/step //--step計算
        stepR=(Math.max(Cr,endR)-Math.min(Cr,endR))/step
        stepB=(Math.max(Cb,endB)-Math.min(Cb,endB))/step
        stepL=(Math.max(Cl,endL)-Math.min(Cl,endL))/step
        clipvalue  = Ct+','+Cr+','+Cb+','+Cl+',"'
        clipvalue += color+'",'
        clipvalue += endT+','+endR+','+endB+','+endL+',"'
        clipvalue += newP+'",'+step
        document.getElementById(layName).style.backgroundColor=color;
        wipIniFlag=true
    }
    if(Ct>endT)Ct-=stepT
    if(Cr<endR)Cr+=stepR
    if(Cb<endB)Cb+=stepB
    if(Cl>endL)Cl-=stepL
    if(!(Ct>endT)&&!(Cr<endR)&&!(Cb<endB)&&!(Cl>endL)){
        clearTimeout(wiptID)
        setTimeout('newPage2("'+newP+'")',10)
    }else{
        wiptID=setTimeout('JwipeCLIP2("'+layName+'",'+clipvalue+')',10)
    }

    var element = document.getElementById(layName);
    var getFloat = function(val){
        var returnValue = parseFloat(val);
        if(isNaN(returnValue)){
            return 0;
        }
        return returnValue;
    }
    if(getFloat(element.style.width) < Cr) {
        element.style.width = Cr;
    }
    if(getFloat(element.style.height) < Cb) {
        element.style.height = Cb;
    }
    setCLIP(layName,Ct,Cr,Cb,Cl);
}

クリップ処理の修正

document.all判断によって、常にクリップしなくなっていた。 これを修正した。

// /js/eventP.js

/////////////////////////////////////
//○レイヤにクリップをかける
function setCLIP(layName, clipT, clipR, clipB, clipL) {
    var clipformat = 'rect(' + clipT + 'px,' + clipR + 'px,' + clipB + 'px,' + clipL + 'px)';
    document.getElementById(layName).style.clip = clipformat;
}

動作確認

動いた。

yajamon.hatenablog.com

次

yajamon.hatenablog.com