Question

我有以下代码和一些缩略图：

<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" >

它有效，但我不想在我的网站上使用这种风格，我想要这样的东西：

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

但太复杂了，我不能写......所以谁能帮助我？

来源：http://jsfiddle.net/My39T/

另一个问题是，我需要设置动画，因此这些图像需要宽度/高度。我可以这样做，但我没有图像宽度/高度，所以可能需要这个：

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

Answer 1

我认为这样做符合您的要求，但由于您没有明确说明您想要发生什么，这是基于阅读内联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 Fiddle demo

关于jquery图像缩放效果

1 个答案: