๑۩ﺴ ❤卉❤浪漫时空❀ﺴ۩๑

前天写的这个教程，今天（6.25号）在网上搜索资料是   竟发现了Alipay的UED团队也写过这么一篇类似的教程，也是使用Dynamic Panel实现Tab分页      哈哈   真是英雄所见略同呀      查看原文

另外一篇关于Dynamic Panel的使用介绍   写的不错   推荐有兴趣的同学可以看看

 

--------------------------------------时间分割，以下内容发表于6.23--------------------------------------------

 

晚上快下班时一个同事问俺怎么用Axure实现Tab分页

我已经估计半年没用Axure了...一时竟想不起来   只记得大概用Dynamic Panel可以实现

 

晚上吃晚饭回来 玩了一会  又想起这事   便开始琢磨起来

最后也的确是用动态面板来实现了Tab的效果 （不过不知道是不是还有其它更容易的方法？）

为了自己加深印象  故写了这篇简单教程    也希望给想学习Axure的人提供一些帮助

 

Axure作为交互设计里的模型制作工具，它本身的可用性做的挺好的，非常易学！当初自己也就瞎摸索了一两天就差不多都会了。Axure拥有的一些强大的功能，甚至可以实现简单的数据控制和流程判断，针对网站项目，应用Axure可以做出保真度非常高的原型

在实际应用中，不管是对于早期产品可用性测试，或是面向整个团队阐述产品概念，这种原型都能发挥极好的作用

 

 

 

滤镜说明：
Alpha：设置透明层次.
blur：创建高速度移动效果，即模糊效果.
Chroma：制作专用颜色透明.
DropShadow：创建对象的固定影子.
FlipH：创建水平镜像图片.
FlipV：创建垂直镜像图片.
glow：加光辉在附近对象的边外.
gray：把图片灰度化.
invert：反色.
light：创建光源在对象上.
mask：创建透明掩膜在对象上.
shadow：创建偏移固定影子.
wave：波纹效果.
Xray：使对象变的像被x光照射一样.

1.滤镜:alpha
语法:
STYLE="filter:Alpha(Opacity=opacity,FinishOpacity=finishopacity,Style=style,
StartX=startX,StartY=startY,FinishX=finishX,FinishY=finishY)"
说明：
Opacity:起始值，取值为0-100,0为透明，100为原图.
FinishOpacity:目标值.
Style：1或2或3
StartX：任 ?
StartY：任意值
例子：filter:Alpha(Opacity="0",FinishOpacity="40",Style="2")

2.滤镜:blur
语法:
STYLE="filter:Blur(Add=add,Direction=direction,Strength=strength)"
说明：
Add:一般为1，或0.
Direction:角度,0-315度，步长为45度.
Strength:效果增长的数值,一般5即可.
例子：filter:Blur(Add="1",Direction="45",Strength="5")

3.滤镜:chroma
语法:
STYLE="filter:Chroma(Color=color)"
说明:
color:#rrggbb格式，任意.
例子：filter:Chroma(Color="#FFFFFF")

4.滤镜:DropShadow
语法:
STYLE="filter:DropShadow(Color=color,OffX=offX,OffY=offY,Positive=positive)"
说明:
Color:#rrggbb格式，任意.
Offx:X轴偏离值.
Offy:Y轴偏离值.
Positive:1或0.
例子：filter:DropShadow(Color="#6699CC",OffX="5",OffY="5",Positive="1")

5.滤镜:FlipH
语法:
STYLE="filter:FlipH"
例子：filter:FlipH

6.滤镜:FlipV
语法:
STYLE="filter:FlipV"
例子：filter:FlipV

7.滤镜:Glow
语法:
STYLE="filter:Glow(Color=color,Strength=strength)"
说明:
Color:发光颜色.
Strength:强度(0-100)
例子：filter:Glow(Color="#6699CC",Strength="5")

8滤镜:Gray
语法:
STYLE="filter:Gray"
例子：filter:Gray

9.滤镜:Invert
语法:
STYLE="filter:Invert"
例子：filter:Invert

10.滤镜:Mask
语法:
STYLE="filter:Mask(Color=color)"
例子：filter:Mask(Color="#FFFFE0")

11.滤镜:Shadow
语法:
filter:Shadow(Color=color,Direction=direction)
说明:
Color:#rrggbb格式.
Direction:角度,0-315度，步长为45度.
例子：filter:Shadow(Color="#6699CC",Direction="135")

12.滤镜:Wave
语法:
filter:Wave(Add=add,Freq=freq,LightStrength=strength,Phase=phase,Strength=strength)
说明:
Add:一般为1，或0.
Freq:变形值.
LightStrength:变形百分比.
Phase:角度变形百分比.
Strength:变形强度.
例子:filter:wave(Add="0",Phase="4",Freq="5",LightStrength="5",Strength="2")

13.滤镜:Xray
语法:
STYLE="filter:Xray"
例子:filter:Xray


14.颜色变化
语法：
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#B5CCFA', EndColorStr='#B5CCFA');

方法一、通过 css 和 IE 专有属性 behavior 解决整站 png 背景透明问题

<style type="text/css">
<!--
img { behavior:url(/iepngfix.htc); }
-->
</style>

htc文件内容

<public:component>
<public:attach event="onpropertychange" onevent="doFix()" />
<script type="text/javascript">
// IE5.5+ PNG Alpha Fix v1.0RC3
// (c) 2004-2005 Angus Turnbull http://www.twinhelix.com
// This is licensed under the CC-GNU LGPL, version 2.1 or later.
// For details, see: http://creativecommons.org/licenses/LGPL/2.1/
// This must be a path to a blank image. That's all the configuration you need.
var blankImg = '/spacer.gif';
var f = 'DXImageTransform.Microsoft.AlphaImageLoader';
function filt(s,m)
 {
 if (filters[f])
  {
    filters[f].enabled = s ? true : false;
    if (s) with (filters[f])
   {
   src = s;
   sizingMethod = m;
   }
   }
  else if (s)
  {
  style.filter = 'progid:'+f+'(src="'+s+'",sizingMethod="'+m+'")';
  }
 }
function doFix()
 {
 // Assume IE7 is OK
 if (!/MSIE (5\.5|6\.)/.test(navigator.userAgent) || (event && !/(background|src)/.test(event.propertyName)))
  {
  return;
  }
 var bgImg = currentStyle.backgroundImage || style.backgroundImage;
 if (tagName == 'IMG')
  {
  if ((/\.png$/i).test(src))
   {
   // this tests to see if the image has already been replaced once before
   if (src.indexOf('?repurl=') == -1)
    {
    if (currentStyle.width == 'auto' && currentStyle.height == 'auto')
        {
     style.width = offsetWidth+'px';
     }
    filt(src,'scale');
    src = blankImg+'?repurl='+src;
    }
   }
  else if (src.indexOf(blankImg) < 0)
   {
   filt();
   }
  }
 else if (bgImg && bgImg != 'none')
  {
    if (bgImg.match(/^url[("']+(.*\.png)[)"']+$/i))
     {
     var s = RegExp.$1;
     if (currentStyle.width == 'auto' && currentStyle.height == 'auto')
       {
    style.width = offsetWidth+'px';
    }
     style.backgroundImage = 'none';
     filt(s,'crop');
     // IE link fix
     for (var n=0;n<childNodes.length;n++)
    {
    if (childNodes[n].style) { childNodes[n].style.position = 'relative'};
    }
     }
  else filt();
  }
 }
doFix();
</script>
</public:component>

方法二、通过 css ie滤镜解决
<style type="text/css">
<!--
.pngpic { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/pngpic.png',sizingMethod='crop'); }
-->
</style>

方法三、通过 javascript 和 css 滤镜解决 IE 整站 png 背景透明问题
<script type="text/javascript" language="javascript">
function enablePngImages() {
 var imgArr = document.getElementsByTagName("IMG");
 for(i=0; i<imgArr.length; i++){
  if(imgArr[i].src.toLowerCase().lastIndexOf(".png") != -1){
   imgArr[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + imgArr[i].src + "', sizingMethod='auto')";
   imgArr[i].src = "spacer.gif";
  }
  
  if(imgArr[i].currentStyle.backgroundImage.lastIndexOf(".png") != -1){
   var img = imgArr[i].currentStyle.backgroundImage.substring(5,imgArr[i].currentStyle.backgroundImage.length-2);
   imgArr[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+img+"', sizingMethod='crop')";
   imgArr[i].style.backgroundImage = "url(spacer.gif)";
  }
 }
}

function enableBgPngImages(bgElements){
 for(i=0; i<bgElements.length; i++){
  if(bgElements[i].currentStyle.backgroundImage.lastIndexOf(".png") != -1){
   //alert(bgElements[i]);
   var img = bgElements[i].currentStyle.backgroundImage.substring(5,bgElements[i].currentStyle.backgroundImage.length-2);
   bgElements[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+img+"', sizingMethod='crop')";
   bgElements[i].style.backgroundImage = "url(spacer.gif)";
  }
 }
}
</script>

<img src="pngpic.png" alt="" border="0" />
<!--[if lt IE 7]>
<script type='text/javascript'>
var bgElements;
 enablePngImages();
 if(bgElements){
  enableBgPngImages(bgElements);
 }
</script>
<![endif]-->

shift键我们经常使用，但是有些功能你可能并不知道，下面我们就从十大方面来讲一下shift键妙用:

　　一 当你用QQ和别人聊天时，是不是有时信息发送的特别慢呀，不要紧，只要你发信息时按shift键信息就会很快的发送出去的!

　　二 当你面对一大堆窗口，却要一个一个把它们关掉时。是不是很烦啊。只要你按shift键在单击关闭按扭，所以的窗口就会全部关掉。

　　三 在输入大小写字母时，按shift键，就可以改变其大小写!

　　四 当安装了某个新软件，有时要从新启动计算机才有用，只要先按shift键，就可以跳过计算机的自检节省了大量的时间!

　　五 选择文件时，先按shift键，在选最后一个文件，可以选中一大批。

　　六 删除文件时，按shift键可以直接删除。不经过回收站。

　　七 放光碟时，连按数下shift键，可以跳过自动播放!

　　八 按shift键+F10可以代替鼠标右键。

　　九 打开文件时，如果你不想用默认方式打开，按shift键，在单击右键，在右边的菜单上就多出了打开方式下面的你就自己去做吧!

　　十 按shift键，点击超级连接，可以打开新窗口