0

これがフィドルです：http://jsfiddle.net/SugKp/2/

クリックしたままに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: 画像の属性に問題があります。css を使用して寸法を設定すると、正しく動作します。

念のため、Firefox を使用してテストしています。

4

1 に答える 1

0

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 になります。

対。178 * 179 / 178 = 31862/178 = 179.

これらの方程式の必要性がよくわかりません。nh は 1 ずつ増加します。理論的には、数学が適切に機能していれば、nw は 1 ずつ増加します。それぞれを1ずつインクリメントしないのはなぜですか？

また、幅を NaN に設定するとバグが発生します。css属性に切り替えると、幅が最終的にNaNになるためです。そしてどういうわけか：

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

また、動作します。(1/0 = ナン)。任意の NaN でこれが機能します。

jqueryによると、 .width は数値を返し、 .attr('width') はピクセルを含む数値を返します。したがって、最初のものの後に計算すると NaN になります。

これを奇妙な癖までチョークする必要があると思いますか？

于 2013-04-20T20:48:54.790 に答える