Question

我有一个调整大小的脚本，我从SO上找到的答案得到了。

<script type="text/javascript">
  function resizeImg(img)
  {
    var resize = 150;
    var origH  = 61;
    var origW  = 250;
    var mouseX = event.x;
    var mouseY = event.y;
    var newH   = origH * (resize / 100);
    var newW   = origW * (resize / 100);

    img.style.height = newH;
    img.style.width  = newW;

    var c = img.parentNode;

    c.scrollLeft = (mouseX * (resize / 100)) - (newW / 2) / 2;
    c.scrollTop  = (mouseY * (resize / 100)) - (newH / 2) / 2;
  }
</script>

它位于我页面中的HEAD占位符标记中。

在同一页面的内容占位符中，我有一个<img>标记需要运行“onclick”上方的函数。

因此，它需要像这样返回'this'：

<img src="someImage.jpg" alt="" onclick="resizeImg(this)" />

然而，这不起作用。我不知道如何做到这一点，我尝试搜索谷歌一段时间，但没有出现。

Answer 1

不确定复制源的位置。我怀疑event.x，event.y - 您不应该使用clientx和clienty属性。此外，对于跨浏览器，您需要管理事件引用，并且可以从事件对象的目标获取图像元素。

无论如何，尝试修改代码如下：

<script type="text/javascript">

    function resizeImg(e)   {     
        var event = window.event || e;
        var img = event.target || event.srcElement;
        var resize = 150;     
        var origH  = 61;     
        var origW  = 250;     
        var mouseX = event.clientX;     
        var mouseY = event.clientY;     
        var newH   = origH * (resize / 100);     
        var newW   = origW * (resize / 100);      
        img.style.height = newH + 'px';     
        img.style.width  = newW + 'px';      
        var c = img.parentNode;      
        c.scrollLeft = (mouseX * (resize / 100)) - (newW / 2) / 2;     
        c.scrollTop  = (mouseY * (resize / 100)) - (newH / 2) / 2;   
}

</script>
<div>
<img src="someImage.jpg" alt="" onclick="resizeImg(event)" />
</div>

我为此创建了jsfiddle。

最后，考虑使用诸如jquery之类的生产力库，这将使事情变得更加简单。

Answer 2

您不需要通过参数列表传递对this的引用，因为该函数中已存在上下文。将您的标记更改为：

<img src="someImage.jpg" alt="" onclick="resizeImg();" />

然后在javascript函数resizeImg中，您只需使用this来引用点击的图片：

function resizeImg() {
    var img = this; // will contain a reference to your element
}

Here's a working example使用DIV元素做同样的事情。

ASP.NET将参数传递给母版页中的Javascript函数

2 个答案: