javascript - 如果判断浏览器可视区在增加。
天蓬老师
天蓬老师 2017-04-10 14:30:01
0
2
408

这边我想制作一个图片随着浏览器窗口的改变而等比例缩小或增大的效果。
现在等比例缩小已经做到了。

但是该怎么判断浏览器窗口正在增加呢?部分代码如下

var oldWidth = oWrap.offsetWidth;
var newWidth = 0;
var percentage =0;
var percentageHeight = (bigImg[0].offsetWidth/bigImg[0].offsetHeight).toFixed(2);//这里是图片原始的比例

window.onresize = function(){
    newWidth = oWrap.offsetWidth;
    if(oldWidth>newWidth){
        percentage =  ((oldWidth-newWidth)/oldWidth).toFixed(2);
    }else{
        percentage = 1;//这里的判断是不对的,应该是1+增加的比例
    }

    for (var i=0;i<bigImg.length;i++) {
        var newimgWidth = bigImg[i].offsetWidth * (1-percentage);
        bigImg[i].style.width = newimgWidth +'px';
        bigImg[i].style.height = newimgWidth/percentageHeight +'px';

    }

}

代码有些乱,大家见谅,谢谢!

天蓬老师
天蓬老师

欢迎选择我的课程,让我们一起见证您的进步~~

reply all(2)
Ty80

题主是想实现 图片响应式?
1. 如果不是背景图片,那么浮动和宽度百分比就可以实现了(图片的宽高比是不会变化的)
2. 如果是背景图片,那么请到 这里

伊谢尔伦

可以直接css里尺寸设置成百分比。

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template