PowerDesigner生成sql脚本

一、生成sql server 2000或oracle建表sql脚本
1、新建一个物理模型,通过database菜单下的change current dbms可查看当前所用的DBMS是什么类型的,比如sql server 2000 或oracle 10g,当前选择sql server 2000。
2、在新建的dbms为sql server 2000的物理模型中添加表及关系,通过database菜单下的generate database可将当前DBMS的表结构及关系导出成sql语句。
3、若想将sql server 2000的表结构及关系变成oracl 10g的表结构及关系,可通过Tools菜单下的generate physical data model,再选择DBMS为oracle10g,就可生成oracl10g的表结构及关系。
4、若想将oracl10g中的表结构及关系导出成sql语句,执行database菜单下的generate database可将当前DBMS的表结构及关系导出成sql语句。
注意:oracle10g生成的sql语句可能表名及字段名存在用引号括起的情况,不用担心,通过简单的设置即可解决。
二、PowerDesigner生成数据库建表sql脚本时出现双引号解决方法(测试通过的软件版本为PowerDesigner V15.1.0.2850)
PowerDesigner生成数据库建表SQL脚本时,尤其是Oracle数据库时,表名一般会带引号。其实加引号是PL/SQL的规范,数据库会严格按照“”中的名称建表,如果没有“”,会按照 ORACLE默认的设置建表(DBA STUDIO里面),默认是全部大写,这样,在ORACLE数据库里的字段就如“Column_1”。如果你把引号去掉,ORACLE自动默认为全部大写,即“COLUMN_1”,所以这段SQL在PL/SQL中执行的时候是没有任何问题的,如果不加引号,在PL/SQL会自动识别为大写。如果加了引号,sql或者hql查询“Column_1=’XXX’”时,就会报错:ORA-00904: “COLUMN_1”: 无效的标识符,除非写为“‘Column_1’=’XXX’”。
这个问题是生成脚本格式的问题,因此,我们可以尝试在DBMS配置文件中修改相应的格式设置来解决这个问题。选择“DBMS Properties”,选择Script->Sql->Format,有一项CaseSensitivityUsingQuote,它的comment为“Determines if the case sensitivity for identifiers is managed using double quotes”,表示是否适用双引号来规定标识符的大小写,可以看到右边的values默认值为“YES”,改为“No”,点击【应用】按钮。

2013网页风格设计趋势(1)

2013年已经过去大半,让我们回顾和总结一下这大半年中网页设计的趋势,无论是专业的网页设计师还是企业,或是你的客户,掌握这些趋势有益于帮忙我们的网站更好的使用。

内容设计

现在越来越多的设计师更加注重于网页中访问者感兴趣的内容的设计,他们会围绕找这些内容进行进行排版和设计,而不是仅仅把内容粘贴上去。通常他们会尽可能地把内容设计成更加简洁或简约,留白恰当,再配置精美的图案,让浏览者赏心悦目。

响应式设计

响应式设计流行始于2012,并至今还是网页设计时下最流行的趋势。该设计是使用网页中的CSS/JS等技术,然后根据不同的浏览设备和屏幕尺寸,达到自适应显示。由于目前移动互联的强势发展以及各种移动终端的进一步普及,导致了这个设计趋势的发展,它使得人们在浏览网页的时候,不需要像以前那样需要不断左右滑动屏幕才能看全一个网页。

Metro主题

由于Windows 8中使用的Metro主题,使得越来越多设计师更趋向于简约、内容设计等,就像Metro主题那样,把内容放置入不同尺寸的框框,而这些框框把放置在网格中。

Retina 支持

苹果公司在2012年度中介绍在他的iPhone4、iPad和MacBook上的Retina液晶显示屏时,让我们了解到他的这款液晶屏具有更高的分辨率,苹果公司声称这个液晶屏具有极高的分辨率,可以在一定观看屏幕的距离范围,人们无法观察到一些图形像素。这使得在2013年中很多设计师趋向在网页中使用更高分辨率的图片以及响应式设计来让人们在苹果的屏幕中得到更好的观看。Retina.js是一个十分有用的脚本,它能更好地给Retina屏幕发送更高分辨率的图像。

