DIV中图片垂直居中以及等比缩放

我想应该有很多朋友都会碰到DIV中图片垂直居中的问题,DIV不像TABLE,直接一个valign就搞定,特别是当图片的大小不确定的时候,无法通过事先定位来解决。而等比缩放的话,IE6中不认 max-height跟max-width。本民工几经摸索加实践,终于找到一种比较简单干净的方法,是从淘宝网上学来的,呵呵。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
.box {
/*非IE的主流浏览器识别的垂直居中的方法*/
display: table-cell;
vertical-align:middle;
/*设置水平居中*/
text-align:center;
/* 针对IE的Hack */
*display: block;
*font-size: 175px;/*这个值大概为最大高度的0.875*/
*font-family:Arial;/*防止非utf-8引起的hack失效问题,如gbk编码*/
width:200px;
height:200px;
border: 1px solid #eee;
}
.box img {
/*设置图片垂直居中*/
vertical-align:middle;
/*非IE6下的等比缩放*/
max-height:150px;
max-width:150px;
/*IE6下的等比缩放,注意expression其实是运行了一个JS程序,所以如果图片很多的话会引起CPU占用率高*/
width:expression(this.width >150 && this.height <= this.width ? 150: true);
height:expression(this.height > 150 && this.width <= this.height ? 150 : true);
}
<div class=”box”>
<img src=”02.jpg” />
</div>

Download:mywork.rar

AS3获取当前URL地址以及防盗链

前阵子弄了个小游戏,然后想着像以前那样加个防盗链的功能(其实到最后也都没加,小破游戏会有谁来链啊),不过在这里可以讲讲实现的方法。

一般来说FLASH防盗链的手法都是获取当前的URL地址,然后跟事先指定的一个URL进行比对。获取当前URL的方法非常简单,有下面这句就可以了
loaderInfo.url
获取到了当前的URL那就好办事啦,一般说来一个域名都有带WWW或不带,所以一般需要预设两个URL地址。

1
2
3
4
5
6
7
8
var url:String = "http://www.moondyzone.com";
var url2:String = "http://moondyzone.com";
//substring(0, 25)就是取前25个字符进行比较;
if ((loaderInfo.url.substring(0, 25)==url) || (loaderInfo.url.substring(0, 21)==url2)) {
//随便你写什么了。
} else {
//也是随便你写什么了。
}

JSON简析以及AS3中JSON类的应用

以往在做FLASH数据交互的时候,大多用的是XML,或者直接通过html传递参数来交互。前不久接触了一下JSON,研究了一下,觉得还是值得写点东西的。

json是JavaScript Object Notation的简写,是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。它是基于JavaScript(Standard ECMA-262 3rd Edition – December 1999)的一个子集,也就是说他是来自于javascript的东西。因为现在ajax的流行,大部分网站会采用ajax的模式和构架,那么json会是一个数据传输的首选(文本方式太简单,要是大数据量的时候无法理解,xml的方式数据量大,在解析的时候会增加服务器负担),那么要是一个网站从ajax构架的基础上出一个flex/flash版的界面的时候使用json会最少地减少服务器端的程序改动。

JSON的结构写法很容易理解,它原本就是以数据量小和清晰的数据格式而著称的。但是在AS中使用json其实并不是一个必须或是很好的选择,很多时候我们还是会用XML,因为AS对XML的解析已经很好了。但是多了解一种数据交互形式,特别是如此简单的JSON,当然是有益无害的咯。

在这里想说些题外话,很多人喜欢拿XML跟JSON的可读性以及解析来做比较,其实一个写法优秀的XML也不会比JSON差,举个例子来说吧,现假设有一个用户数据包括:用户名、密码、所在部门、性别、年龄。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
用XML表示如下:
<?xml version="1.0" encoding="utf-8"?>
  <user>
  <name>张三 </name>
  <password>123456</password>
  <department>技术部</department>
  <sex></sex>
  <age>30</age>
  </user>
对于这样一个XML来说,如果数据量大了的确让人头昏眼花,也不好处理,但是如果我们转化成下面这种形式的话:
<?xml version="1.0" encoding="utf-8"?>
  <user>
            <people name="张三" password="123456" depattment="技术部" sex="男" age="30" />
  </user>
再跟相应该的JSON来比较:
{"name":"张三","password":"123456","department":"技术部","sex":"男","age":"30"}
也不会相差太多咯。

下面再说说adobe的官方的JSON类的用法吧。

1、服务器端来的json
语法:JSON.decode(String)
从服务器端获得的应该是一个字符串,把它存入一个变量,然后通过JSON.decode(String)方法后,就可以通过点语法来访问这些值。下面是一个网络上找来的例子:

1
2
3
4
5
6
7
8
9
10
11
12
13
var serverJSON:String = '{ "programmers":{ "firstName": "Brett", "lastName":
"McLaughlin", "email": "brett@newInstance.com" }, "firstName": "Jason", 
"lastName":"Hunter", "email": "jason@servlets.com" },  "firstName": 
"Elliotte", "lastName":"Harold", "email": "elharo@macfaq.com" }],
"authors": "firstName": "Isaac", "lastName": "Asimov", "genre": 
"science fiction" }, "firstName": "Tad", "lastName": "Williams", "genre": 
"fantasy" }, "firstName": "Frank", "lastName": "Peretti", "genre": 
"christian fiction" }],"musicians":  "firstName": "Eric", "lastName": 
"Clapton", "instrument": "guitar" },{ "firstName": "Sergei", "lastName": 
"Rachmaninoff", "instrument": "piano" }]}'
var s:Object = JSON.decode(serverJSON);
//开始使用
trace(s.programmers[0].firstName);//输出:Brett

2、本地对象做成JSON
语法:JSON.encode(Object)
其实也就是跟读取相反,创建一个对象然后输出而已了。你可以直接拼写JSON的字符串,也可以通过对象来创建了。

1
2
3
4
5
6
7
import json.*;
var myObject:Object = new Object();
myObject.ab = "adfsdf";
myObject.cd = Math.random();
trace(JSON.encode( myObject ));
//输出:{"ab":"adfsdf","cd":0.0599129400216043}
这样就可以给服务器了。

本民工接触JSON也不久,一些个人看法,如有不对欢迎指正。

AS3一些不太常见的代码写法(二)

好了,接上一篇,把代码的详细解释发出来吧,大都是一些代码的简写方式:

1、把:
//mc跳转到10以内的随机帧
mc.gotoAndPlay(Math.floor(Math.random()*10));
写成:
mc.gotoAndPlay(Math.random()*10>>0);
//大多数人都会用Math.floor()来取整,>>是位移符号,>>0就是去除小数点之后的数,用此方法来取整真是即方便又强悍。
2、把:
if(i%2==1){}//判断如果i是奇数,执行大括号中的语句
写成:
if(i&1){}
//i&1就是判断i是否是奇数,而思想就是以i的二进制最后一位与1相与,为真就是奇数、假就是偶数。跟传统的用模除来判断奇偶的思想相比,也很强悍。

3、把:
//给一个数组压入10以内的整数
var a:Array=[];
for (var i:int=0; i<10; i++) {
a.push(i);
}
写成:
//这是一种简化的写法,for语句后如果有一行代码要执行,可以省去大括号,这里只用分号相当于执行空语句
for (var i:int=0; i<10; a.push(i++));

4、把:
//计算鼠标移动的水平速度
var temp:Number=mouseX;
stage.addEventListener(MouseEvent.MOUSE_MOVE,moveHandler);
function moveHandler(e:MouseEvent):void {
var d:Number=mouseX-temp;
temp=mouseX;
}
写成:
var temp:Number=mouseX;
stage.addEventListener(MouseEvent.MOUSE_MOVE,moveHandler);
function moveHandler(e:MouseEvent):void {
var d:Number=(-temp+(temp=mouseX));
}
//这样的简写方式虽然很强悍,但本民工觉得降低了可读性,不需强求。

5、把:
//随机运行几个函数中的一个
function fn1 () {
trace(“1″);
}
function fn2 () {
trace(“2″);
}
var a:Array=[fn1,fn2];
var b:int=Math.random()*2>>0;
a[b]();
写成:
function fn1 () {
trace(“1″);
}
function fn2 () {
trace(“2″);
}
([fn1,fn2][Math.random()*2>>0])();
//高手就是喜欢省,没有超强的逻辑思绪还真搞不定呢。

6、把:
//多重条件语句
var a:int=6;
if (a>0) {
trace(“a is positive number”);
if (a&1) {
trace(“a is positive odd number”);
}
}
可以写成:
var a:int=3;
if (a>0&&(trace(“a is positive number”),a&1))
trace(“a is positive odd number”);
//这个我想应该很多人都会写,多重IF的简写,&&左边的语句返回true时才执行右边的。

7、把:
var a:int=13;
var b:int=-12;
if (!((a^b)>0)) {
b*=-1;
}
if ((a^b)>0||a>10) {
trace(b);
}
写成:
var a:int=13;
var b:int=-12;
if((a^b)>0||(b*=-1,a>10))
trace(b);
//跟上一例一样,||的左边语句要返回false时才执行右边的语句,另外,逗号表达式的返回值是最后一个逗号右边语句的返回值。

AS3一些不太常见的代码写法(一)

今天收集来了一些高手们的代码写法,可以看成是某些语法的简写,但除此之外,还包含了高手们强悍的思想。我先把代码帖出来,稍后再把代码的解释发出来。

1、
mc.gotoAndPlay(Math.random()*10>>0);

2、
if(i&1){}

3、
for (var i:int=0; i<10; a.push(i++));

4、
var temp:Number=mouseX;
stage.addEventListener(MouseEvent.MOUSE_MOVE,moveHandler);
function moveHandler(e:MouseEvent):void {
var d:Number=(-temp+(temp=mouseX));
}

5、
function fn1 () {
trace(“1″);
}
function fn2 () {
trace(“2″);
}
([fn1,fn2][Math.random()*2>>0])();

6、
var a:int=3;
if (a>0&&(trace(“a is positive number”),a&1))
  trace(“a is positive odd  number”);

7、
var a:int=13;
var b:int=-12;
if((a^b)>0||(b*=-1,a>10))
trace(b);

IE6中出现重复字符的BUG

在某些条件下,IE6中会出现这样的BUG(似乎只在IE6里出现,其他浏览器没见过),在一些浮动元素的最末尾的几个字符会在该元素下面重复出现:
zzz

经过多次偿试后得出结论,大多数时间该BUG是由页页中的注释引起的,虽然可以通过给该容器的右空白边设置一个负值来解决,但很可能又会在其他浏览器中产生影响,所以最好的办法就是把注释都给去掉。

但是,有些时候页面里一个注释都没有,也会出现这个BUG,本民工不信这个邪,找了很多资料后,总算得到一个说法。这个BUG不一定跟注释有关但基本上都跟浮动有关,当页面里有type=hidden的input以及display: none的div的时候,也会引起这个BUG。解决的方法可以适当调整下该元素的位置,最通用的办法就是用一个DIV把它包起来就好了。