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

 <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. Windows Server 2008 R2 修改远程桌面服务RDP默认端口及相应的防火墙配置

    修改以下两个注册表项当中的默认端口3389为自定义端口: [HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\Terminal Server\Wd ...

  2. 观察者模式（Observer）和发布（Publish/订阅模式（Subscribe）的区别

    观察者模式(Observer)和发布(Publish/订阅模式(Subscribe)的区别 在翻阅资料的时候,有人把观察者(Observer)模式等同于发布(Publish)/订阅(Subscribe ...

  3. CentOS 7 下安装 teamviewer 13

    CentOS 版本:centos-release-7-4.1708.el7.centos.x86_64(通过 rpm -q centos-release 查询) teamviewer 版本:teamv ...

  4. 影响CSS的margin合并的几个属性

    很多人知道,在CSS中存在Margin合并的现象,比如下代码: <style> div { margin:10px; height:100px; background:red; } < ...

  5. Laravel使用心得

    Laravel使用心得 1.session使用 laravel的session使用时,不要使用exit和die,否则session会为空. 2.ajax提交注意框架对post的CSRF保护 在头加上& ...

  6. IOS开发中发布的时候取消日志打印

    在PCH文件中定义如下宏 #if DEBUG #define NSLog(...) NSLog(__VA_ARGS__) #define debugMethod() NSLog(@"%s&q ...

  7. yield学习笔记

    参考:http://www.dabeaz.com/finalgenerator/ from concurrent.futures import ThreadPoolExecutor import ti ...

  8. 数据结构-堆 Java实现

    数据结构-堆 Java实现. 实现堆自动增长 /** * 数据结构-堆. 自动增长 * */ public class Heap<T extends Comparable> { priva ...

  9. Python学习小纪

    1.打包发布*.py文件---"文件路径下打开命令行 d:\python\python.exe setup.py sdist" eg:打包发布f:\C\python\print_l ...

  10. 关于Android的fragment的使用

    fragment的静态使用 首先创建两个fragment,就把fragment当成activity去写布局,第一个是fragment_title: <LinearLayout xmlns:and ...