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

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

报告相同问题？

悬赏问题

  • ¥15 为什么使用javacv转封装rtsp为rtmp时出现如下问题：[h264 @ 000000004faf7500]no frame？
  • ¥15 乘性高斯噪声在深度学习网络中的应用
  • ¥15 运筹学排序问题中的在线排序
  • ¥15 关于docker部署flink集成hadoop的yarn，请教个问题 flink启动yarn-session.sh连不上hadoop，这个整了好几天一直不行，求帮忙看一下怎么解决
  • ¥30 求一段fortran代码用IVF编译运行的结果
  • ¥15 深度学习根据CNN网络模型，搭建BP模型并训练MNIST数据集
  • ¥15 C++ 头文件/宏冲突问题解决
  • ¥15 用comsol模拟大气湍流通过底部加热（温度不同）的腔体
  • ¥50 安卓adb backup备份子用户应用数据失败
  • ¥20 有人能用聚类分析帮我分析一下文本内容嘛