无限滚动

很多人已经在使用支持无限滚动技术的社会媒体网站,例如Pinterest,Facebook等,这些网站中,当浏览者无限向下滚动页面的时候,网站会自动不断地显示更多内容。目前已经很多设计师在网站中使用该技术来提升网站的用户体验,而不是再像以前那种需要采用分页方式来等待下一页的加载和显示。

 

使用JAVA获取客户端MAC地址

//Java获得CPU序列号和网卡Mac地址

/*
利用Runtime call操作系统的命令,具体的命令取决于不同的操作系统,注意不要调用Runtime.getRuntime().exec(String)接口,要用Runtime.getRuntime().exec(String[])这个接口,不然复杂命令的执行会有问题。例子如下(拿cpu个数,其他类似):
定义命令:
WindowsCmd =”cmd.exe /c echo %NUMBER_OF_PROCESSORS%”;//windows的特殊
SolarisCmd = {“/bin/sh”, “-c”, “/usr/sbin/psrinfo | wc -l”};
AIXCmd = {“/bin/sh”, “-c”, “/usr/sbin/lsdev -Cc processor | wc -l”};
HPUXCmd = {“/bin/sh”, “-c”, “echo “map” | /usr/sbin/cstm | grep CPU | wc -l “};
LinuxCmd = {“/bin/sh”, “-c”, “cat /proc/cpuinfo | grep ^process | wc -l”};

然后判断系统:
os = System.getProperty(“os.name”).toLowerCase();

根据不同的操作系统call不同的命令。
*/
import java.io.IOException;
import java.io.InputStream;
import java.io.InputStreamReader;
import java.io.LineNumberReader;

public class GetMACAddress
{
public String getMACAddress(String ipAddress)
{
String str = “”,strMAC = “”,macAddress = “”;
try
{
Process pp = Runtime.getRuntime().exec(“nbtstat -a ” + ipAddress);
InputStreamReader ir = new InputStreamReader(pp.getInputStream());
LineNumberReader input = new LineNumberReader(ir);
for(int i = 1;i < 100;i++)
{
str = input.readLine();
if(str != null)
{
if(str.indexOf(“MAC Address”) > 1)
{
strMAC = str.substring(str.indexOf(“MAC Address”) + 14,str.length());
break;
}
}
}
}
catch(IOException ex)
{
return “Can’t Get MAC Address!”;
}
//
if(strMAC.length() < 17)
{
return “Error!”;
}
macAddress = strMAC.substring(0,2) + “:”
+ strMAC.substring(3,5) + “:”
+ strMAC.substring(6,8) + “:”
+ strMAC.substring(9,11) + “:”
+ strMAC.substring(12,14) + “:”
+ strMAC.substring(15,17);
//
return macAddress;
}

public static void main(String[] args)
{
GetMACAddress getMACAddress = new GetMACAddress();
System.out.println(getMACAddress.getMACAddress(“172.18.8.225”));

try
{
java.lang.Process proc = Runtime.getRuntime().exec(“ipconfig /all”);
InputStream istr = proc.getInputStream();
byte[] data = new byte[1024];
istr.read(data);
String netdata = new String(data);
System.out.println(“Your Mac Address=” + procAll(netdata));
}
catch(IOException e)
{
System.out.println(“error=” + e);
}
}

public static String procAll(String str)
{
return procStringEnd(procFirstMac(procAddress(str)));
}

public static String procAddress(String str)
{
int indexof = str.indexOf(“Physical Address”);
if(indexof > 0)
{
return str.substring(indexof,str.length());
}
return str;
}

public static String procFirstMac(String str)
{
int indexof = str.indexOf(“:”);
if(indexof > 0)
{
return str.substring(indexof + 1,str.length()).trim();
}
return str;
}

public static String procStringEnd(String str)
{
int indexof = str.indexOf(“r”);
if(indexof > 0)
{
return str.substring(0,indexof).trim();
}
return str;
}
}

import java.util.Vector;

class GetNetMAC
{
//网卡物理地址长度
static private final int _physicalLength = 16;

public static void main(String[] args)
{
//output you computer phycail ip address
System.out.println(“The MAC Addressis:t” + getPhysicalAddress());
}

static public String getPhysicalAddress()
{
GetNetMACShell shell = new GetNetMACShell();
String cmd = “cmd.exe /c ipconfig/all”;
Vector result;
result = shell.execute(cmd);
return parseCmd(result.toString());
}

//从字符串中解析出所需要获得的字符串
static private String parseCmd(String s)
{
String find = “Physical Address. . . . . . . . . :”;
int findIndex = s.indexOf(find);
if(findIndex == -1)
{
return “not find”;
}
else
{
return s.substring(findIndex + find.length() + 1,findIndex + find.length() + 1 + _physicalLength);
}
}
}

html5实现完美搜索框

前面我们已经了解到一些html5中新增的表单验证属性,相当实用,直接实现了之前需要用js才能实现的功能。我们通常做的搜索框也属于表单内容,就是一个text类型的input和一个submit类型的input

Type=”text”的input是最基本的input类型,仅针对它,html5就新增了几个非常人性化的属性:placeholderautofocusspeech

Placeholder,例:<input type=”text” placeholder=”输入搜索内容“> 。一目了然,它就是用来设置初始值的,而且初始值的颜色为灰色,一旦input中输入新内容,这个值就消失了。这个属性真真是太人性化了。

Autofocus,例:<input type=”text” autofocus>。“自动聚焦”,即当进入一个页面时,加有此属性的input输入框会自动获取焦点,也就是光标第一时间自动停留在该input上,用户可以在进入页面后直接输入内容,而省去了移动鼠标到input上并点击这一步骤。如果一个页面上有两个以上input使用了此属性,那么浏览器会自动选择最后一个使用它的input来聚焦。

Speech,语音输入功能属性。大家用智能手机的时候应该都见识过输入框里那个小话筒的语音输入功能吧,就是用的这个属性。不过目前大部分浏览器都还没有实现这些接口,只有基于webkit核心的浏览器(如Chrome)才能使用它,且需要加上x-webkit前缀。也就是说x-webkit-speechwebkit内核浏览器特有的语音识别工具,即私有属性。用法:<input type=”text” x-webkit-speech>。

大家可以将下面的code直接拷贝并另存为网页,在Chrome浏览器里预览并体验一下,很赞的哦~

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>

<title>无标题文档</title>

<style type=”text/css”><!–

.searchForm input {

font-size:12px;

}

.searchForm input[type=”text”] {

background:#fff;

border:1px solid #f00;

color:#999;

float:left;

height:28px;

line-height:28px;

outline:none;

padding:3px;

width:180px;

}

.searchForm input[type=”submit”] {

background:#f90;

border:1px solid #f00;

color:#fff;

cursor:pointer;

display:inline-block;

height:36px;

margin-left:-1px;

padding:0 15px;

vertical-align:middle;

}

.searchForm input[type=”submit”]:hover {

background:#f60;

}

–></style>

</head>

 

<body>

 

<form class=”searchForm” method=”get”>

<p>

<input type=”text” placeholder=”输入搜索内容“> 

<input type=”submit” value=”点击搜索“>

</p>

<p>

<input type=”text” autofocus x-webkit-speech>

<input type=”submit” value=”点击搜索“>

</p>

</form>

</body>

</html>

 

如何修改上传选择框(input[file])为英文按钮

