javascript - JS点击放大图片和点击缩小图片问题

Question

function chgsize(e){
    if(e.getAttribute('big')&&e.getAttribute('big')=='1'){
         e.setAttribute('big','0');
         e.setAttribute('width','150');
    }else{
         e.setAttribute('big','1');
         e.setAttribute('width','500');
    }
}

这个代码只能默认150PX显示图像，点击后变成500px，但是如果原图小于500，图片就会被放大失真，我想修改一下，如果图片小于500就原图显示，如果图片大于或者等于500就按照500px显示
我在css添加了代码width: expression(this.width > 500 && this.width > this.height ? 500 : auto); max-width:500px;但是由于优先级关系，不起作用，希望高手们能帮忙改一下JS，万分感谢

Answer 1

其实就是在点击放大的时候要获取到大图的width,然后判断一下。假设图片大图地址为 xx.com/1.jpg
在点击放大的时候：

var big = new Image();
big.onload = function() {
    if ( this.offsetWidth > 500 ) {
      //set width
    } else {
      //not set width
    }
};
big.src = 'xx.com/1.jpg';

只是简单的提供下自己的思路，希望对你有帮助。

Answer 2

有现成的.fancybox 做得很好