zoukankan      html  css  js  c++  java
  • 浏览器窗口尺寸改变时的图片自动重新定位

    俗话说:拳不离手,曲不离口。学过的技能不用,放长了就生疏了,今天以前的同事问我:用户改变浏览器窗口尺寸时,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

    作者:菩提树下的杨过
    出处:http://yjmyzz.cnblogs.com
    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
  • 相关阅读:
    javascript运动详解
    jQuery Ajax封装通用类 (linjq)
    Bootstrap 字体图标引用示例
    jQuery $.each用法
    jquery中odd和even选择器的用法说明
    JQuery中怎么设置class
    HTML5中input背景提示文字(placeholder)的CSS美化
    边框上下左右各部位隐藏显示详解
    纯CSS气泡框实现方法探究
    对比Tornado和Twisted两种异步Python框架
  • 原文地址:https://www.cnblogs.com/yjmyzz/p/1982249.html
Copyright © 2011-2022 走看看