点左边左边变大。点右边右边大左边小

 <style type="text/css">

			*{

				margin:0px auto;

				padding:0px;

				}

        	#wai{

				width:100%;

				height:500px;

				}

			#nei_1{

				height:500px;

				background-color:blue;

				float:left;

				}

			#nei_2{

				height:500px;

				background-color:#6C0;

				float:left;

				}

			#anniu{

				width:50px;

				height:50px;

				background-color:red;

				position:absolute;

				top:225px;

				}

        </style>

    </head>

    <body>

    	<div id="wai">

        	<div id="nei_1" style="width:200px;" onclick="Hua()"></div>

            <div id="nei_2" style="width:700px;" onclick="Hui()"></div>

        </div>

        <div id="anniu" onclick="Hua()"  style="left:175px;"></div>

    </body>

    <script type="text/javascript">

    	//蓝色的长度变大

		//绿色的长度变小

		//红色框的位置

		var id;

		function Hua()

		{

			id = window.setInterval("Dong()",20);

		}

		//每一次调用一次，改变的样式

		function Dong()

		{

			//获取蓝色的元素

			var left = document.getElementById("nei_1");

			//获取蓝色的宽度

			var lw = left.style.width;	

			//判断宽度是否超出

			if(parseInt(lw.substr(0,lw.length-2))>700)

			{

				window.clearInterval(id);

				return;

			}

			//获取数字加2

			lw = parseInt(lw.substr(0,lw.length-2))+2;

			//修改样式

			left.style.width = lw+"px";

			//绿色的修改

			var right = document.getElementById("nei_2");

			var rw = right.style.width;

			rw = parseInt(rw.substr(0,rw.length-2))-2;

			right.style.width = rw+"px";

			//红色的修改

			var an = document.getElementById("anniu");

			var al = an.style.left;

			al = parseInt(al.substr(0,al.length-2))+2;

			an.style.left = al+"px";

		}

		var ad;

		function Hui()

		{

			ad = window.setInterval("Lai()",20);

		}

		function Lai()

		{

			//绿色的修改

			var right = document.getElementById("nei_2");

			var rw = right.style.width;

			if(parseInt(rw.substr(0,rw.length-2))>700)

			{

				window.clearInterval(ad);

				return;

			}

			rw = parseInt(rw.substr(0,rw.length-2))+2;

			right.style.width = rw+"px";

			//红色的修改

			var an = document.getElementById("anniu");

			var al = an.style.left;

			al = parseInt(al.substr(0,al.length-2))-2;

			an.style.left = al+"px";

			//获取蓝色的元素

			var left = document.getElementById("nei_1");

			//获取蓝色的宽度

			var lw = left.style.width;

			lw = parseInt(lw.substr(0,lw.length-2))-2;

			left.style.width = lw+"px";

		}

    </script>

js左右大小变化的更多相关文章

  1. 使用three.js创建大小不随着场景变化的文字

    使用three.js创建大小不随着场景变化的文字,需要以下两步: 1.将文字绘制到画布上. 2.创建着色器材质,把文字放到三维场景中. 优点: 1.跟用html实现文字相比,这些文字可以被模型遮挡,更 ...

  2. delphi 窗口最大化后控件的大小变化怎么设置

    设置按钮的Anchors属性.可以通过此属性设置其边界是否随父类一起变化.默认akleft+aktop即左边界和上边界随窗口变化,也就是说如果窗口位置移动了,按钮将保持其left和top边界与窗口的距 ...

  3. TableControl大小变化

    TableControl跟随Form大小变化: 选中TableControl,而不是TablePage,右侧Layout: 可以对其设置居上.居下等位置

  4. angular2监听页面大小变化

    一.现象 全屏页面中的图表,在很多的时候需要 resize 一把,以适应页面的大小变化 二.解决 1.引入 : import { Observable } from 'rxjs'; 2.使用(在ngO ...

  5. [转]webpack4.0.1安装问题和webpack.config.js的配置变化

    本文转自:https://blog.csdn.net/jiang7701037/article/details/79403637 The CLI moved into a separate packa ...

  6. div宽度随屏幕大小变化

    题目: 一个页面上两个div左右铺满整个浏览器, 要保证左边的div一直为100px,右边的div跟随浏览器大小变化, 比如浏览器为500,右边div为400,浏览器为900,右边div为800. 方 ...

  7. 涉及到大小变化，类似QScrollArea判断大小是否显示滚动条

    涉及到大小变化,类似QScrollArea判断大小是否显示滚动条的情况要注意 这两个属性的设置:

  8. MFC窗体大小变化

    对话框的大小变化后,假若对话框上的控件大小不变化,看起来会比较难看.下面就介绍怎么让对话框上的控件随着对话框的大小的变化自动调整. 首先明确的是Windows有一个WM_SIZE消息响应函数,这个函数 ...

  9. winfrom 中 label 文字随着窗体大小变化

    在进行winfrom 开发过程中,窗体中的文字需要随着窗体大小变化,否则会影响窗体的美观和客户的体验. 之前曾经试过几种方法效果都不满意,例如将label的Dock 属性设置为fill.这样的设置对解 ...

随机推荐

  1. 20172328 2018-2019《Java软件结构与数据结构》第五周学习总结

    20172328 2018-2019<Java软件结构与数据结构>第五周学习总结 概述 Generalization 本周学习了第九章:排序与查找,主要包括线性查找和二分查找算法和几种排序 ...

  2. 《团队作业第二周》五小福团队作业——UNO

    <团队作业第二周>五小福团队作业--UNO 一.修改完善上周提交的需求规格说明书 THE FIRST改变 首先:我们组的博客无小组分工及占比,这是第一个问题,当时我们在写博客的时候由于很多 ...

  3. 关于linux上部署定时python脚本

    遇到的坑: Python脚本中的文件操作,最好都用绝对路径, 文件头上写 #!/usr/local/bin/python3.6 ----------------------------------- ...

  4. Python编码规范：IF中的多行条件

    Python编码规范:IF中的多行条件 转载 2017年03月08日 09:40:45 http://blog.csdn.net/wsc449/article/details/60866700 有时我 ...

  5. [TopCoder]棍子

    题目描述 你有一堆棍子.每个木棒的长度是一个正整数. 你想要一组棍子所有的棍子都有相同的长度.您可以通过执行零个或多个步骤来更改当前集合.每个步骤必须如下所示: 你选择一根棍子.所选棒的长度必须至少为 ...

  6. linux进阶指令

    1.df  查看磁盘空间  2.free   查看内存使用 -m 表示以mb位单位查看 total    总大小 used   使用过的空间 free 空闲的空间 shared 共享内存 buffer ...

  7. 运行make_datafiles的过程

    1. 第一个bug 运行 echo "Please tokenize this text." | java edu.stanford.nlp.process.PTBTokenize ...

  8. priority_queue和sort应用

    #include"iostream" #include"String" #include"stdio.h" #include "s ...

  9. JS-函数的构造函数Function

    ##  在js中使用Function可以实例化函数对象,也就是说在js中函数和普通对象一样. 函数在Js中是比较特殊的,拥有很多功能. 1,函数是对象,就可以使用对象的动态特性. 2,函数是对象,就有 ...

  10. java验证码生成

    第一种方式:纯代码 先写jsp: 在编写CaptServlet: package cn.itcast.web.controller; import java.awt.Color; import jav ...