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

 <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. Service的绑定过程

    --摘自<Android进阶解密> 第一步:ContextImpl到AMS的调用过程 第二步:Service的绑定过程 1)几个与Service相关的对象类型 * ServiceRecor ...

  2. 网络编程-Mysql-1、数据库的启动关闭，创建数据库，表等基本操作

    启动服务端:sudo service mysql start 关闭服务端:suodo service mysql stop 重启服务端:suodo service mysql restart 连接数据 ...

  3. 自定义PlantUML和C4 Model样式

    什么是PlantUml PlantUml是一个支持快速绘制的开源项目.其定义了一套完整的语言用于实现UML关系图的描述.并基于强大的graphviz图形渲染库进行UML图的生成.绘制的UML图还可以导 ...

  4. vue加载优化策略

    vue.js是一个比较流行的前端框架,与react.js.angular.js相比来说,vue.js入手曲线更加流畅,不管掌握多少都可以快速上手.但是单页面应用也都有其弊病,有时候首屏加载慢的让人捏舌 ...

  5. ECMA Script 6_RegExp 正则表达式

    在 ES5 中 RegExp 构造函数的参数有两种情况 RegExp(字符串, 正则表达式的修饰符) RegExp(正则表达式); var regex = new RegExp('xyz', 'i') ...

  6. Go九九乘法表

    package main import "fmt" func main(){ ; i < ; i ++ { k ++ ; j ++ { { fmt.Printf(" ...

  7. Android adb 串口调试

    adb (串口输入) echo 1 > /sys/class/remount/need_remount; mount -o rw,remount /system                  ...

  8. 壁虎书3 Classification

    MNIST fetch_openml returns the unsorted MNIST dataset, whereas fetch_mldata() returned the dataset s ...

  9. Spring Cloud 学习记录

    Spring Cloud中文网 拜托!面试不要再问我Spring Cloud底层原理 SpringCloud简介与5大常用组件 Spring Cloud在国内中小型公司能用起来吗?

  10. graph engine

    有个侥幸的机会,参与了微软的项目,侥幸的接触了,graph engine图形数据库,感觉很是新颖,做点记录,和大家分享,理解有限,发现不足之处,还请指点. 微软发分布式图处理引擎GraphEngine ...