如图,这是TalentPool项目的一处需求效果,看似简单的一段布局,暗含一个难点:上传选择框(input[file])默认按钮文字是中文,且不同浏览器解析不一样(“浏览、选择文件”等),而我们要做的是英文网站,所以这个问题亟待解决。

首先想到的就是将<input type=”file” />设置透明隐藏起来;再做一个文本框<input type=”text” />和按钮<input type=”button” value=”Browse” />来模拟上传选择框(input[file])的样式;然后利用此按钮的click事件触发<input type=”file” />click()来模拟点击效果;最后给<input type=”file” />绑定一个change事件将选择获得的路径文本赋给文本框<input type=”text” />。做到这里应该算成功了吧,然而在测试的时候发现此方法在IE下行不通,原因是IE中提交表单时会清空表单数据,这一瞬间触发了我加的绑定change事件,从而导致无法提交到选择文件。

头疼了好一会儿,上网搜集这个问题,发现网上的答案大多也是与此类似,可是此方法不可行啊。于是静下心来,从问题点出发考虑,并结合各位前辈提出的问题,经过各种尝试终于得到最完美的解决方案:首先同样是将<input type=”file” />设置透明,不过不隐藏,而是至于顶层;再做一个文本框<input type=”text” />和按钮<input type=”button” value=”Browse” />置于<input type=”file” />下层并调整样式使之刚好被<input type=”file” />覆盖;然后给<input type=”file” />添加onChange=”setFilePath()”,并在JS中写好一个方法setFilePath(),实现点击<input type=”file” />后及时赋值给文本框<input type=”text” />。另外<input type=”file” />的宽度样式设置也很巧妙,用样式width来设置是不起效果的;用内带的size来设置只有IE下有效;而后又发现用JS设置width样式在火狐这类主流浏览器有效,IE无效。这样也不错,可以分别设置这两个值来匹配一个固定的宽度。

到此为止,问题总算得到完美解决。下面分别贴出3部分代码,应该注意的部分已用粗体标注:

 

HTML:

<form name=”uploadForm”>

<input id=”browseTrue” size=”34″ type=”file” name=”upload” onChange=”setFilePath()”>

<input type=”text” id=”browseText”>

<input id=”browse” type=”button” value=”Browse” />

</form>

 

CSS:

#browseTrue {

position:absolute;

z-index:2;

}

#browseText, #browse {

position:relative;

z-index:1;

}

#browseText {

width:190px;

padding:3px;

border:1px solid #d0d0d0;

}

#browse {

background:#eee;

border:1px solid #ccc;

height:23px;

padding:0 16px;

color:#666;

}

 

JS:

$(function(){

$(“#browseTrue”).css({“opacity”:”0″,”width”:”278px”,”height”:”24px”});

});

function setFilePath(){

$(“#browseText”).val(document.forms[“uploadForm“].upload.value);

};

 

记得还要调用jQuery函数库文件哦。

CSS3动画属性之Transitions

今天再向大家介绍CSS3的一个经典——动画属性:Transitions。Transitions有三个参数property、duration、timing-function。

Property:表示某属性名称,即将要设置动画的那个属性,如background、color、height、width等;

Duration:表示动画执行时间,即将在多少时间内完成动画,如0.5s表示半秒,1s表示1秒;

Timing-function:表示执行动画的种类,可理解为过度效果,比如linear(匀速渐变)、ease-in(由慢到快渐变)、ease-out(由快到慢渐变)等。

来实例说明下:有一段落p,背景色为红色,字体为白色,现在要实现一个动画效果是,当鼠标悬停到此段落p上时,在2秒时间完成背景色渐变为黑色的动画。应该这么写:

p {

background:#f00;

-webkit-transition:background 2s linear;

-moz-transition:background 2s linear;

-o-transition:background 2s linear;

-ms-transition:background 2s linear;

transition:background 2s linear;

color:#fff;

}

p:hover {background:#000;}

* 注意:此属性在不同浏览器下需要带有不同的前缀(例如-webkit-****等)

另外,Transitions属性中的三个参数是可以拆开表达的,就好比我们常见的background能拆分成background-image、background-repeat、background-position等一样的道理。因此例子中的“transition:background 2s linear;”可以这样写:

transition-property:background;

transition-duration:2s;

transition-timing-funcion:linear;

上面例子中,我们是做了背景色这一个属性变化的动画,那如果是多种属性同时变化的动画该怎么来实现呢?这也就是下面将介绍的组合动画。

Elements {transitions:property1 duration timing-funcion, transitions:property2 duration timing-funcion, …, transitions:propertyN duration timing-funcion;}

很容易理解吧,下面结合前面学的transform变形属性做了一个超炫的组合动画,即实现图1到变成图2的旋转动画:

源码如下:

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
  5. <title>CSS3动画属性之Transitions</title>
  6. <style type=”text/css”>
  7. *{margin:0; padding:0;}
  8. body {font-size:10px; font-family:”微软雅黑”; text-align:center;}
  9. #demo {
  10. margin:-70px 0 0 -70px;
  11. top:50%;
  12. left:50%;
  13. width:140px;
  14. height:140px;
  15. line-height:140px;
  16. background:#6F6;
  17. color:#000;
  18. border:5px #fff solid;
  19. border-radius:75px;
  20. box-shadow:0 0 10px #690;
  21. overflow:hidden;
  22. position:absolute;
  23. -webkit-transition:
  24. margin 2s linear,
  25. width 2s linear,
  26. height 2s linear,
  27. font-size 2s linear,
  28. line-height 2s linear,
  29. background 2s linear,
  30. color 2s linear,
  31. border 2s linear,
  32. border-radius 2s linear,
  33. box-shadow 2s linear,
  34. -webkit-transform 2s linear;
  35. -moz-transition:
  36. margin 2s linear,
  37. width 2s linear,
  38. height 2s linear,
  39. font-size 2s linear,
  40. line-height 2s linear,
  41. background 2s linear,
  42. color 2s linear,
  43. border 2s linear,
  44. border-radius 2s linear,
  45. box-shadow 2s linear,
  46. -moz-transform 2s linear;
  47. -o-transition:
  48. margin 2s linear,
  49. width 2s linear,
  50. height 2s linear,
  51. font-size 2s linear,
  52. line-height 2s linear,
  53. background 2s linear,
  54. color 2s linear,
  55. border 2s linear,
  56. border-radius 2s linear,
  57. box-shadow 2s linear,
  58. -o-transform 2s linear;
  59. }
  60. #demo:hover {
  61. margin:-150px 0 0 -150px;
  62. width:300px;
  63. height:300px;
  64. font-size:22px;
  65. line-height:300px;
  66. background:#606;
  67. color:#fff;
  68. border:10px #d1d1d1 solid;
  69. border-radius:160px;
  70. box-shadow:0 0 20px #636;
  71. -webkit-transform:rotate(720deg);
  72. -moz-transform:rotate(720deg);
  73. -o-transform:rotate(720deg);
  74. }
  75. </style>
  76. </head>
  77. <body>
  78. <div id=”demo”>CSS3动画属性之Transitions</div>
  79. </body>
  80. </html>

变形处理之Transform属性

今天来介绍CSS3的一个神奇的属性——transform,它可以实现文字或图像的旋转、缩放、倾斜、移动四种类型的变形处理。

首先我们做一实例:

定义CSS——

#box {

width:100px;

height:60px;

background:#909;

margin:100px auto;

}

定义HTML——

<div id=”box”></div>

图示效果:

1、旋转,属性表达方法为transform:rotate(*)。Rotate是旋转的意思;括号里*值的形式是“数值”+“deg”,表示旋转的角度;旋转角度是按顺时针方向来计算的。(deg是CSS3的“Values and Units”模块中定义的一个角度单位。)

使用方法:如果想要将实例中的div旋转,只需要如下定义:
#box {transform:rotate(30deg);}

即可看到这样的效果:

2、缩放,属性表达方式为transform:scale(num,num)。Scale是按比例缩放的意思;两个num为数值,表示缩放倍率,举俩例子:“0.5”表示缩小50%,“2”表示放大1倍。这里两个num值分别表示水平方向和垂直方向,若只设置一个值,则表示两个方向取同值。

使用方法:如果想要将实例中的div放大1倍,只需要如下定义:
#box {transform:scale(2);}

即可看到这样的效果:

3、倾斜,属性表达方式为transform:skew(num,num)。Skew是使歪斜(扭曲)的意思;这里的num值为“数值”+“deg”的形式,表示指定的倾斜角度;同样的,两个num值分别表示水平方向的倾斜角度和垂直方向的倾斜角度,若只设置一个值,则表示两个方向取同值。
使用方法:如果想要将实例中的div水平倾斜30度垂直倾斜5度,只需要如下定义:
#box {transform:skew(30deg,5deg);}

即可看到这样的效果:

4、移动(非动画),属性表达方式为transform:translate(num,num)。Translate方法表示移动的意思,注意,不是我们看到的那种移动动画,而是处理一个移动结果。这里两个num值为像素值的形式,分别表示水平方向上的移动距离和垂直方向上的移动距离,这里需要注意了,若只设置一个值,则不再表示两个方向取同值,而是默认为只设置了水平方向的移动值。所以就算两个移动的值相等,也不能省略了。规范得来定义单一方向的写法应是

translateX(30px);//表示水平方向移动30px

translateY(30px);//表示垂直方向移动30px

使用方法:如果想要将实例中的div水平方向和垂直方向分别移动30px,只需要如下定义:#box {transform:translate(30px,30px);}

这个就不再展示效果了,你懂的。:P

关于transform属性,IE尚不支持,目前可支持的浏览器有:Chrome8+, FireFox4+, Opera10+,Safari3.1+。

★ 指定变形的基准点

大家动手做下实例会发现,transform方法在做以上四种变形时,都是以元素的中心点为基准点来进行的,这个是默认的处理方法。那我们能否改变这个基准点呢?

Sure,那么我们就顺便介绍下transform-orign属性,举个例子就明白怎么使用了:

transorm-origin:left top;表示基准点为元素的左上角。

淘宝页面美化之首页热销商品广告页-02

设计理念:一个出色的设计师不会局限于某种设计风格,往往他心目中会有无数种想法,但每个设计师都是一个个体,某些细节设计起来是一致的。所以当这类型的广告页面设计的时候,也得考虑很网站整体风格的匹配。某种程度上广告页面也是页面的一部分,例如站点是稀疏结合,就是说大色块和清爽的纯白相结合。这时候,你广告页面放的位置决定了你不能做成某些风格。再有,例如滚屏的大广告页,多屏的时候,每个广告页直接得考虑连贯性。

元素铺排:任何这类型页面都得放上足够的元素,那么什么元素要放呢。一般来说,商品名字是要放的,还有商品的图片,但这只是通常,当你的图片有足够的说服力的时候,名字写与不写倒不是很重要了。再有slogan,这个就无比重要了,就算你觉得庸俗,觉得假,宣传口号都是很能吸引眼球的。个人甚至觉得这个比产品本身更为重要。再有就是价格,对消费者来说,多吸引的口号都好,价格是一个决定因素,一个决定是否点击进去的因素。其他次要的元素,例如“click in”之类的装饰元素按设计师的想法来排放

  图片选择:这个很关键,第一步当然是要先收集素材,不局限于店家提供的图片,可以到外网用搜索引擎搜索图片,资源。图片素材种类,产品大图,产品细节图,模特儿?再有使用的情景图,无论种种,都得突出产品主题,最好就能够一目了然最好。例如人物,所以抠图是必不可少的。抠图完了,还得跟背景图相融合。因为空间有限,所以图片并不是越多越好,要选的,只能是你要用到的。

