0

jqueryとcssを使ってギャラリーを作りました。画像を変更する機能を作成し、「ホバー/ホバー解除/クリック」時にサイズを変更して、出力「div」に合わせます。Chromeで問題なく動作しますが、FireFoxはこれを少し混乱させます。寸法のサイズ変更は、次の「ホバー/ホバー解除/クリック」の後にのみ適用されます。

これは、出力div「スライド」のHTMLです。

<div class="leftPart">
    <div class="onFlyActualView">
        <div class="Slides"><img src="ecchi/000-Girl.jpg" alt="#" /></div>
    </div>
    <div class="onFlyDescription"></div>
</div>

これは最小化されたアイテムです：

<div class="rightPart">
    <div class="onFlyMiniView">
        <ul class="oFMVLines">
            <li>
                <ul class="oFMVItems">
                    <li>0</li>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                </ul>
            </li>
            <li>
                <ul class="oFMVItems">
                    <li>4</li>
                    <li>5</li>
                    <li>6</li>
                    <li>7</li>
                </ul>
            </li>
        </ul>
      </div>
    </div>

これは「.Slides」クラスのCSSです。

.Slides {
height: auto;
width: auto;    
margin: 0px auto;
position: static;
vertical-align: middle;
}

.Slides img
{
border: 1px solid #0F0;
display: block;
position: static;
margin-top: 5px;
margin-right: auto;
margin-bottom: 5px;
margin-left: auto;
height: auto;
width: auto;
}

サイズ変更のJQueryは次のとおりです（curH、curWはグローバル変数です）。

function onFlyResize(iImage) {

    var max_size = 590;
    var divNum;
    var h, w;


    $(iImage).css({ height: 'auto', width: 'auto' });
    //$(iImage).css({ height: '0', width: '0' });
    $(iImage).each(function () {
        curH = parseFloat($(this).attr('height'));
        curW = parseFloat($(this).attr('width'));


        console.log('w: ' + curW + '; h: ' + curH);
        //$(this).css({ height: curH, width: curW });
        if (curH > curW) {
            //var h = max_size;
            divNum = curH / max_size;
            h = max_size;
            w = Math.ceil(curW / divNum);
            //alert("Height larger!");
        } else {
            divNum = curW / max_size;
            h = Math.ceil(curH / divNum);
            w = max_size;
            var tempVar = 0;
            tempVar = Math.ceil((max_size - curH) / 2);
            //alert("Width larger!");
        }
        $(this).css({ height: h, width: w });
    });
};

「ホバー/ホバー解除/クリック」時にそれを呼び出すJQueryは次のとおりです。

function onFlyGalleryImplement() 
{
var CurrImg = $(".Slides").find('img:first').attr('src');
var cur_li_cont = "0";
$(".oFMVItems li").hover(
    function () {
        $(this).css({ border: "solid 2px #06C", margin: "-1px 1px 0px 3px" }).show(400);
        cur_li_cont = $(this).text();
        var set_img_to = "ecchi/00" + cur_li_cont + "-Girl.jpg";
        $(".Slides").find('img:first').attr({ src: set_img_to });
        $(".Slides").find('img:first').attr("alt", $(".Slides").find('img:first').attr("src"));
        $(".onFlyDescription").text("Height: " + $(".Slides img").attr('height') + " Width: " + $(".Slides img").attr('width') + ".");
        onFlyResize($(".Slides img"));
    },
    function () {
        $(this).css({ border: "solid 1px #333", margin: "0px 2px 0px 4px" });
        $(".Slides").find('img:first').attr("src", CurrImg);
        $(".onFlyDescription").text("Height: " + $(".Slides img").attr('height') + " Width: " + $(".Slides img").attr('width') + ".");
        onFlyResize($(".Slides img"));
    });
    onFlyResize($(".Slides img"));

$(".oFMVItems li").click(function () {
        cur_li_cont = $(this).text();
        var set_img_to = "ecchi/00" + cur_li_cont + "-Girl.jpg";
        $(".Slides").find('img:first').attr('src', set_img_to);
        CurrImg = set_img_to;
        $(".onFlyDescription").text("Height: " + $(".Slides img").attr('height') + " Width: " + $(".Slides img").attr('width') + ".");
        onFlyResize($(".Slides img"));
    });
    onFlyResize($(".Slides img"));
};

$(window).load(function () {
onFlyResize($(".Slides img")); //A fix to start image resied for the output restrictions.
});

$("document").ready(function () {
onFlyGalleryPreloadModule(); //Function for images preload.
onFlyGalleryImplement(); // Function that runs all gallery core.
});

以上です...すでに30時間近く作業していて、何が問題なのかわかりません。なぜそれが起こるのか誰かが知っているなら、彼は私に時間を節約してくれるでしょう。

ps：悪いenlishを探してください。

4

1 に答える 1

0

これの代わりに：

$(this).css({ height: h, width: w });

代わりにこれを試してください：

$(this).height(h);
$(this).width(w);

したがって、jQueryのサイズ変更コードは次のようになります。

function onFlyResize(iImage) {

    var max_size = 590;
    var divNum;
    var h, w;


    $(iImage).css({ height: 'auto', width: 'auto' });
    //$(iImage).css({ height: '0', width: '0' });
    $(iImage).each(function () {
        curH = parseFloat($(this).attr('height'));
        curW = parseFloat($(this).attr('width'));


        console.log('w: ' + curW + '; h: ' + curH);
        //$(this).css({ height: curH, width: curW });
        if (curH > curW) {
            //var h = max_size;
            divNum = curH / max_size;
            h = max_size;
            w = Math.ceil(curW / divNum);
            //alert("Height larger!");
        } else {
            divNum = curW / max_size;
            h = Math.ceil(curH / divNum);
            w = max_size;
            var tempVar = 0;
            tempVar = Math.ceil((max_size - curH) / 2);
            //alert("Width larger!");
        }
        $(this).height(h).width(w);
    });
};

動作しない理由は次の$(this).css({height: h, width: w});とおりです。

  • 高さと幅の数値を単純に指定することはできません。「px」を追加する必要があります

それでも機能しない場合は教えてください。

于 2012-09-27T04:57:19.013 に答える