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

设置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>
    
    评论
    解决 无用
    打赏 举报
查看更多回答(2条)

相关推荐 更多相似问题