jquery实现图片大小自适应

在做程序中遇到图片大小不规则或者图片须预览的情况是一个很让人头疼的问题,图片大小不规则,一般的控制方法就是限定死其容器的高度和宽度,但是这样的话,非与容器宽高等比的图片就会出现变形,而在作图时完全控制也是不可能的事,在做禾禾网站这个项目中就遇到了这样的一个难题,用户给的图片都是不规则不统一的图片,在产品预览时,程序中默认限制了容器高宽,造成了预览图变形的问题,这个问题也揪绕了我好久,后来仔细想,貌似通过css控制是做不到的,于是乎想到了用js控制,在网上搜索了一下关于图片自适应的资料,发现了一下要说的这个插件(说是插件,不如说是一个jquery方法而已),这个jquery方法仅仅用了60来行的代码便解决了图片自适应的难题

下面我来简单说一下这个插件的执行流程:

1、它是一个方法,名称叫做:resizeImg , 一般是在加载网页时便让图片执行该js方法
2、他有一个参数:opt,这是一个js数组参数,数组中包括两个键值,w与h,也就是宽和高
3、首先,它会遍历执行改方法的对象,例如,我们调用方式为:$(“.zhanshiul img”).resizeImg({w:200,h:200}),这样将遍历$(“.zhanshiul img”)这个对象
4、第二部,它将先对比图片的宽度,看其是否大于自适应的宽度,如果是则将其宽度变为我们限制的自适应宽度,然后将高度变为
图片高度* (限定宽度 / 实际宽度),将高度等比缩放
5、如果图片宽度小于限定宽度,则将对比图片的高度,看是否大于限定高度,如果大于,则将高度变为限定的高度,然后将宽度变为
图片宽度* (限定高度 / 实际高度),将宽度等比缩放
6、最后一步,实现图片在容器内居中,这个将有css控制,于是最后我们将设置图片填充容器外左边距的距离为:设定宽度- 图片宽度) / 2
填充容器外顶部距离为:设定高度- 图片高度) / 2,js代码为:
$(this).css({
“margin-left” : (opts[“w”] – imgWidth) / 2 ,
“margin-top” : (opts[“h”] – imgHeight)/2
});

就这样,便实现了一个图片自适应的过程,当然这个js也不是对所有图片都适应,因为js执行是需要时间的,当执行时间长一点时,将会造成先看到原图,然后再看到图片缩小这样的效果,影响了产品美观,那么,什么原因会造成js执行很慢呢?当然网速是一个问题,再者,就是我们需要执行的对象,图片不能为太大的图片,如果图片太大,会造成媒体加载很慢,更别说js加载了,说到这里,其实个人觉得最好的控制图片的方法是我们在作图时即注意图片比例,这样便可直接用css控制即可,既省了js,也可使页面更好看。

