浏览器窗口尺寸改变时的图片自动重新定位

俗话说:拳不离手,曲不离口。学过的技能不用,放长了就生疏了,今天以前的同事问我:用户改变浏览器窗口尺寸时,flash中的图片如何重新定位于4个角上。花了近一刻钟才回忆想来:stage有Resize事件,呵呵

代码如下:

1.先把加载图片的逻辑封装一下

package  {
	import flash.display.Sprite;
	import flash.display.Loader;
	import flash.display.LoaderInfo;
	import flash.net.URLRequest;
	import flash.events.Event;
	import flash.display.Bitmap;
	import flash.events.IOErrorEvent;
	import flash.system.LoaderContext;

	public class LoadImage extends Sprite {

		private var _imgWidth:int;
		private var _imgHeight:int;

		public function LoadImage(url:String,imgWidth:int=380,imgHeight:int=305) {

			this._imgWidth = imgWidth;
			this._imgHeight = imgHeight;

			var _request:URLRequest = new URLRequest(url);
			var _loader:Loader = new Loader();
			var _lc:LoaderContext = new LoaderContext(true);
			_loader.contentLoaderInfo.addEventListener(Event.COMPLETE,loadComplete);
			_loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR,loadIO_Error);
			_loader.load(_request,_lc);

		}		

		private function loadComplete(e:Event):void
		{
			//trace("loadComplete");
			var li:LoaderInfo = e.currentTarget as LoaderInfo;
			var bmp:Bitmap = li.content as Bitmap;
			bmp.height = _imgHeight;
			bmp.width = _imgWidth;
			addChild(bmp);
		}

		private function loadIO_Error(e:IOErrorEvent):void
		{
			trace("load error!");
		}
	}
}

2.主文档类

package  {

	import flash.display.MovieClip;
	import flash.events.Event;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;

	public class ResizeDemo extends MovieClip {

		private var _top_left:LoadImage; //左上 的图片
		private var _top_right:LoadImage; //右上 的图片
		private var _bottom_left:LoadImage; //左下 的图片
		private var _bottom_right:LoadImage; //右下 的图片
		private var _center:LoadImage; //中心的图片
		private var _WIDTH:int; //舞台的宽度
		private var _HEIGHT:int; //舞台的高度

		public function ResizeDemo() {
			// constructor code

			if (stage)
			{
				init();
			}
			else
			{
				stage.addEventListener(Event.ADDED_TO_STAGE,init);
			}
		}

		private function init(e:Event=null)
		{
			stage.removeEventListener(Event.ADDED_TO_STAGE,init);
			stage.addEventListener(Event.RESIZE,reSizeHandler);
			stage.align = StageAlign.TOP_LEFT;
			stage.scaleMode = StageScaleMode.NO_SCALE;

			//加载图片
			_top_left = new LoadImage("top_left.jpg",100,150);
			_top_right = new LoadImage("top_right.jpg",100,150);
			_bottom_left = new LoadImage("bottom_left.jpg",100,150);
			_bottom_right = new LoadImage("bottom_right.jpg",100,150);
			_center = new LoadImage("center.jpg",200,300);

			addChild(_top_left);
			addChild(_top_right);
			addChild(_bottom_left);
			addChild(_bottom_right);
			addChild(_center);

			adjustPosition();

		}

		private function reSizeHandler(e:Event=null)
		{
			adjustPosition();
		}

		//调整位置
		private function adjustPosition()
		{
			_WIDTH = stage.stageWidth;
			_HEIGHT = stage.stageHeight;

			trace("_WIDTH =",_WIDTH);
			trace("_HEIGHT =",_HEIGHT);
			trace("_top_left.width =",_top_left.width);

			//定位 左上的图片
			_top_left.x = _top_left.y = 0;

			//定位 右上的图片
			_top_right.x = _WIDTH - _top_left.width;
			_top_right.y = 0;

			//定位 左下的图片
			_bottom_left.x = 0;
			_bottom_left.y = _HEIGHT - _bottom_left.height;

			//定位 右下的图片
			_bottom_right.x = _WIDTH - _bottom_right.width;
			_bottom_right.y = _HEIGHT - _bottom_right.height;

			//定位中心的图片
			_center.x = (_WIDTH - _center.width)/2;
			_center.y = (_HEIGHT - _center.height)/2;
		}

	}

}

截图二张:

在线演示地址:http://img.24city.com/jimmy/resize/resizedemo.html

时间: 2024-08-02 13:26:33

浏览器窗口尺寸改变时的图片自动重新定位的相关文章

html5-移动端网页检测到浏览器窗口尺寸问题

