Question

我已经编写了javascript函数来通过pinching对图像进行缩放和缩小。现在我想概括下面的代码，以便我可以将javascript添加到commonjavascript文件中。

    var scale = 1;
    var newScale;


    function saveChanges() {
           scale = newScale;
    }
    function getAngleAndScale(e) {
        e.preventDefault();
        newScale = scale * e.scale;
        var tString = "scale(" + newScale + ")";
        document.getElementById("DocumentViewerImage").style.webkitTransform = tString;
    }
    function init(element) {

警报（元件）; document.getElementById（“DocumentViewerImage”）。addEventListener（“gesturechange”，getAngleAndScale，false）; document.getElementById（“DocumentViewerImage”）。addEventListener（“gestureend”，saveChanges，false）; }

在上面的代码中，我对图像id进行了硬编码。我想获取图像的客户端ID，然后将其传递给javascript进行调用。如何使其成为通用的？如何获取客户端ID和我应该在哪个事件中打电话？

我现在正在使用此代码：在图片标记中：id =“DocumentViewerImage”style =“vertical-align：middle; margin-top：2％;”的onload = “INIT（本）;” 但在javascript中，如果我说警告（元素），我得到[objectHTMLImageElement]。我如何得到图像标签的ID？感谢

Answer 1

您可以通过函数传递ID：

function getAngleAndScale(e, id) {
    e.preventDefault();
    newScale = scale * e.scale;
    var tString = "scale(" + newScale + ")";
    document.getElementById(id).style.webkitTransform = tString;
}
function init(id) {
    document.getElementById(id).addEventListener("gesturechange", getAngleAndScale, false);
    document.getElementById(id).addEventListener("gestureend", saveChanges, false);
}

Answer 2

将事件附加到您想要缩放和缩小的所有图像，如下所示： $（'img＃DocumentViewerImage'）。live（“gesturechange”，function（）{

        getAngleAndScale(event);
});
$('img#DocumentViewerImage').live("gestureend", function() {

      saveChanges();
});
</script>

Javascript角： function saveChanges（）{

scale = newScale;

}
function getAngleAndScale(e) {
var scale = 1;
var newScale;
var imgId = e.target.id;
// Don't zoom or rotate the whole screen
e.preventDefault();
// scale is an event property
newScale = scale * e.scale;
var tString = "scale(" + newScale + ")";
e.target.style.webkitTransform = tString;
}

Answer 3

也许您还想将变换原点设置为夹点的中心点： Javascript, css: change transform origin to centerpoint of gesturechange

汉斯

使javascripts通用，以便它可以应用于所有图像

3 个答案: