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

 <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. 动态规划——Edit Distance

    大意:给定两个字符串word1和word2,为了使word1变为word2,可以进行增加.删除.替换字符三种操作,请输出操作的最少次数   Example 1: Input: word1 = &quo ...

  2. NEERC-2017

    A. Archery Tournament 用线段树套set维护横坐标区间内的所有圆,查询时在$O(\log n)$个set中二分查找即可. 时间复杂度$O(n\log^2n)$. #include& ...

  3. ProjectEuler && Rosecode && Mathmash做题记录

    退役选手打发时间的PE计划 挂在这里主要是dalao们看到有什么想交流的东西可以私聊哦(站内信或邮箱吧) 2017/8/11  PE595 :第一题QAQ 2017/8/12  PE598 2017/ ...

  4. 5. 箭头函数_this 指向_es6 常用语法

    1. 箭头函数 函数的简写方式 () => {} 只有一个参数时,可以省略() ---- x => {} 只有一条语句时,可以省略{},此时这点语句的结果会作为函数的返回值返回  () = ...

  5. springmvc 学习资料

    https://github.com/brianway/springmvc-mybatis-learninghttps://www.bilibili.com/video/av18288362?from ...

  6. css边框渐变

    在实际开发中,我们经常遇见边框需要背景渐变的实现要求,那么如何去实现呢,今天给大家分享依稀几种情况 1.直角的背景渐变 <!DOCTYPE html> <html lang=&quo ...

  7. vcs编译verilog/sysverilog并执行

    命令: sverilog:表示支持systemverilog,如果只编译verilog不需要加 test.sv  :这个可以是一个systemverilog/verilog文件,也可以是一个filel ...

  8. CentOS7 FTP安装与配置

    1.FTP的安装 #安装yum install -y vsftpd #设置开机启动systemctl enable vsftpd.service #启动systemctl start vsftpd.s ...

  9. SaaS的先鋒：多合一讯息处理器

    在Rocketbots,我们的使命是改善企业与客户之间的关係.全球有超过40亿个消息传递帐户,人们花在上线对话的时间比任何其他活动都多.这种转变,创造了一个更高效及贴身的沟通.随著消费者越来越多要求, ...

  10. spark-sql自定义函数UDF和UDAF

    1 UDF对每个值进行处理: 2 UDAF对分组后的每个值处理(必须分组) SparkConf sparkConf = new SparkConf() .setMaster("local&q ...