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ていないはずです。また、クロスブラウザーの場合、イベント参照を管理する必要があり、イベント オブジェクトのターゲットからイメージ要素を取得できます。clientxclienty

とにかく、次のように変更されたコードを試してください。

<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 に答える