问题描述 移动端网页检测到浏览器窗口尺寸问题 我的手机屏幕分辨率是1920 * 1080,但我在网页中用window.innerHTML检测到 的手机尺寸是360 * 640. iPad mini2 检测到的尺寸是768 * 1024. 这是怎么回事? 解决方案 [JS]js代码来判断电脑或手机屏幕分辨率大小源代码 s = " 屏幕分辨率的高:"+ window.screen.height+"n"; s += " 屏幕分辨率的宽:"+ windo

js实现浏览器窗口大小被改变时触发事件的方法_javascript技巧

本文实例讲述了js实现浏览器窗口大小被改变时触发事件的方法.分享给大家供大家参考.具体分析如下: 当浏览器的窗口大小被改变时触发的事件window.onresize 为事件指定代码: 复制代码 代码如下: window.onresize = function(){ } 例如: 浏览器可见区域信息: 复制代码 代码如下: <span id="info_jb51_net">请改变浏览器窗口大小</span> <script> window.onresiz

背水一战 Windows 10 (3) - UI: 窗口全屏, 窗口尺寸

原文:背水一战 Windows 10 (3) - UI: 窗口全屏, 窗口尺寸 [源码下载] 背水一战 Windows 10 (3) - UI: 窗口全屏, 窗口尺寸 作者:webabcd 介绍背水一战 Windows 10 之 UI 窗口全屏 窗口尺寸 示例1.窗口全屏UI/FullScreen.xaml <Page x:Class="Windows10.UI.FullScreen" xmlns="http://schemas.microsoft.com/winfx/

Javascript中浏览器窗口的基本操作总结_javascript技巧

窗口位置 [1]获取 浏览器(firefox不支持)提供了screenLeft和screenTop属性,分别用于表示窗口相对于屏幕左边和上边的位置 在窗口最大化的情况下,运行下列代码时,各个浏览器返回的值并不相同.chrome返回left:0;top:0.而IE则返回left:0;top:56(若有菜单栏,则返回left:0;top:78),这是因为IE中保存的是从屏幕左边和上边到由window对象表示的页面可见区域的距离.safari则由于自身的bug,返回left:-8;top:-8 //移

JS+CSS实现自动改变切换方向图片幻灯切换效果的方法

 这篇文章主要介绍了JS+CSS实现自动改变切换方向图片幻灯切换效果的方法,实例分析了javascript操作图片切换方向的幻灯片技巧,具有一定参考借鉴价值,需要的朋友可以参考下     本文实例讲述了JS+CSS实现自动改变切换方向图片幻灯切换效果的方法.分享给大家供大家参考.具体实现方法如下:   代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o

用JS获取视窗或浏览器窗口的尺寸

包含有针对IE和Firefox两种浏览器的JS语法,详细请见文章... 获取视窗或浏览器窗口的尺寸 有时需要找出浏览器的有效窗口空间的尺寸,一般成为"视窗". IE 语法: var myBrowserSize = [0, 0]; myBrowserSize[0] = document.documentElement.clientWidth; myBrowserSize[1] = document.documentElement.clientHeight; Firefox 语法: var

浏览器窗口加载和大小改变事件示例

 这篇文章主要介绍了浏览器窗口加载和大小改变事件,需要的朋友可以参考下  代码如下: window.onload = function() {  var height = document.body.clientHeight;  document.getElementById("vivS").style.height = (height - 20) + "px";  document.getElementById("emd").style.hei

wpf窗口拖拽时 窗口内的一个控件的数量会随着 区域的大小而改变

问题描述 wpf窗口拖拽时 窗口内的一个控件的数量会随着 区域的大小而改变 WPF窗口在拖动时 怎样做到窗口中的控件的数量会根据区域的大小而变化 啊? 比如我窗口本来有一张图片 当窗口拉大时 显示3张图片. 有用到过的吗?? 解决方案 用UniformGrid布局http://www.cnblogs.com/libaoheng/archive/2011/11/19/2255558.html

extjs-页面内容不能随浏览器窗口大小而改变大小,且内容超出窗口也不会出现滚动条

问题描述 页面内容不能随浏览器窗口大小而改变大小,且内容超出窗口也不会出现滚动条 本人小白,现在做一个小的Web项目,使用的是ExtJs,但是页面的显示样式和布局有问题,页面中的内容显示不全,也不能随着浏览器窗口大小而改变显示内容. 求大神告知.下面是页面! 主页面panel和viewport组件: var panel = new Ext.Panel({ //height: '60%', layout: 'border', //anchor: '100%,100%', //min width: