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

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

0

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>
1
wal1314520
wal1314520 回复王蛇无毒: 没事啦,能帮到你我就很开心了
大约 2 年之前 回复
qq_35436516
王蛇无毒 谢谢拉
大约 2 年之前 回复

其实 问题出现在 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);
            };
        }
    });
});
0
qq_35436516
王蛇无毒 还有一个问题,这样放到外面后,会导致widthChart 一直变化,可是需要的是一个固定值,这怎么解决啊?
大约 2 年之前 回复

这个是我帮你改过以后的,实现的是第一个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;
                     }
                }
            });
0
wal1314520
wal1314520 回复王蛇无毒: 我已经实现了多个div的改变 代码就贴在下面了 你可以看看是不是你想要的结果
大约 2 年之前 回复
wal1314520
wal1314520 回复王蛇无毒: 恩,这样只能找到第一个满足要求的div,如果有多个的话,就需要用别的方法了,就看你到底是什么样的需求了。
大约 2 年之前 回复
qq_35436516
王蛇无毒 那这样的话,如果有多个div就不太好吧?
大约 2 年之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
asp.net 控件随着窗口大小按比例变化源码
asp.net 控件随着窗口大小按比例变化源码! 很值得下载看看!资源免费,大家分享!!
控件随着窗口大小变化
好多人问这个问题,我也是刚学会,三步解决MFC窗口变动后控件的大小 一 在头文件中定义 POINT Old;//存放对话框的宽和高。 OnInitDialog() 中计录宽和高。  CRect rect;    GetClientRect(&rect); //取客户区大小    Old.x=rect.right-rect.left;  Old.y=rect.bottom-r
怎样使控件大小随着窗口大小变化而成比例的变化?
thanks
控件随窗口大小比例变化
不知道一下代码有何问题 没有错误 但功能实现不了rnrnvoid CMFCSDIView::OnSize(UINT nType, int cx, int cy)rnrn CView::OnSize(nType, cx, cy);rnrnrn // TODO: Add your message handler code herern rn rn CWnd *pWnd;rn rn pWnd = GetDlgItem(IDC_STATIC); //获取ID为i的空间的句柄,因为“确认”ID为1,“取消”ID为2rn if(pWnd) //判断是否为空,因为对话框创建时会调用此函数,而当时控件还未创建rnrn rn CRect rect; //获取控件变化前的大小 rn pWnd->GetWindowRect(&rect);rn ScreenToClient(&rect);//将控件大小转换为在对话框中的区域坐标rn //cx/m_rect.Width()为对话框在横向的变化比例rnrn rect.left=rect.left*cx/m_rect.Width();//调整控件大小rn rect.right=rect.right*cx/m_rect.Width();rn rect.top=rect.top*cy/m_rect.Height();rn rect.bottom=rect.bottom*cy/m_rect.Height();rn pWnd->MoveWindow(rect);//设置控件大小rn rn rn GetClientRect(&m_rect);// 将变化后的对话框大小设为旧大小rnrn请高手指教哈
js设置div大小随窗口大小变化
pageEncoding="utf-8"%> Insert title here $(function(){ var mydiv=$("#mydiv"); var mydiv_resize=function(){ $(mydiv).css("width",$(window).width()); $(mydiv).css("height",$(window).height())
word的窗口大小能不能随着vb窗口大小的变化而变化?
我现在把word嵌入到vb的窗体中了,可是我想让word窗体总是能随着vb窗体的大小变化而改变,有没有人知道要怎么做呢?谢谢rn
CEGUI控件随着窗口大小改变而改变
如果想上CEGUI的控件随着窗口大小的改变而改变,只要调用一个函数: CEGUI::System::getSingletonPtr()->notifyDisplaySizeChanged( CEGUI::Size((float)(rw->getWidth()),(float)(rw->getHeight())));
ListControl如何随着窗口大小的改变而改变
我写了个SDIrn使用了CFormViewrn在这上面,我放了一个List Controlrn现在,在程序执行的时候,list control的大小就是我用资源编辑器画出来的大小rn而且,如果我resize窗口,list control也不会发生什么变化。rnrn我希望能实现随着form大小的改变而自己改变大小的list controlrn最好能够正好占满窗体rnrn我在VB中看到有个属性交anchor,跟那个效果比较像。rn
C# WinForm 控制项随窗口大小变化而比例改变
当改变窗口大小时,其中控制项依比例缩放。 当程序在不同解析度设备上使用时,可避免控制项超出窗口显示画面外造成操作上困难。 步骤: 1、定义全局变数 private float X;//當前窗體的寬度 private float Y;//當前窗體的高度 2、功能函数SetTag 将控制项的宽,高,左边距,顶边距和字体大小暂存到tag属性中 /// &amp;lt;summary&amp;gt...
如何在改变窗口大小时,固定比例变化!
拖动窗口大小时,怎么使窗口按比例变化
div随着浏览器窗口大小变更,改变大小(resize)
浏览器的放大缩小会导致网页布局变动,jquery的resize()方法,可以根据浏览器的窗口大小的变动,对网页进行操作:以下是div随着浏览器窗口大小变更,改变大小(resize)的案例:html:js效果:resizeDiv的块会根据网页变更,大小也随之改变...
实现控件随着窗口大小按比例变化Visual Basic6.0程序,VB6.0源代码
实现控件随着窗口大小按比例变化Visual Basic6.0程序,VB6.0源代码
窗口大小改变时滚动条的变化
CScrollView将滚动条滚动到中间,再改变窗口大小,这时滚动条怎么变化。rn
qt designer布局:随着窗口大小变化
终于明白,该怎么做了只要在窗体的空白处点右键再选布局就可以了
布局(左边的div随着右边div的高度变化而变化)
今天同学问了一个左边div的高度随着右边div的高度变化而变化的问题。开始想了想有点蒙。中间试着用height:100%;试过发现并不可行,因为高度百分比必须有确切的祖先元素(即设置了px)才可以。由于今天晚上正在团建,回来都12点多了。然后怎么也睡不着就做做这个吧,发现一坐下来安心的想问题,竟然迎刃而解了。 我用到的方法是1父元素设置position:relative;2左边的div设置pos...
响应式布局 改变div所占比例
#inner{                 width: 1200px;                 margin: 0 auto;             }             #left{                 width: 50%;                 height: 400px;                 background: re
求状态栏大小随着窗口大小改变
我在OnSize()里写rn CRect rect;rn GetClientRect(rect); rn m_StatusBar.MoveWindow(rect,false); rn CDialog::OnSize(nType, cx, cy);rn程序出错是那种终止\重试\忽略rn不知什么原因是 m_StatusBar.MoveWindow(rect,false); rn这局出的错
让图片根据窗口大小按比例缩放
带有Frame的页面: &amp;lt;script language=&quot;JavaScript&quot;&amp;gt;    if(window.frameElement!=null)  {      window.frameElement.attachEvent(&quot;onresize&quot;,winResize);  }  else  {      window.attachEvent(&quot;onresize&quot;,winResi...
主窗口大小改变,控件不能正常按窗口大小改变?
简历一个CFormView工程,然后分别在下列两个函数添加如下代码,但是函数运行时总是报除零错误,原因是GetClientRect(&m_rectC);获得的四个坐标都为0,不知道为什么?rnrn[code=c]void CCP_001View::OnInitialUpdate()rnrn CFormView::OnInitialUpdate();rn GetParentFrame()->RecalcLayout();rn ResizeParentToFit();rnrn GetClientRect(&m_rectC); //记录原客户区尺寸rnrnrnrnvoid CCP_001View::OnSize(UINT nType, int cx, int cy) rnrn CFormView::OnSize(nType, cx, cy);rn rn // TODO: Add your message handler code herern rn //this->GetWindowRect(&m_rectW);rn //this->GetClientRect(&m_rectC);rnrn CWnd *pWnd; rn pWnd = GetDlgItem(IDC_SCOPE); //获取ID为i的空间的句柄,因为"确认"ID为1,"取消"ID为2rn if(pWnd) //判断是否为空,因为对话框创建时会调用此函数,而当时控件还未创建rn rn CRect rect; //获取控件变化前的大小 rn pWnd->GetWindowRect(&rect);rn ScreenToClient(&rect);//将控件大小转换为在对话框中的区域坐标rn //cx/m_rect.Width()为对话框在横向的变化比例rnrn rect.left=rect.left*cx/m_rectC.Width();//调整控件大小rn rect.right=rect.right*cx/m_rectC.Width();rn rect.top=rect.top*cy/m_rectC.Height();rn rect.bottom=rect.bottom*cy/m_rectC.Height();rn pWnd->MoveWindow(rect);//设置控件大小rn rnrn GetClientRect(&m_rectC);// 将变化后的对话框大小设为旧大小rn[/code]
dll窗口不会随着调用窗口大小的变化而变化
我在写一些试验性的代码,这是我目前的dll代码,可用,不过有个小小的问题,dll窗口不会随着调用窗口大小的变化而变化,另外,调用dll的窗口的 FormStyle = fsMDIFormrnrn//---------------------------------------------------------------------rnrn#include rn#include rn#include "MainUnit.h"rn#pragma hdrstoprnrnTApplication *pDllApp = NULL;rnrnrn#pragma argsusedrnint WINAPI DllEntryPoint(HINSTANCE hinst, unsigned long reason, void* lpReserved)rnrn if(reason==DLL_PROCESS_ATTACH || reason==DLL_THREAD_ATTACH ) // DLL入口处理rn rn CoInitialize(NULL);rn rnrn if(reason==DLL_PROCESS_DETACH || reason==DLL_THREAD_DETACH ) // DLL出口处理rn rn CoUninitialize();rn Application = pDllApp; // 恢复Applicationrn rn return 1;rnrn//---------------------------------------------------------------------------rn//---------------------------------------------------------------------------rnextern "C"__declspec(dllexport)void __stdcall ShowDllForm(TApplication* myApp , TWinControl* pFormParent )rnrnrn if( pDllApp == NULL )rn rn pDllApp = Application;rn Application = myApp;rn rn rn if ( MainForm == NULL )rn MainForm = new TMainForm( pFormParent ); //Applicationrnrn SetParent(MainForm->Handle ,pFormParent->Handle );rn MainForm->Show();rnrnrnrn要如何解决这个问题??查了好多贴子,都没有解决rnrnrn
控件如何随着主窗口大小变化而变化?
我建了个单文档程序,基于CFormView,上面放了很多控件,但是当我改变主窗口大小的时候,控件大小不随之变化。如何设置?rnrn问题比较简单,给20分...
怎样使控件的大小随着窗口大小的变化而变化?
谢谢!
Form随着屏幕的大小按比例调整 怎么设置?
form窗口根据屏幕的大小按比例调整,就是画面一直保持一定的比例,有这个设置么? 我试了几个设置 好像没有效果。高人解答。
有什么简便的方法让窗口中的控件随着窗口大小按比例地变化,而不是一个个地设置?
最近加班多了....头晕了.....不想了.........
父div随着子div的高度改变而改变
父div随着子div的高度改变而改变问题情况1:父div未设置高度,子div为标准流(即未设置浮动)<body> <div class="aa">父div <div class="bb">子div</div> <div class="cc">子div</div> </div> </body>此时的父div随着子div的改变而改变 情况2:父div设置
请教如何实现vb程序中控件随着窗口大小的改变而改变,即保持原来的比例?
谢谢!在线等
JS 实现DIV随浏览器窗口大小变化
以下是宽度变化的示例,高度也可参考: 01 &amp;lt;script type= &quot;text/javascript&quot; &amp;gt; 02    function initWidth() { 03          var bodyWidth = document.co...
求助!!!swing 中控件随着 窗口大小改变而改变 问题
[img=http://hi.csdn.net/attachment/201101/20/514721_1295516337SpBZ.jpg][/img]rnrnrn大家看看 swing中控件随着窗口大小改变而改变,这个不能。。。rn是不是布局管理器的问题rn大家知道BoxLayout会随着窗口自动改变吗?
MFC改变窗口大小,随着鼠标的拖动改变
今天在做一个视频播放器的时候,需要用到不同电脑之间分辨率的不同,让其根据当前电脑的分辨率显示其大小 首先假设这个对话框类为CMyDialog。 这篇文章转载了:https://blog.csdn.net/renyongwang1988/article/details/16840735 第一步:在CMyDialog中添加一个成员变量CRect m_rect; 第二步:在CmyDialog的初始化函数...
如何让控件的位置随着窗口大小的改变而改变?
比如一个窗口不在最大化的时候,一个pushButton在窗口的最右下角,现在把窗口最大化,pushButton就不在窗口的右下角了。我希望pushButton还在右下角,请问怎么实现?rn把窗口最大化会产生什么事件吗?
文字随着浏览器窗口大小改变而改变(自适应?)
&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; #box { width: 100%; } #content { display: inline-bl...
请问如何让数据窗口随着窗口大小的改变而改变?
就是说如果窗口最大化,那窗口中的数据窗口也跟着最大化,保持其在窗口中的大小比例不变。如何实现?特别是运用在MDI窗口的工作窗口情况时,如何实现。
如何使flash随着浏览器窗口大小的改变而改变
我做了一个页面 中间是一个flashrn我的问题是 如何当窗口放大和缩小时,这个flash能够随着浏览器的窗口也跟着放大的缩小,如何flash的宽度保持和浏览器窗口一样的宽度而比例又保持不变?rnrn谢谢各位老大了.rn
怎么样才能使控件位置随着对话框大小的变化而按比例变化
比如说,一个button在一个dialog最小化时是在最左边的,当这个dialog最大化时,怎么才能使这个button还在这个dialog的最左边呢???rnrn好像在.net中可以通过每个control的属性来设置,不知在MFC中怎么设置呢?rnrn谢谢!!
窗口分割后的大小如何随着窗口大小的改变而改变
这是我编的一个多文档窗口分割程序:rnBOOL CBEAMFRAME::OnCreateClient(LPCREATESTRUCT lpcs, CCreateContext* pContext) rnrn // TODO: Add your specialized code here and/or call the base classrn CRect rect;rn GetWindowRect(&rect);rn int xx,yy;rn xx=(rect.right-rect.left)/2;rn yy=(rect.bottom-rect.top)/8;rnrn BOOL ret=m_wndSplitter.CreateStatic(this,8,2);rn ret|=m_wndSplitter.CreateView(0,0,RUNTIME_CLASS(CBEAM),CSize(xx,yy),pContext);rn ret|=m_wndSplitter.CreateView(1,0,RUNTIME_CLASS(CBEAM),CSize(xx,yy),pContext); rn ret|=m_wndSplitter.CreateView(2,0,RUNTIME_CLASS(CBEAM),CSize(xx,yy),pContext);rn ret|=m_wndSplitter.CreateView(3,0,RUNTIME_CLASS(CBEAM),CSize(xx,yy),pContext);rn ret|=m_wndSplitter.CreateView(4,0,RUNTIME_CLASS(CBEAM),CSize(xx,yy),pContext);rn ret|=m_wndSplitter.CreateView(5,0,RUNTIME_CLASS(CBEAM),CSize(xx,yy),pContext);rn ret|=m_wndSplitter.CreateView(6,0,RUNTIME_CLASS(CBEAM),CSize(xx,yy),pContext);rn ret|=m_wndSplitter.CreateView(7,0,RUNTIME_CLASS(CBEAM),CSize(xx,yy),pContext);rnrn ret|=m_wndSplitter.CreateView(0,1,RUNTIME_CLASS(CBEAM),CSize(xx,yy),pContext);rn ret|=m_wndSplitter.CreateView(1,1,RUNTIME_CLASS(CBEAM),CSize(xx,yy),pContext);rn ret|=m_wndSplitter.CreateView(2,1,RUNTIME_CLASS(CBEAM),CSize(xx,yy),pContext);rn ret|=m_wndSplitter.CreateView(3,1,RUNTIME_CLASS(CBEAM),CSize(xx,yy),pContext);rn ret|=m_wndSplitter.CreateView(4,1,RUNTIME_CLASS(CBEAM),CSize(xx,yy),pContext);rn ret|=m_wndSplitter.CreateView(5,1,RUNTIME_CLASS(CBEAM),CSize(xx,yy),pContext);rn ret|=m_wndSplitter.CreateView(6,1,RUNTIME_CLASS(CBEAM),CSize(xx,yy),pContext);rn ret|=m_wndSplitter.CreateView(7,1,RUNTIME_CLASS(CBEAM),CSize(xx,yy),pContext);rn return ret;rn rn但是程序运行以后列的宽度不是窗口的1/2,行的高度也不是1/8,窗口最大化以后也不随着改变。rn可求大家帮忙!
正五边形可以随着值得变化改变图形
正五边形可以随着值得变化改变图形,网上找了好久没有找到。
Air改变窗口大小设置方式
目前程序在窗口普通大小和最大化的时候都是显示5本图书,在最大化状态时视图内容太单薄。我们想让窗口最大化时显示10本书,普通大小时显示5本,并且让程序只支持这两种尺寸,禁止用户随意调整窗口大小。     首先打开BookGallery-app.xml文件,将其中的“&amp;lt;resizable&amp;gt;”标签值改为“false”,此时运行程序发现窗口右下角的“gripper”控件还在,并且仍然可以...
窗口大小变化事件自动改变控件大小
课程讲解基于QT5.9 SDK,包含QT界面编程的核心内容,并提供全部源码,课程讲解方式是接口讲解、分析、演示示例,课程讲解QTCreator在不同平台的配置方法,linux,windows,mac,课程演示主要以vs2015+QT5.9为主,开始会讲解QTCreator配置。课程源码基于c++ 11以上版本,建议至少安装vs2013以上。课程后会做一个图像编辑器的示例。
mfc中窗口按比例变化
常用的视频播放器拖动窗口大小时都是按比例变化的,项目中也经常需要实现一个按比例变化的窗口。在mfc中实现窗口的比例变化十分简单,只需要在两个重载函数中按照固定比例设定窗口大小即可——OnSizing和OnGetMinMaxInfo。     首先,在OnGetMinMaxInfo中按比例设定最大值或者最小值。如下所示:     void CTestDlg::OnGetMinMaxInfo(MI
如何让控件随窗口大小的改变而成比例改变?
相关热词 c# gdi 占用内存 c#中遍历字典 c#控制台模拟dos c# 斜率 最小二乘法 c#进程延迟 c# mysql完整项目 c# grid 总行数 c# web浏览器插件 c# xml 生成xsd c# 操作sql视图