Question

我使用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 });
    });
};

这是在“hover / unhover / click”上调用它的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个小时，无法找出问题所在。如果有人知道为什么会这样，那么他将为我节省时间。

p.s：sry for bad enlish。

Answer 1

而不是：

$(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'

告诉我它是否仍无效。

悬停时jquery图像调整大小不适用于Firefox

1 个答案: