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

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

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

但是太复杂了，我不会写……谁能帮帮我？

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

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

$('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 回答