Javascript 缩放事件传播未停止_Javascript_Jquery_Html_Zooming

Javascript 缩放事件传播未停止

javascript jquery html

Javascript 缩放事件传播未停止,javascript,jquery,html,zooming,Javascript,Jquery,Html,Zooming,我在我们的stackoverflow中看到了许多与相同问题有关的问题，我尝试了其中一些问题，即使我的代码没有按预期工作，所以我将其发布我正在做一个简单的放大/缩小实现。但它并没有像我预期的那样起作用我的密码在这里 <!DOCTYPE html> <html> <head> <script src="scripts/vendor/jquery.min.js"></script> <style> div { widt

我在我们的stackoverflow中看到了许多与相同问题有关的问题，我尝试了其中一些问题，即使我的代码没有按预期工作，所以我将其发布

我正在做一个简单的放大/缩小实现。但它并没有像我预期的那样起作用

我的密码在这里

<!DOCTYPE html>
<html>
<head>
<script src="scripts/vendor/jquery.min.js"></script>
<style>
div {
    width: 100px;
    height: 75px;
    background-color: red;
    border: 1px solid black;
}

div#div2 {
    margin: 100px;
    -ms-transform: scale(1.1); /* IE 9 */
    -webkit-transform: scale(1.1); /* Chrome, Safari, Opera */
    transform: scale(1.1); /* Standard syntax */
}
</style>
<script>
var sclVal = 1;
var minZoom = 0.5;
var maxZoom = 3;

//alert("ggggggggggggg");

function ZoomIn(event) {
    if (mouseStillDown  && sclVal > minZoom ) {
        sclVal = sclVal - 0.1;
        console.log(sclVal);
        if (mouseStillDown && sclVal > minZoom) {
            $("#div2").css("-ms-transform", "scale(" + sclVal + ")");
            $("#div2").css("-webkit-transform", "scale(" + sclVal + ")");
            $("#div2").css("transform", "scale(" + sclVal + ")");
        }
    }
};

function ZoomOut(event) {
    if (mouseStillDown && sclVal < maxZoom ) {
        sclVal = sclVal + 0.1;
        console.log(sclVal);
        if (sclVal > minZoom && sclVal < maxZoom) {
            $("#div2").css("-ms-transform", "scale(" + sclVal + ")");
            $("#div2").css("-webkit-transform", "scale(" + sclVal + ")");
            $("#div2").css("transform", "scale(" + sclVal + ")");
        }
    }
};

var mouseStillDown = false;
$(document).ready(function() {

    $("#ZoomOut").mousedown(function(event) {
        mouseStillDown = true;
        doZoomOut();
        event.preventDefault();
        //event.stopImmediatePropagation();
        //event.stopPropagation();
    });

    $("#ZoomOut").mouseup(function(event) {
        mouseStillDown = false;
        event.preventDefault();
        //event.stopImmediatePropagation();
        //event.stopPropagation();
    });

    $("#ZoomIn").mousedown(function(event) {
        mouseStillDown = true;
        doZoomIn();
        event.preventDefault();
        //event.stopImmediatePropagation();
        //event.stopPropagation();
    });

    $("#ZoomIn").mouseup(function(event) {
        mouseStillDown = false;
        event.preventDefault();
        //event.stopImmediatePropagation();
        //event.stopPropagation();
    });

});
function doZoomOut() {
    if (!mouseStillDown) {
        return;
    }

    if (mouseStillDown) {
        setInterval(ZoomOut, 100);
    }
};
function doZoomIn() {
    if (!mouseStillDown) {
        return;
    }

    if (mouseStillDown) {
        setInterval(ZoomIn, 100);
    }
};
</script>
</head>
<body>

    <input id="ZoomIn" type="button" value="-" />
    <input id="ZoomOut" type="button" value="+" />


    <div id="div2">Hello. This is a DIV element.</div>

</body>
</html>


div{
宽度：100px；
高度：75px；
背景色：红色；
边框：1px纯黑；
}
分区#分区2{
利润率：100像素；
-ms变换：比例（1.1）；/*IE 9*/
-webkit转换：缩放（1.1）；/*Chrome、Safari、Opera*/
变换：缩放（1.1）；/*标准语法*/
}
var-sclVal=1；
var minZoom=0.5；
var-maxZoom=3；
//警报（“ggggggggggggg”）；
函数缩放（事件）{
if（mouseStillDown&&sclVal>minZoom）{
sclVal=sclVal-0.1；
控制台日志（sclVal）；
if（mouseStillDown&&sclVal>minZoom）{
$（“#div2”）.css（“-ms transform”、“scale（“+sclVal+”））；
$（“#div2”）.css（“-webkit transform”，“scale（“+sclVal+”））；
$（“#div2”）.css（“变换”、“缩放”（+sclVal+））；
}
}
};
函数ZoomOut（事件）{
if（mouseStillDown&&sclValminZoom&&sclVal


我有一个
缩小（直到此按钮上的鼠标向下移动将缩小）
及
放大（直到此按钮上的鼠标向下移动将被放大）
纽扣
问题:
但它并没有像预期的那样工作，即使我按了“缩小”按钮，div也能正常缩小。在我按下“放大”按钮后，div将随机缩小和放大
您需要清除间隔
$("#ZoomOut").mousedown(function() {
    mouseStillDown = true;
    doZoomOut();
});

$("#ZoomOut").mouseup(function() {
    mouseStillDown = false;
    clearInterval(int);
});

$("#ZoomIn").mousedown(function() {
    mouseStillDown = true;
    doZoomIn();
});

$("#ZoomIn").mouseup(function() {
    mouseStillDown = false;
    clearInterval(int);
});

var int;

function doZoomOut() {
    if (!mouseStillDown) {
        return;
    }

    if (mouseStillDown) {
        int = setInterval(ZoomOut, 100);
    }
};

function doZoomIn() {
    if (!mouseStillDown) {
        return;
    }

    if (mouseStillDown) {
        int = setInterval(ZoomIn, 100);
    }
};

你真棒，我亲爱的朋友。