0

以下のコードを使用して、画像のクリックでLighbox効果を実装しようとしています 

        document.addEventListener('click',function(){
        var target = event.target || event.srcElement;
        if(target.className == "acv"){
            var id = target.id, src= target.src, 
            type = target.nodeName, imgW, imgH,
            temp = document.createElement('div'),
            sHeight = screen.availHeight,    
            sWidth = screen.availWidth,
            st = temp.style;
            var img = new Image();
            img.onload = function(){
                imgW = this.width;
                imgH = this.height;
            }
            img.src = src;
            var imgH = ( sHeight >= imgH + 20 ? imgH : (sHeight - 20) );
            var imgW =  ( sWidth >= imgW + 20 ? imgW : (sWidth - 20) );
            img.style.height = imgH;
            img.style.width = imgW;
            img.style.position = "relative";
            img.style.left = ( (sWidth - imgW) / 2 ) + "px";
            img.style.top = ( (sHeight - imgH) / 2 ) + "px";
            temp.appendChild(img);
            temp.id = "lightbox";
            st.width = sWidth + "px";
            st.height = sHeight + "px";
            st.backgroundColor = "Gray";
            st.zIndex = 123;
            st.position = "absolute";
            st.top = st.left = 0;
            st.margin = "0 auto";
            document.body.appendChild(temp);
        }
    });​

ここで作業フィドルを確認してください。

そして、私はこれで何か間違ったことをしたように感じます。訂正して、コードを改善するのを手伝ってください。

4

1 に答える 1

1

イメージがすでにロードされているonloadイベントが発生しない場合は、イベント本体で初期化されたImgWとImgHを使用して、イベントハンドラーのスコープ外で使用しようとするのも間違いのようです。少なくとも、イベントハンドラーでimgを「修正」する必要があります。ここまで、フィドルでうまく機能するコード：

document.addEventListener('click', function() {
    var target = event.target || event.srcElement;
    if (target.className == "acv") {
        //     debugger;
        var id = target.id,
            src = target.src,
            type = target.nodeName,
            imgW, imgH, temp = document.createElement('div'),
            sHeight = screen.availHeight,
            sWidth = screen.availWidth,
            st = temp.style;
        var img = new Image();
        img.src = src + '?rand=' + Math.random();
        //HIDE before we sure that image loaded!
        img.style.display = "none";
        var pos_img = function(img) {
            var imgH = img.height,
                imgW = img.width;
            imgH = (sHeight >= imgH + 20 ? imgH : (sHeight - 20));
            imgW = (sWidth >= imgW + 20 ? imgW : (sWidth - 20));
            img.style.height = imgH;
            img.style.width = imgW;
            img.style.position = "relative";
            img.style.left = ((sWidth - imgW) / 2) + "px";
            img.style.top = ((sHeight - imgH) / 2) + "px";
            //SHOW IMAGE BACK
            img.style.display = "block";
        };
        //image not loaded?
        if (img.complete === false) {
            img.addEventListener('load', function(e) {
                console.log("LOAD", e, img);
                //TODO remove EventListener ?
                pos_img(img);
            });
        } else {

            pos_img(img);
        }
        temp.appendChild(img);
        temp.id = "lightbox";
        st.width = sWidth + "px";
        st.height = sHeight + "px";
        st.backgroundColor = "Gray";
        st.zIndex = 123;
        st.position = "absolute";
        st.top = st.left = 0;
        st.margin = "0 auto";
        document.body.appendChild(temp);

    }
});​

また、位置の計算にはウィンドウの幅/高さを使用します。

上記のコードは本番コードを提供するものではなく、論理的な誤りがどこにあるかを示すためだけのものであることに注意してください。jslintボタンをクリックしようとすると、質問されない場合があります

于 2012-11-02T06:52:32.960 に答える