设置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>

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

答

我用两个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>

答

其实问题出现在 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);
            };
        }
    });
});

答

这个是我帮你改过以后的，实现的是第一个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;
                     }
                }
            });

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

相关推荐