-3

私はいくつかのサムネイルで次のコードを持っています：

<img onclick="if($(this).hasClass('zoom'{
      this.src='http://24.media.tumblr.com/tumblr_m2uql6rJsI1r9fv99o1_100.gif'; 
      $(this).animate({'width':'100','height':'50'}).removeClass('zoom')
   }else{
      this.src='http://27.media.tumblr.com/tumblr_m2uql6rJsI1r9fv99o1_500.gif';
      $(this).animate({'width':'500','height':'268'}).addClass('zoom')
   }"
   style="width: 100px; height: 50px;"
   src="http://24.media.tumblr.com/tumblr_m2uql6rJsI1r9fv99o1_100.gif" >

それは機能しますが、私のWebサイトにはこのスタイルは必要ありません。次のようなものが必要です。

<script type="text/javascript">#$^%@^&*$#$^#@%</script>

しかし、複雑すぎて書くことができません...だから誰が私を助けることができますか？

ここから入手してください：http ：//jsfiddle.net/My39T/

もう1つの問題は、アニメーション化する必要があるため、これらの画像には幅/高さが必要です。私はこれを行うことができますが、画像の幅/高さがないので、おそらくこれが必要です：

$('img').each(function() {
$(this).attr('height',$(this).height());
$(this).attr('width',$(this).width());
});
4

1 に答える 1

3

これはあなたが望むことを行うと思いますが、あなたが何をしたいのかを明確に述べていなかったので、これはインラインonclickハンドラーを読むことに基づいた最良の推測です。

$(function() {
    $(".thumb > li > a").click(function() {
        var that = $(this),
            img = that.find('img'),
            src = that.href,
            h = img.height(),
            w = img.width();

        img.attr({
            'height' : h,
            'width' : w,
            'src' : src
        });
        if (that.hasClass('zoom')){
            img.animate(
                {
                    'height' : 67,
                    'width' : 100
                },1000);
        }
        else {
            img.animate(
                {
                    'height' : 268,
                    'width' : 500
                },1000);
        }
        that.toggleClass('zoom');
        return false;
    });
});​

JSフィドルデモ。

于 2012-04-22T06:35:54.537 に答える