1

我从在 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)" />

但是，这不起作用。我不知道该怎么做，我现在尝试搜索谷歌一段时间，但没有任何结果。

4

2 回答 2

4

不确定您从哪里复制了源代码。我怀疑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，这将使事情变得更简单。

于 2013-01-02T10:11:14.183 回答
0

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

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

然后在 javascript 函数中resizeImg，您可以简单地使用this来引用单击的图像：

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

DIV这是一个使用元素做同样事情的工作示例。

于 2013-01-02T09:54:26.367 回答