JHCan333
2017-06-22 03:37
采纳率: 79.5%
浏览 10.8k

设置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条回答 默认 最新

  • wal1314520 2017-06-22 15:26
    已采纳

    我用两个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>
    
    已采纳该答案
    打赏 评论
  • 尼古拉斯_张三 2017-06-22 03:47

    其实 问题出现在 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);
                };
            }
        });
    });
    
    打赏 评论
  • wal1314520 2017-06-22 05:45

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

相关推荐 更多相似问题