设置div随着窗口大小的改变按比例变化

我写了两个div,前一个div写了一个自定义属性test作标识,如果为true则实现自动变化大小的效果,代码如下

 <div style="width: 500px;height: 400px;float: left;border: 5px solid red;" id="a" test="true">
            aaaa
        </div>
        <div style="width: 500px;height: 400px;float: left;border: 5px solid green;" id="b">
            bbbb
        </div>
        <script type="text/javascript">
            var windowWidth = window.innerWidth;
            var windowHeight = window.innerHeight;
            $(document).ready(function() {
                var chartAll = $('div');
                console.log(chartAll.length);
                for(var i = 0; i < chartAll.length; i++) {
                    var chartID = chartAll[i].id;
                    console.log(i + chartID);
                    var chart = $('#' + chartID);
                    var widthChart = chart.width();
                    var heightChart = chart.height();
                    chart.attr('test') == 'true' && $(window).resize(function() {
                        var widthResize = widthChart * window.innerWidth / windowWidth;
                        var heightResize = heightChart * window.innerHeight / windowHeight;
                        chart.width(widthResize);
                        chart.height(heightResize);
                    });
                }
            });
        </script>

我设置的是前一个变化大小,但是改变大小的是后一个,和我预想的不一样,这样的 话该怎么解决啊?

3个回答

我用两个div随窗体变化而变化,我实现的方法如下:

 <!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="C:/Users/Administrator/Desktop/html/jquery-1.8.0.js" type="text/javascript"></script>
    <script type="text/javascript">
            var windowWidth = window.innerWidth ;
            var windowHeight = window.innerHeight ;
            $(window).resize(function() {
                var chartAll = $('div');
                console.log(chartAll.length);
                for(var i = 0; i < chartAll.length; i++) {
                    var chartID = chartAll[i].id;
                    var chart = $('#' + chartID);
                    var widthChart = chart.width();
                    var heightChart = chart.height();
                    if(chart.attr('test') == 'true'){ 
                        var widthResize = widthChart * window.innerWidth / windowWidth;
                        var heightResize = heightChart * window.innerHeight / windowHeight;
                        chart.width(widthResize);
                        chart.height(heightResize);
                    }
                }
                //把当前窗口的width个heigth赋值给windowWidth和windowHeight  
                //以保证窗体大小改变事件再次触发的时候不会取到初始化时的值
                //而导致目标div不停的变小或变大
                 windowWidth = window.innerWidth;
                 windowHeight=window.innerHeight;
            });
        </script>
</head>
<body>
<div style="width: 500px;height: 400px;float: left;border: 5px solid red;" id="a" test="true">
            aaaa
        </div>
        <div style="width: 500px;height: 400px;float: left;border: 5px solid green;" id="b" >
            bbbb
        </div>
        <div style="width: 500px;height: 400px;float: left;border: 5px solid blue;" id="c" test="true">
            cccc
        </div>
</body>
</html>
wal1314520
wal1314520 回复王蛇无毒: 没事啦,能帮到你我就很开心了
大约 3 年之前 回复
qq_35436516
JHCan333 谢谢拉
大约 3 年之前 回复

其实 问题出现在 chart.attr('test') == 'true' && $(window).resize(function() { 这句话.
你需要 这样

 $(document).ready(function() {
    $(window).resize(function() {
        var chartAll = $('div');
        console.log(chartAll.length);
        for (var i = 0; i < chartAll.length; i++) {
            var chartID = chartAll[i].id;
            console.log(i + chartID);
            var chart = $('#' + chartID);
            var widthChart = chart.width();
            var heightChart = chart.height();
            if (chart.attr('test') == 'true') {
                var widthResize = widthChart * window.innerWidth / windowWidth;
                var heightResize = heightChart * window.innerHeight / windowHeight;
                chart.width(widthResize);
                chart.height(heightResize);
            };
        }
    });
});
qq_35436516
JHCan333 还有一个问题,这样放到外面后,会导致widthChart 一直变化,可是需要的是一个固定值,这怎么解决啊?
大约 3 年之前 回复

这个是我帮你改过以后的,实现的是第一个div变化,你看一下!因为你一直在循环中,所有这个改变会在循环结束后执行改变,你虽然判断了test的值,但是因为循环没有停,最后chart指向的还是$("#b"),所以导致了你怎么弄都是第二个div变化。我用了一个break在判断之后跳出循环,这样就不会继续循环,chart的指向还是$("#a"),就不会有问题了!希望我的回答能够给你帮助

 var windowWidth = window.innerWidth;
            var windowHeight = window.innerHeight;
            $(document).ready(function() {
                       var chartAll = $('div');
                console.log(chartAll.length);
                for(var i = 0; i < chartAll.length; i++) {
                    var chartID = chartAll[i].id;
                    console.log(i + chartID);
                    var chart = $('#' + chartID);
                    var widthChart = chart.width();
                    var heightChart = chart.height();
                    if(chart.attr('test') == 'true'){ 

                     $(window).resize(function() {

                        var widthResize = widthChart * window.innerWidth / windowWidth;
                        var heightResize = heightChart * window.innerHeight / windowHeight;
                        console.log(chart);
                        chart.width(widthResize);
                        chart.height(heightResize);
                    });
                     break;
                     }
                }
            });
wal1314520
wal1314520 回复王蛇无毒: 我已经实现了多个div的改变 代码就贴在下面了 你可以看看是不是你想要的结果
大约 3 年之前 回复
wal1314520
wal1314520 回复王蛇无毒: 恩,这样只能找到第一个满足要求的div,如果有多个的话,就需要用别的方法了,就看你到底是什么样的需求了。
大约 3 年之前 回复
qq_35436516
JHCan333 那这样的话,如果有多个div就不太好吧?
大约 3 年之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