Question

我正在尝试编写一个用于放大和缩小所有正文的代码，现在我找到了一个代码来执行此操作但只需单击“进入”和“按”按钮。我需要的是继续按住In按钮并自动缩放直到我离开鼠标按钮，同样的Out按钮...... 这是我的javascript和html代码

  <script>
window.onload = function() {
var currFFZoom = 1;
var currIEZoom = 100;

$('#In').on('click',function(){
    if (navigator.userAgent.indexOf('Firefox') != -1 && parseFloat(navigator.userAgent.substring(navigator.userAgent.indexOf('Firefox') + 8)) >= 3.6){//Firefox
        var step = 0.02;
        currFFZoom += step; 
        $('body').css('MozTransform','scale(' + currFFZoom + ')');
    } else {
        var step = 2;
        currIEZoom += step;
        $('body').css('zoom', ' ' + currIEZoom + '%');
    }
});

$('#Out').on('click',function(){
    if (navigator.userAgent.indexOf('Firefox') != -1 && parseFloat(navigator.userAgent.substring(navigator.userAgent.indexOf('Firefox') + 8)) >= 3.6){//Firefox
        var step = 0.02;
        currFFZoom -= step;                 
        $('body').css('MozTransform','scale(' + currFFZoom + ')');

    } else {
        var step = 2;
        currIEZoom -= step;
        $('body').css('zoom', ' ' + currIEZoom + '%');
    }
});};
</script>
<img src="images/zoomin.png" style="cursor:pointer;" id="In" width="50" height="50" border="0" alt="zoom in" title="zoom in" /></br>
    <img src="images/zoomout.png" style="cursor:pointer;" id="Out" width="50" height="50" border="0" alt="zoom out" title="zoom out" />

你可以编辑我的代码或告诉我一些步骤吗？

Answer 1

这应该是它：

如果我让你纠正你想要总是缩放，所以我使用document`s body作为选择器

 <script>
window.onload = function() {
    var currFFZoom = 1;
    var currIEZoom = 100;
    var k;
    $(document).on('mousedown','body',function(){
        k= setInterval(function(){
            if (navigator.userAgent.indexOf('Firefox') != -1 && parseFloat(navigator.userAgent.substring(navigator.userAgent.indexOf('Firefox') + 8)) >= 3.6){//Firefox
                var step = 0.02;
                currFFZoom += step; 
                $('body').css('MozTransform','scale(' + currFFZoom + ')');
            } else {
                var step = 2;
                currIEZoom += step;
                $('body').css('zoom', ' ' + currIEZoom + '%');
            }        
        },200);

    });

    $(document).on('mouseup','body',function(){
        clearInterval(k);
    });
};
</script>

释放鼠标按钮时将立即触发mouseup 但是你不能缩小。

用鼠标放大jquery

1 个答案: