0

Here is the fiddle:http://jsfiddle.net/SugKp/2/

Click and hold on CLICK ME to resize the image. Now the thing is, as per the code, it is supposed to resize proportionately, and it does in the beginning, but after a few secs, it starts to stretch. Any idea why this happens?

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: Problem is with image attr, cause if I use css to set the dimensions...it works properly.

Oh and I am using firefox to test, just in case.

4

1 回答 1

0

Switch the var iw and var ih to:

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

And it works.

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

EDIT:

It has something to do with how firefox does math, and some jquery bug because if you switch

nw = iw*(nh/ih);

to

nw = iw*nh/ih;

It works in Firefox. At any given time after the first zoom, nh increments by 1.

So when you have the former equation, you have 178 * (179/178) = 178 * 1.005617977 = 178.99999997.

Vs. 178 * 179 / 178 = 31862/178 = 179.

I don't quite understand the need for these equatione. nh is incrementing by 1. nw in theory would be incrementing by 1 if the math was working accordingly. Why not just increment each by 1?

Also, there is some bug when setting the width to NaN. Because when you switch it to the css attr, width eventually becomes NaN. And somehow:

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

Also works. (1/0 = Nan). Any NaN will make this work.

According to jquery, .width returns a number and .attr('width') returns a number with pixels. So that becomes NaN when you do math to it after the first one.

I think you need to chalk this one up to weird quirks?

于 2013-04-20T20:48:54.790 回答