javascript - JS点击放大图片和点击缩小图片问题-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

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

伊谢尔伦 2017-04-10 12:41:43

[JavaScript讨论组]

1114

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，万分感谢

伊谢尔伦

小伙看你根骨奇佳，潜力无限，来学PHP伐。

全部回复(2)

阿神2017-04-10 12:43:43 2楼

其实就是在点击放大的时候要获取到大图的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';

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