jquery组件Uploadify的使用

        在百通微博项目的开发过程中曾遇到了这样一个难题,一个发图片微博的功能,需要做到上传并预览图片,但传统的上传功能是运用的简单的file控件,如果要将图片上传到服务器的话还需另外添加上传功能,而且后面的预览功能仍需要另外写js去实现,整个过程比较繁琐,而且做出来的效果也并不美观,所以我抛弃了传统做法,并在网上搜索新的功能组件,于是,便找到了就jquery的uploadify组件。

       jquery大家都知道,是一个轻量级而且很优秀的Javascrīpt框架,兼容性相当好,是开发人员必备之物,而由它开发的uploadify组件,在网上的评论也是很不错的,他的优势有很多:支持单文件或多文件上传,可控制并发上传的文件数 ;在服务器端支持各种语言与之配合使用,诸如PHP,.NET,Java……;通过参数可配置上传文件类型及大小限制;通过参数可配置是否选择文件后自动上传;易于扩展,可控制每一步骤的回调函数(onSelect, onCancel……);通过接口参数和CSS控制外观等等。

      下面介绍一下uploadify组件的具体使用:

      uploadify组件的内容其实不复杂,下载解压下来后,发现他有一大堆的文件,其实主要我们用到的只有那么几个:以看到里面的几个主要文件:jquery.uploadify.js(完成上传功能的脚本文件,在调用页面引用)、uploadify.css(外观样式表)、uploader.swf(上传控件的主体文件,flash控件)、upload.php(服务器端处理文件)。他的主要文件方法文件就是jquery.uploadify.js了。

     uploadify的参数比较多,主要包括:

       uploader : uploadify.swf 文件的相对路径,该swf文件是一个带有文字BROWSE的按钮,点击后淡出打开文件对话框,默认值: uploadify.swf。 
       script :   后台处理程序的相对路径 。默认值:uploadify.php 
       checkScript :用来判断上传选择的文件在服务器是否存在的后台处理程序的相对路径 
       fileDataName :设置一个名字,在服务器处理程序中根据该名字来取上传文件的数据。默认为Filedata 
       method : 提交方式Post 或Get 默认为Post 
       scriptAccess :flash脚本文件的访问模式,如果在本地测试设置为always,默认值:sameDomain 
       folder :  上传文件存放的目录 。
       queueID : 文件队列的ID,该ID与存放文件队列的div的ID一致。
       queueSizeLimit : 当允许多文件生成时,设置选择文件的个数,默认值:999 。
       multi : 设置为true时可以上传多个文件。 
       auto : 设置为true当选择文件后就直接上传了,为false需要点击上传按钮才上传 。
       fileDesc : 这个属性值必须设置fileExt属性后才有效。   sizeLimit : 上传文件的大小限制 。
       simUploadLimit : 允许同时上传的个数 默认值:1 。
       buttonText : 浏览按钮的文本,默认值:BROWSE 。
       buttonImg : 浏览按钮的图片的路径 。
       hideButton : 设置为true则隐藏浏览按钮的图片 。
       rollover : 值为true和false,设置为true时当鼠标移到浏览按钮上时有反转效果。 
       width : 设置浏览按钮的宽度 ,默认值:110。
       height : 设置浏览按钮的高度 ,默认值:30。
      wmode : 设置该项为transparent 可以使浏览按钮的flash背景文件透明,并且flash文件会被置为页面的最高层。 默认值:opaque 。 
      cancelImg :选择文件到文件队列中后的每一个文件上的关闭按钮图标。
      fileExt : 设置可以选择的文件的类型,格式如:’*.doc;*.pdf;*.rar’ 。 

      运用时,我们引入**.uploadify.min.js及uploadify.css文件, 前提是我们需要引入jquery文在先
 然后即可在js中插入相应的js代码了:
$(document).ready(function()
{
      $(“#uploadify”).uploadify({
      ‘uploader’: ‘JS/jquery.uploadify-v2.1.0/uploadify.swf’,
      ‘script’: ‘UploadHandler.ashx’,
      ‘cancelImg’: ‘JS/jquery.uploadify-v2.1.0/cancel.png’,
      ‘folder’: ‘UploadFile’,
      ‘queueID’: ‘fileQueue’,
      ‘auto’: false,
      ‘multi’: true,
      ‘onInit’:function(){alert(“1”);},
      ‘onSelect’: function(e, queueId, fileObj){
      alert(“唯一标识:” + queueId + “rn” );
      }
   });
});

需要注意的是,uploadify方法一定要加载在初始化方法中,否则无效果,具体的参数设定就由你当前的功能决定了。到这一步,一个js上传与带进度条预览的效果便完成了,用uploadify组件即减少了代码输出量,也使页面效果更美观。