Question

点击并按住CLICK ME以调整图片大小。现在的问题是，根据代码，它应该按比例调整，并且它在开始时进行，但在几秒后，它开始拉伸。知道为什么会这样吗？

HTML：

<input type="text" name="zoom" id="zoom" value="0"/><a id="zoomBtn" href="#">CLICK ME</a><br/><br/>
<img id="zoomBox" src='http://openiconlibrary.sourceforge.net/gallery2/open_icon_library-full/icons/png/32x32/categories/applications-internet-5.png' width='32px' height='32px'>

JS：

$("#zoom").val("0");
var ztimer;
$("#zoomBtn").click(function(e){
                    e.preventDefault();
                }).on('mousedown',function(e){
                    var tt = $(this);
                    zoomIncTimer = setInterval(function(_t=tt){
                        if(tt.data('clearTimer')==true){
                            clearInterval(zoomIncTimer);
                        }
                        else{
                            var ref = $("#zoom");
                            var zoom = parseInt(ref.val())+1;
                            if(isNaN(zoom))
                            {
                                zoom=0;
                            }
                            ref.val(zoom);
                            var currZoom = parseFloat($("#zoom").val());//this was in a different function call in actual code
                        if(isNaN(currZoom) || currZoom<0)
                        {
                            currZoom = 0;
                        }
                        var pic = $("#zoomBox");
                        var ew = 132;//default width
                        var eh = 170;//default height
                        var iw = pic.width();
                        var ih = pic.height();
                        var nw = 0;
                        var nh = 0;
                        /*if(iw<ih)
                        {
                            nw = ew+currZoom;
                            nh = ih*(nw/iw);
                        }
                        else
                        {*/
                            nh = eh+currZoom;
                            nw = iw*(nh/ih);
                        //}
                            pic.attr('width',nw+'px').attr('height',nh+'px');
                        }
                    },100);
                    tt.data('clearTimer',false);
                }).on('mouseup mouseout',function(e){
                    $(this).data('clearTimer',true);
                });

PS：问题在于图像attr，因为如果我使用css设置尺寸......它可以正常工作。

哦，我正在使用firefox进行测试，以防万一。

Answer 1

将var iw和var ih切换为：

var iw = pic.attr('width');
var ih = pic.attr('height');

它有效。

http://jsfiddle.net/SugKp/5/

编辑：

它与firefox如何进行数学运算有关，还有一些jquery错误，因为如果你切换

nw = iw*(nh/ih);

到

nw = iw*nh/ih;

适用于Firefox。在第一次缩放后的任何给定时间，nh递增1。

所以当你有前一个等式时，你有178 *（179/178）= 178 * 1.005617977 = 178.99999997。

Vs以上。 178 * 179/178 = 31862/178 = 179。

我不太明白这些方程式的必要性。 nh递增1.如果数学运算相应，理论上nw将递增1。为什么不将每个增加1？

此外，将宽度设置为NaN时会出现一些错误。因为当你将它切换到css attr时，宽度最终变为NaN。不知何故：

pic.attr('width',1/0).attr('height',nh);

也有效。（1/0 = Nan）。任何NaN都可以使这项工作。

根据jquery，.width返回一个数字，而.attr（'width'）返回一个带像素的数字。因此，当你在第一个数学之后对它进行数学计算时，它就变成了NaN。

我认为你需要将这一点归结为奇怪的怪癖？

用jquery调整奇怪的图像大小问题

1 个答案: